はじめまして！
情報系の私立大学で気ままにプログラミングを楽しんでいるhacoと申します。今回はタイトル通り、大学の課題でAIチャットアプリを作ってみたら思いの外クラスで注目を集めることができたので、ご紹介していこうと思います！
(初投稿ですので荒い部分はご容赦ください)
講義の概要
私の大学のあるネットワーク系の講義でHTML,CSS,PHPを習い、これらを用いてwebアプリケーションを作る課題が出されました。この課題の条件はほぼ無し。テーマや使う技術、デザインの方向性までもが完全に自由！
学生の個性やスキルが試される、まさに「腕の見せどころ」的な課題です。正直、自由すぎて最初は「何を作ればいいんだ…？」って感じでしたが、こういう自由度の高い課題こそ、クリエイティビティを爆発させるチャンスだと思い直しました。
「どうせやるなら目立つものを作りたい！」と思い、私が選んだのは AIチャットアプリ。今流行りのAIをテーマにすれば、クラスのみんなにも「おっ？」と思ってもらえるかな、と。
作成したアプリ
じゃあどんなの作ったのって話ですよね。こんな感じです。
アプリ概要
私ごときがただのAIチャットアプリを作っても、ChatGPTの下位互換にしかなり得ないわけで、制作物にはひねりを加える必要がありました。
という訳で今回制作したのはその名も...
「AIたちがわいわい話しながらあなたのアイデアを磨き上げるアプリ」
このアプリでは複数のAIキャラクターがまるでグループチャットのように、あなたのアイデアに対して議論を繰り広げるんです。チャットルームにユーザがアイデアを入力すると3人のAI専門家たちが独自の視点でアイデアを評価します。例えば「クリエイティブ専門AI」が「こんな視点も面白いかも」と斬新なアイデアを提案してくれるなど、AIキャラクター同士がわちゃわちゃ議論しながら新しいアイデアを引き出してくれる仕組みです。
機能と仕組み
このアプリの中でユーザーができることは「アイデアを送信する」の一つだけ。アイデアデータをPHPスクリプトに渡し、PHP側でAIのキャラ付けと返答生成を行い、フロント側に返す。あとはチャット風にスタイリングしてあげれば完了！
図に起こすとこんな感じ！シンプル過ぎて図に起こす必要なかったかもしれない...
かかった時間
アイデア出し,設計 → 1時間
環境構築と素材集め → 3時間
実装 → 10時間くらい
デバック,修正 → 2時間
ぶち当たった課題と解決
シンプルなアプリに仕上げるつもりだったのですが、大きめの壁に何度かぶつかったので紹介します。
1. 学校サーバのPHPバージョン低すぎ問題
これです。うちの学校のサーバのPHPバージョンはなんと 5.5。最終アップデート (ver 5.5.38) は 2016 年なので、実に 8 年前の代物です。
ところで、今回のアプリでは geminiAPI を使ってAIキャラクターを実現しています。このAPIを使うためには、Googleが用意している便利な公式ライブラリがあるのですが、問題は当然これが最新のPHPバージョン向けだということ。学校サーバの化石が、そんなモダンなライブラリに対応しているはずがありません。
そこで、今回は公式ライブラリを諦め、REST形式でAPIのエンドポイントを直接叩いてデータをやり取りする方法を選びました。少々面倒ではありますが、curl や stream_context を駆使すれば実現可能です。これは古い環境に合わせた柔軟な対応力を鍛える良い機会になりました。
2. AIキャラクター作り方分からない問題
そもそも、私はAIキャラクターの作り方なんて知りませんし、絵のデザインなんてなおさら無理...。
とりあえず絵についてはChatGPTにプロンプトを投げたら…。めちゃくちゃ良い感じの絵を生成してくれました。
AIキャラクターの性格やセリフ生成については、プロンプト調整がカギになりました。例えば、キャラクターごとに多様な個性を持たせたかったのですが、同時にトークン数が増えすぎるとレスポンスが遅くなったり、API使用料がかさむ問題が…。学生にお金はありませんから、プロンプトは必要最低限の指示だけに絞って調整しました。
それでも適切な回答を返してくれるよう、試行錯誤を繰り返しました。(API料金ががが)
プロンプト一部紹介
$data = array(
"contents" => array(
array(
"role" => "user", // ユーザーのリクエストとして指定
"parts" => array(
array(
"text" =>
"
あなたは、高校2年生の女子アニメキャラクター『ユキ』です。明るく元気でクリエイティブな女の子で、アイデアの種を拾っては面白おかしく膨らませるのが大好き。人とは違う発想で、新しいものやアイデアを評価するのが得意なあなたは、これから提示されるアイデアについて、以下の条件で意見を述べてください。
-回答は150~200文字程度
-高校生の女の子らしい、明るく弾んだアニメ口調で話すこと
-比喩表現や想像力を使い、発想をふくらませるような独創的なコメントにする
-ポジティブな点とネガティブな点を1つずつ挙げた上で、最終的にそのアイデアを好きか嫌いか、独創性の観点から主観的に判断する
-回答にはちょっとした驚きやテンションの上がる言葉（「わくわく」「キラキラ」など）を自然に盛り込む
"
)
)
),
array(
"role" => "user", // 継続するプロンプト
"parts" => array(
array(
"text" => "アイデア: $prompt"
)
)
)
)
);
ちなみに、このプロンプト設計に関してはQiitaに大変参考となるサイトがありました。
こちらの記事を参考にさせていただきながら、自分のアプリに合った形で改良を重ねました。
いやはや、プロンプト術とは奥深いものですね。
クラスの反応
さて、肝心のクラスの反応です。
前提として、うちのクラスは「情報系」といえども、半数以上がパソコンをまともに触ったのは入学後というレベルで、正直なところコーディングに慣れている人はごくわずか。そのため、「HTMLって何モノ？」とか「サーバーってなんや」といったな疑問が日常会話レベルで飛び交っています。もちろん、前からプログラミング経験があって、自分でWebサイトを運営しているようなツワモノもほんの数名いるんですが、全体的には初心者のほうが断然多いんです。
そんな環境で、今回作ったAIチャットアプリを授業の中で発表してみたら、これが思わぬ盛り上がりを見せました。「おお、なんかすごいね！」という率直なリアクションから、「これ実際にAIが考えてるの？」「返事はどうやって作られてるの？」という興味津々な質問まで、教室のあちこちでひそひそ話が始まり、授業の進行をちょっと止めてしまうほど。私が井の中の蛙なのは、重々承知でしたが素直に嬉しかったです。
最後に
もちろん私は分かっております。こんなものはおもちゃに過ぎない、と。webサイトとして最低限の水準にすら達していませんし、機能も殆どありません。Qiitaに住まう皆様なら特別お目に留まる作品ではないかと思ます。
でも、今の僕にとって大事なのは、このおもちゃがクラスメイトに刺激を与え、僕自身も新しい気付きやアイデアを得られたことです。古い環境での苦戦や、キャラクターづくりの試行錯誤、そしてクラスメイトからの反応は、どれも本や独学では得られない生きた学びになりました。まだまだジュニアエンジニアにも達していない私ですが、今回の経験が次の一歩になることを信じて精進していきます！
もしここまで読んでくださった方がいらっしゃいましたら、ご覧いただきありがとうございました！