生成AIなんでも展示会に向けたアプリ開発の話

はじめに

どんな人向けの記事？

• 生成 AI に興味のある方
• web アプリ開発に興味のある方

開発環境

Ubuntu 24.04.1 LTS (Core i5-8400 + メインメモリ 32GB) # そろそろ買い替えたい

（追記）作成したクイズゲーム

今回展示会用に作成したアプリをミニ PC の Coolify にデプロイしました。

下記の説明を見てからの方が良いと思いますが、ぜひ遊んでみてください！
→ スマホでも一応遊べると思いますが、おそらく UI が崩れてます。

生成 AI 関連とサブカル以外の問題はソースなしで Gemini 2.5 pro に生成させた問題なので、簡単すぎる or 問題がいまいちかもしれません。

http://quiz-game-app.robustonian.com

• 修正点
  • 展示会で見つかったバグを修正
    • AI フォンをクリックしただけで使用済になってしまうバグ
    • 出題問題が偏ってしまうバグ
  • サーバサイドからのみ API 呼び出しを行うように修正
  • AI フォンで使えるモデルをgemini-2.0-flash-001のみに限定
    • コスト削減のため
  • その他 UI の微調整

概要

2025 年 4 月 26 日(土)の生成 AI なんでも展示会 Vol.3に出展しました！

https://techplay.jp/event/974656

昨年 Vol.2 に参加しめちゃくちゃ楽しかったので、今回も絶対参加しようと思っていました。
ただ、今回は新たな挑戦として展示側として参加したいと思い、その機会をいただけたので展示に向けたアプリ開発をここ 1~2 ヶ月ぐらい進めていました。そのため、最近はあまり記事を書く余裕がなかったです 😅

さて、今回の記事では下記についてまとめたいと思います。

• 展示するアプリについて
  • ゲームのルール
  • 構成
• 没ネタ

展示するアプリについて

展示するネタが確定するまで紆余曲折あったのですが、まずは今回展示するクイズゲームについて簡単にご紹介します。

ちなみに、展示ネタが fix したのは下記のタイミングなので、開発期間としては実質 2 週間弱でした。

https://x.com/gosrum/status/1911425810075901973

ゲームのルール

まずタイトルですが、あなたの生成 AI 知識を試すクイズゲーム、名付けて「クイズ・LLM・ビリオネア」です。

世代によってはイメージができない方もいるかもですが、20 年ほど前に人気を博していたクイズバラエティ番組をオマージュしたアプリとなっています。

本クイズゲームのおおまかなルールは下記のとおりです。

基本ルール

プレーヤー名を入力し、ジャンルと問題数を選択してプレイ開始

• ジャンルはデフォルトでは生成 AI 関連のみ（116 問を作成）

• 問題数はデフォルトで 15 問（混雑具合で調整します）
  • すべて 4 択

一問でも間違えたら、その時点でゲームオーバーです

クイズ画面はこんな感じです。

緊張感を演出するために、一問ごとの時間制限を設けていますが、問題が難しくなる度に 50 秒ずつ長くなるようにしています。そのため、よほど悩まない限りはタイムオーバーになることは無いと思ってます。

ライフライン

各ライフラインは一度ずつ使用できます。
ライフラインについては、リアルタイム性を重視して一部アレンジしています。

• fifty-fifty
  これは説明不要だと思いますが、選択肢を 4 つから 2 つに絞れます。

• AI フォン
  インターネット検索可能な AI エージェントと 30 秒間だけチャットできます。

深い理由はないのですが、本アプリでは下記の 3 モデルから一つだけ選択して相談できます。
回答速度や MCP を使いこなす能力なども考慮して、モデルの選択をしてください。

チャットはキーボード入力です。

回答を見るとおわかりだと思いますが、実は問題文と選択肢は入力しなくてもプロンプトに含まれています。

これは私がそのように設計したのではなくて、Claude 3.7 Sonnet が気を利かせてプロンプトに入れてくれたからそういう仕様になってます。まあ、タイピングが苦手な方は 30 秒以内に問題文と選択肢を入力するのも大変だと思うので、このままにしています。

