はじめに
いにしえのCOBOLコーダーが気がついたらCloudflare Worker & Pagesで常設できるイベント用参加型クイズアプリをAIバイブコーディングで無理矢理作って運用まで持って行った、というお話です。
時間は無いが、どうにかしないといけない
例によって教育事業に携わる弊社関連ではあるのですが、役員より「TV局主催のイベントに300万のブース取ったから企画なんとかして」との無茶振りが突然降ってきたのは9月の終わりくらい。
なお、そのブースには備え付けの200インチスクリーンが常備されているって言うんだからさあ大変。
加えてイベントは11月最終週の土日という。
さて、これどうやってやっつけましょうかねというのがスタートラインです。
へいらっしゃい、何作りやしょ
よくよくイベントの内容を聞きますと、
- 200インチスクリーンは音響込みで自由に使って良い
- イベント来場者はハイエイジ（ウチの文脈では小学生以上を指します）が多い
- 過去はある程度お客さんを足止めして行うイベント的なものを実施している
- 幕間には別企画を持ってくるので、イベント的な部分をどうにかしたい
- ついでに来場者アンケートをスマホに仕込みたい
- 当日は特番が組まれており、カズレーザーが来訪してブース紹介される
という。
カズレーザー・スマホ・スクリーンときて、スポットの参加型企画となれば、やることは1つ。
イベント用参加型クイズアプリを作るしかないですね。
タイミングよく教務部門から以前に使ったサンプル問題も届きましたし、4択早押し的なモノを用意したらそれなりにウケるよねと。
10秒カウントダウンの間に回答を送信してもらって、選択肢毎に解答者数を集計表示して正解表示。問題毎に一番遅かった人が予選落ち。ピリオドの勝者は正解数が多く、解答時間が一番短い人あたりにしておけばいいでしょう。
似たようなシステムはどこかのテレビ局でやってますし、ちょうどTV局主催のイベントです。
加えてご承知の通り、カズレーザーは同じようなクイズシステムを使っている視聴者参加型の何とか感謝祭の司会をやったこともありますし、ちょうどいいでしょう。
しかもなぜか効果音はすでに手元に原盤からオリジナル音源を揃えてあります。
Webアプリの作成はほとんどやったことがない
とはいえ、自分のスキルと言えば簡単なWebフォームくらいは自力で作れるにせよ、リアルタイムで解答集計なんてのはやったことがないというのが実情。
こうなると誰かに助けを求めないといけないんですが、こんな訳の分からない特急案件を引き受けるベンダーはなかなかいません。（いてたまるか）
自分で作るかぁ、となったのが10月の頭頃の話。
最近AIさんもなかなかやるようになっていると聞きますし、いっそ自社開発というかたちに持って行くのが最善手と相成りました。
ほぼフルでAI駆動開発
試作品をいくつか作りつつどんなものがほしいのか仕様を詰めていった結果、どうやらCloudflare Worker & PagesとDurable Objectsを使うと出題側とクライアントを同期させる動作がしやすいと分かってきました。
ここまでもAI頼みではあったんですが、方針が定まれば走りやすくなるので、AIに食わせる用の仕様書をまとめて書いて、後はClaude Codeでバックエンドから順に作成していくことになります。
問題形式も「文字のみ」「出題画像付き」「選択肢画像付き」の2～6者択ｎ、考慮時間も可変できるようにする等、いろいろ仕様追加していったのですが、Claude Codeではまあまあ追いついてきます。
平行してCopilotやcursolも使っていたのですが、いまいち追いつけないとか、勘違いが増えてきた気がしてます。
最終形態
結果としてクイズシステムとしては以下構成で構築できました。
- TypeScript（フロントエンド・バックエンドとも）
- Cloudflare D1 SQL（問題DB）
- CloudFlare R2 オブジェクトストレージ（画像・音源）
- Cloudflare Workers & Pages（Webアプリのベース）
- Cloudflare Durable Object（同期処理）
当初の「来場者アンケート」部分は並行してPython Djangoで書いていたので、別構築（URLリンクのみ）に。
運用と後日談
できてしまえばそこまで不安視するものでもないので当日運用し、まあまあ高評価をいただいたとともに、目的のアンケートもうまいこと回収できたんですが。
ただ一言苦言があったとすれば、今回のイベント主催TV局がフジテレビ系列だったということでしょうか。
次回
すでに来年には次のイベント参加が決まっておりまして、そちらではスロット抽選機を作ってほしいとの話が上がってきてます。
スロットとなりますとさあみんなで考えようとなりますが、なに作りましょうかね。