皆さん、こんにちは！
プログラミングを学び始めて間もない私が、AIの力を借りて完全オリジナルのキャラクターと会話ができるチャットアプリを作成したので、その記録としてこちらに記事を残そうと思いました。

この記事では、その開発過程を簡単に共有し、

「プログラミングに挑戦してみたいけれど、なんとなく難しそうというイメージがあり、なかなか挑戦しにくい」

と考えている方々にインスピレーションを与えられればと思っています。

どんな技術が使われているのか、そして実際にどのように機能するのかを見ていきましょう。

アプリのコンセプト

このアプリは、自作したキャラクターに声を与え、リアルタイムで対話ができるようにすることが目的です。

ユーザーは特定の質問やコメントを入力し、キャラクターがそれに応じて声で返答します。
さらに声だけでは少し味気ない部分があったので、できれば声と一緒にキャラクターが話しているかのような動きも出せればとも考えました。

この対話形式で、ユーザーはまるで自分の作成したキャラクターと実際に会話しているような感覚を得ることができます。

では早速ですが、実際に作ったアプリを見ていきましょう。

外観はこんな感じで、キャラクターが左にいて、右はテキストエリアです。

例えば以下のように、簡単にメッセージを送ってみます。
するとこんな感じで会話が成立していることがわかります。

今回は上司に怒られた時の対応方法を教えてくれていますね。

実際には文章を声で読み上げてくれているのと、読み上げている際には動きもついています。
Noteの記事には動画を載せることができないので、Youtubeでその様子を動画にしました。

もし興味があれば覗いてみてください。

開発過程

使用技術

• React.js: 特にReact.jsでやりたいという強い意志があったわけではないですが、なんとなく動きを出すのであればjavascriptかなという安易な考えの元、javascriptのフレームワークを選択しました。
  この時点ですでに何を言っているかわからないという方も安心してください。
  ChatGPTに「React.jsをローカル環境に導入する方法を教えて」など指示すれば、結構丁寧に教えてくれるので、それに従ってたら意外とできます。

• VOICEVOX: キャラクターの音声のためにインストールしました。React.jsと同様に使い方やインストールの方法をChatGPTに聞くことで丁寧に教えてもらえます。

• ChatGPT API: キャラクターと雑談をするためにはこのChatGPTのAPIは欠かせません。これもChatGPTに使い方を聞いてしまえば、解説だけでなく、コード生成までやってくれます。

開発手順

• キャラクター準備

私自身、絵心が全くなく、実力でキャラクターを作成なんて到底できないので、これもChatGPTに作ってもらいます。
（ChatGPTで画像生成をする場合、有料版のChatGPT 4を使わないとできなので、そこは注意してください）

どんな画像を作りたいかは個人の趣味嗜好に任せますが、私はおぢのウケもちょっと狙いたいという目論見もあり、可愛らしいキャラクターを作成してもらいました。

Javascriptで動きを出すために、パラパラ漫画のように口を閉じている画像と開けている画像を等間隔に配置してもらっていますが、この辺りも

「〜の画像を生成してください。ただし、パラパラ漫画のように口が閉じている画像と開いている画像を等間隔で、同じ画像の中で出力してください」

などと指示すれば作ってくれます。

• コーディング

開発手順は至って簡単で、ChatGPTにたとえば以下のようなプロンプトを送ります。

「React.js、VOICEVOX、ChatGPT APIを使って雑談ができるアプリを作成したいです。これを実現するためのコードを生成してください」

もちろん上記の指示一回だけでアプリを作成することはできませんが、万が一エラーが発生したりしても、

「エラーが発生しているけど解消してください」

のような指示をChatGPTにお願いするだけでエラーを解消する方法を教えてくれたりします。

また、もしデザインが気に入らなくても、デザインをもっとオシャレにするように指示をすれば、ChatGPTはデザインすらも直してくれます。

このように何度かChatGPTと会話をするだけで、どんどんアプリが完成に近づいて行くというのがAIを使いながらプログラミングをすることの面白いところで、AIの凄さを実感します。

今回は全ての作成過程やコードを載せると長くなってしまうので、ここには載せませんが、やっていたことは本当に日本語で繰り返しChatGPTと会話をしていただけです。
（ご要望などもしあれば、Githubなりで公開したいです）

実際に私自身、React.jsもVOICEVOXもChatGPT APIも初めて触りましたが、これだけでなんとなくアプリは作成できました。
本当にAI技術の進化の凄さを痛感するばかりですし、自分の想像したものをすぐに形にできるということで、とても可能性を感じました。

終わりに

アプリ開発は技術的な知識や経験が必要な分野とされ、自分を含め、多くの人にとっては高い壁に感じられていたと思います。

しかし、AI技術の進化とともに、その参入障壁は大きく低下しています。

このアプリ作成を通じて、私自身が体験したように、プログラミングの経験が少ない人でも、AIの力を借りることよって、自分のアイデアを形にすることが可能です。

プログラミング初心者であっても、AIと一緒に一歩を踏み出せば、意外とアプリ作成いけるなということを、皆さんに伝えられたら幸いです。

自分のアイデアを形にする喜びを、ぜひ一緒に味わいましょう。

またこの他にも少しづつですが、アプリ作成をして、Youtubeにも公開しているので、もしよければ遊びに来てください。

また、Xもやっているので、もしよければアプリ作成に関する意見など交換しましょう。

最後までお読みいただきありがとうございました。