もちろん、ハルシネーションの可能性もあるので、信じるか信じないかはあなた次第です。

• スタティスティクス
  過去の挑戦者や LLM の回答をひっくるめた回答分布を表示します。

現状、LLM が 11 モデルで全問題を回答済みですが、当日の来場者の回答が増えると分布も少しずつ変わってくるかもしれません。

構成

今回開発したシステム全体の構成図は下記のとおりです。

• Supabase

  • DB：問題や回答などを保存

• quiz-api-backend

  • Python + FastAPI
  • DB と各アプリをつなぐ API を提供

• quiz-admin-app

  • Next.js
  • 問題の登録や可視化用に作ったフロントエンド
  • 結局 game-app に可視化機能は統合したので、ほとんど出番なし

• quiz-game-app

  • Next.js
  • ゲームのプレイ
  • 統計情報の可視化

• auto_answer

  • Python
  • LLM の自動回答生成

• LLM_phone（ライフラインの AI フォン用）

  • Mastra
  • MCP エージェント

• LLM

  • クラウド LLM
  • ローカル LLM（Ollama）

開発の流れ

基本は Claude Desktop + MCP（calude code + command executor）を用いた Vibe Coding で開発しました。

正直この組み合わせは Cursor、Windsurf、Cline 等と比べるとかなり開発体験が悪いですが、Claude Pro の年間プランに契約済なので使い倒してます。

開発の流れとしては、下記のとおりです。

1. おおよそのアウトプットイメージを頭の中で具体化

2. 必要なアプリとそれぞれの要求仕様を箇条書きで作成（だいたい手作業）

3. quiz-api-backend, quiz-admin-app, quiz-game-app、sql をひたすら Claude 3.7 Sonnet に作ってもらう

4. DB にテーブルを作成、ひたすらデバッグ作業・機能追加

   • まずは quiz-api-backend, quiz-admin-app

5. 問題の作成、登録

   • まずは基本的な問題：gemini-2.5-pro で作成（300 問ぐらい）

6. quiz-game-app

   • ライフライン無しでプレイできるようにする
   • 50:50 の実装
   • スタティスティクスの実装

7. 問題の作成、登録

   • サブカルチャーとか生成 AI 関連の問題：web 検索も駆使しつつ作成（250 問ぐらい）

8. quiz-game-app

   • AI フォンの実装
     • Mastra で LLM_phone の MCP エージェントを作成

9. auto_answer

   • LLM による自動回答 →DB 登録プログラムを作成

10. quiz-game-app

    • UI の改善
    • 統計情報可視化機能追加

11. 記事の作成 ← 今ここ（開発開始から 13 日目）

上記を普通に仕事しながら 2 週間以内で仕上げた自分を褒めたい 🎉

さて、各モデルのスコアなど気になるかもしれませんが、それらは展示会が終わった後に改めて紹介したいと思います。

問題はたくさん作りましたが、基本的な問題は簡単すぎ、サブカルはマニアックすぎると思うので、希望者以外は基本的に生成 AI 関連の問題に挑戦していただけたらと思います。生成 AI をずっと追いかけている方ならライフライン無しで全問正解できるかもしれません。

以上でクイズ・LLM・ビリオネアの大まかな説明は終わります。興味を持っていただけたら、ぜひ遊びに来てください。楽しみにしています！

---

没ネタ

以下では生成 AI なんでも展示会用にいくつか考えたり、実際に作ったけれども残念ながら没になったアイデアを簡単に紹介します。

LLM Liberty

自由の身になった LLM はどんな選択をするのか？

開発環境破壊も許容した少し危険なシステムを作り、サンドボックス上で暴れてもらおうと思ってましたが展示向きでないと判断しプロジェクトを凍結。
Mastra で ollama + MCP の組み合わせが使えるようになったらもう一度トライしてみたい。

https://x.com/gosrum/status/1903260984732684370

LLM 迷路探索

