【個人開発】ChatGPT APIを使って最適なゲーミングマウスを診断してくれるサービスを作りました

作ったもの

AIゲーミングマウス診断

最近 ChatGPT で話題の open AI が提供している API を利用して、質問に答えると自分に最適なゲーミングマウスを AI が診断してくれるサービスをつくりました🎉

(良ければこのツイートをいいね/RTしていただけると嬉しいです！)

なぜ作ったのか

最近OverWatch2を始めた先輩と一緒にゲーミングマウスを見に行った際、どのマウスをを選べはいいのか、どのマウスをおすすめすべきか分からず困る事がありました。そこで、同じような悩みを持つPCゲーム初心者たちがいるのではないかと考えました。それから試しにChatGPTに自身の特徴を伝えておすすめのマウスを聞いてみると、良さそうなレスポンスが返ってきたので作ってみる事にしました！

技術スタック

私は個人開発をする際に新しい技術を採用してみる事を一つの目標にしています。
今回、どの技術を採用するか考えていたところ、Vercel Proプランの契約を検討していたのですが、GCPにデプロイすれば無料枠だけで事足りるのではないかと考え、GCPに挑戦してみる事にしました。

GCPについての知識は全くなかったのですが、困った時にはChatGPTがなんとかしてくれるだろうと信じて取り組んでみました。

フロントエンド

• Next.js
  • 開発を始めて数週間後くらいにapp routerが　stable になったけど、Chakra UIがserver components に未対応だったので、pagesディレクトリのまま開発しました。
• Chakra UI
  • 今回はサクッと作ってみる事が目的だったので、UIライブラリーを導入してみました。欲しいコンポーネントが大体揃っていたり、figmaのデザインシステムが公開されていたりと開発体験がとてもよかったです。
  • まだ、server components に対応していないようで、今後 App Router で開発する際は、何を採用するべきか悩みますね。最近は　Kuma UI/Panda CSSが気になっています。
• OpenAI API
• 今回の目玉です、GPT-3.5-turboというモデルを利用して診断を行なってもらっています。

バックエンド・インフラ

• API Routes
  • 軽量なAPIで十分なので今回も採用、Prismaと組み合わせて利用しています。
• Cloud Run
  • vercelにデプロイする事と比べるとやる事はいっぱいだけど、　この規模なら無料枠でお金がほとんどかからないのでお財布にやさしい
  • Github Actionsを利用して、mainに更新が入ったら自動デプロイをするようにしています。
• Cloudflare
  • 静的ファイルをキャッシュするために、Cloud Load Balancingを使用して、ロードバランサーを立てて、Cloud CDNを利用していたら、毎日80円くらいかかるようになったので、無料枠がでかいCloudflareに乗り換えました。

はまったポイント

Function calling

開発途中に、OpenAIからFunction callingと呼ばれる新機能が発表されました。APIからのレスポンスの形式を自分で定義できると聞いて、こりゃあ便利だと感じて使ってみたのですが、私の指定方法が悪かったのか、欲しいレスポンスを得るのにとても苦戦しました。

結局、この新機能の使用は断念して、従来通りの方法でレスポンスをJSONにパースして利用する形で進める事にしました。今は良い感じになっているかもしれないので、また試してみて良さそうなら置き換えようかと考えています。

OGPの生成

今回のサービスでは、診断結果画面のOGP画像を動的に生成しています。

当初は、Vercelが提供している vercel/og という、OGP画像を生成できるライブラリを使用することを検討していました。しかし、このライブラリはEdge Runtimeでの実行のみがサポートされているようで、結局はその使用を見送りました。

その代わりに、vercel/ogでも利用されているSatoriというライブラリを選択しました。Satori は HTML と CSS を CSV に変換する機能を持ち、また JSX 記法もサポートしているため、とても簡単に画像を生成する事ができて感動しました！！

OGPの動的生成を検討している方は、ぜひ一度 Satori 試してみてください！

工夫したポイント

診断中にゲーミングマウスTIPS表示する

ゲーミングマウスの診断のために、OpenAIのAPIを呼び出す部分で、通信に数十秒ほどかかってしまう事がわかりました。この待ち時間の間に何を表示すべきか悩んでいたところ、ゲームのローディング時にゲームについてのヒントが表示されていた事を思い出し、これは良いアイディアだと取り込んでみる事にしました。

ヒントに興味がないユーザーもいるかなと考え、ヒントの表示を選択できる形式で実装しています！

普段プレイしているゲームなどからWebサービスに取り込めそうなアイディアがいっぱいありそうだな〜と気づきが得られました👀

別ページに移動しても選択肢内容を維持

フォームの入力中に FAQ ページ等に移動して、再度フォームの画面に戻ると、選択内容がリセットされてしまっていて「あ〜😱」となった経験はないでしょうか？入力項目が少ない場合でも悲しいですし、多い場合は嫌になってページを閉じてしまう事もありますよね。

今回は、そんな悲しい事にならないようにページの遷移前に入力内容を store　に保存する事で対策してみました。
また、ヘルプテキストから FAQ ページに遷移したユーザーがスムーズに診断画面に戻って来れるように意識して実装してみました。

(ヘルプテキストをクリックすると、よくある質問ページに遷移します)

(診断ページから遷移した場合は、診断に戻るボタンを表示する)

(診断に戻るを押すと、ヘルプテキストを押した位置に戻ります)

感想

最後まで読んでいただいてありがとうございます！！

前回の「制度作ったったー」をリリースしてから、約一年ぶりの個人開発でとても楽しかったです！！
次に作りたいものも決まっているので、またリリース記事を出せるように頑張ろうと思います！！

良ければ、AIゲーミングマウス診断で遊んでみてください！
改善点、バグなどあれば @mikeanakida に連絡していただけると嬉しいです！！