こんにちは。現在学部4年の市之瀬です。 今回は先日ハッカソンに出たとき作ったものと、そこで得た学びを共有しようと思います。

ChatGPT使いたい

今回ハッカソンにはシェアハウスしている友達2人と出てきました。計3人のチームです。その友人の一人が、ChatGPTを使いたいとうるさかったので、今回のハッカソンではこれを主軸に開発するものを決めました。

ChatGPTといって思いつくのは、「対話による文章生成」でした。 そこで最初は「一人かけてても大丈夫！マーダーミステリーAI」を作ろうとしたのですが、著作権の無いマーダーミステリー探しが面倒だし、何よりマーダーミステリーを作るのは画面数が多くてしんどすぎたため却下となりました。

そこで、今回作ったものは、ChatGPTとの対話で進むレースゲームです。

Chatグランプリ

このゲームの面白いポイントは、

• レースに参加する車を自作できる
• ChatGPTとの対話でレースが進むため、無限に展開がある

ところだと思ってます。

レースに参加する車を自作できる

下の画像の「入力欄」に、作って欲しい車の特徴を入れるとその言葉に応じた車をChatGPTが作ってくれます。作ってくれたものが下の画像になります。

こんな感じで、画像と車の情報（名前、説明文など・・）が生成されます。

レース部分

レースに移ると、下の画像のようにアナウンサーから次の行動を問われます。 このときに、ユーザーは好きな行動を入力して進めます。 無難に行くなら、「めっちゃアクセルを踏む！」とかだと思います。 ただほんとになんでも良くて、空飛んでもいいし、ワープしても良いです。そんな入力に対しても、chatGPTが柔軟に対処してくれます。便利なAIですね。

学んだこと

chatGPTを使う上で一番気になったのは、お金です。使うたびにお金がかかるとか、信じられない。そんなものをネット上にあげて、なぜみんな破産しないのか・・・ APIキーを設定してはいましたが、ただの文字データなので知られたら1発でアウトです。 お金を使いすぎるのが嫌だったので、どうにか安全にAPIを叩けないか考えた結果、下の画像の左のような構成になりました。

この構成の良いところは、APIがインターネットに公開されていないところです。これが可能になっているのは、Next.jsにクライアントとサーバーという2つの実行環境があるからです。

通常のウェブアプリはクライアントとAPIのみです。クライアントからAPIを叩く際に、例えばlocalhost:9004/getItemsと書いたとします。こう書くと、クライアントは使用するユーザーの端末で動作するためユーザーの端末のlocalhost:9004にアクセスしようとします。しかしユーザーの端末にAPIは立っていないので叩くことはできません。 できないために、通常はAPIを公開します。ここでAPIをchatgp-api.nosse.netとします。クライアントがこのchatgp-api.nosse.netを叩くようにすることで、インターネット上のAPIにアクセスして叩くことができます。

しかし今回はChatGPTを使っているためAPIを公開したくありません。なので上で書いた方法はとれません。 そこで使用したのがNext.jsのサーバー側です。クライアント側が文字通りクライアント側で動作するのに対し、サーバーも文字通り実行されるサーバー上で動作します。そのため、サーバー側はdockerコンテナ内に存在します。 dockerコンテナ内に存在しているということは、APIとdocker内のローカル通信できるということです。

この仕様を用いたのが左側の構成図になります。クライアントは、まず自身のサーバー側にAPIを叩くよう要求します。すると、サーバー側はdocker内のローカル通信でAPIを叩きます。叩いた結果はサーバー側を介してクライアントに届きます。これにより、APIをインターネットに公開せず叩くことが出来ました。 サーバー側で、クライアントの認証情報などをチェックすることで、この構成はより強固なAPIにできます。chatGPTなどの従量課金のAPIを叩く際には参考にしてみてください。