Pixoo 64 というガジェットを買ったので、これを使った面白いものを展示しようと思い作った迷路探索アプリ。

https://x.com/gosrum/status/1906344654167265556

以下に書いている通り、迷路作成+最短経路を求めるアプリは作れたものの、わりと簡単すぎてあまりおもしろくないと判断し没に。

一度通った道を記憶しない場合、LLM が迷路攻略の定石であるいわゆる「左手の法則」に 勝てそうにないことは明白、というのも没にした理由の一つ。

https://x.com/gosrum/status/1913214056603013516

LLM と連携してませんが、一応アプリをデプロイしてるので興味があったら触ってみてください。

https://labyrinth.robustonian.com/

LLM カードじゃんけん

これは実は今回の展示会の第一候補だったのですが、結局フロントエンドを作る前に没にしました。

限定ジャンケン + 鷲巣麻雀的な要素があるゲームを想定していて、

• 自分と相手は、それぞれ 2 種類のじゃんけんカードを 1 枚ずつ配られる（つまり、二人とも二枚のカードを持っている）
• 1 枚のカードは両者から見えて、もう一枚のカードは二人とも見えない or 自分だけ見える ← このあたりのルールは後で決めようと思っていた
• カードを選択し、勝負する。
• この対戦をひたすら繰り返す。

というシンプルかつ戦略が求められる不完全情報ゲームです。

最初は LLM と駆け引きしながら有利な試合展開にするゲームにしようか考えていたのですが、この問題を 10 億回とかプレイすると戦略的に強いものと弱いものが明確になることに気づきました。

https://x.com/gosrum/status/1907812256685109392

これの何が面白いかというと、一見運否天賦だったり、相手を出し抜こうとあれこれ考えて作った戦略よりも、数学的に最適な戦略を取ることで統計的に有利になる（もしくは同程度の勝率になる）ことが期待できるということです。

もし仮に、この種のギャンブルがあったら、最善手を知らないとほぼ負けが確定するゲームになり胴元が儲かり続けるということになります。

あとは、LLM がその最適解を求められるかどうかでその LLM の数学的な能力をある程度推し量れることになります。そしてその評価は上記のような統計値を見れば確認できます。

というわけで、展示会で参加者の方に戦略を聞いてそれを Vibe Coding して他の戦略とバトルさせる。しかしLLM の導き出した戦略には決して勝てない、というのを演出したかったのですが、ちょっと地味すぎるなと思い没にしました。

ただし、LLM の数学的能力を測るベンチマーク問題としては面白いので今後も検討は続けたいと思ってます。

クイズ・LLM・ビリオネアに決めた理由

なんやかんやあって、最終的にクイズ・LLM・ビリオネアに決めたわけですが、理由としては下記のとおりかなと思ってます。

• Vibe Coding を楽しむ会に参加して、ゲームづくりの大変さを思い知った

https://x.com/gosrum/status/1910707953063313506

• このアプリなら、楽しみながら生成 AI について学べると思った

• 興味のある分野の問題を作って、自分が重視するジャンルに関する LLM の性能評価をすることにも使えそうだと思った

それと余談ですが、本当は大学入学共通テストも問題に入れようと思ったのですが、長文や図、数式などが問題にバンバン入ってくるので断念しました。
あと単純に、共通テストを改めて見てみると予想以上に難しい 😇

まとめ

今回の記事では、生成 AI なんでも展示会に向けたアプリ開発の話についてまとめました。

展示会は 2025 年 4 月 26 日(土)です。参加される方はぜひ遊びに来てください！

LLM の得手不得手、ネット検索の必要性、モデルの特性等を考慮して、どのタイミングでどのライフラインを使うかもこのクイズゲームの醍醐味の一つです！

来場者の方が何問正解できるのか、展示会の後で統計情報も共有したいと思います。また、上記の没ネタの話題含め、みなさんとお話できるのを楽しみにしてます 😆

最後まで読んでいただきありがとうございました。次回もぜひよろしくお願いします。