仕事上で仕方なく参加型クイズシステムを作ってみた
どんなお話?
そもそもAIでなにができるのん?と懐疑的だった状態からAIに聞いて解答する形式にしたら工数が削減できたぞ!というところに気がついたある日。
会社の上層部から急に「TV局主催のイベントに出るから何か企画考えて!」となぜか情シス部門に無茶振りが来たのがきっかけ。(なお弊社情シスの所属がなぜか営業企画部門という実情もありますが……)
参加型のクイズシステムなら通りすがりでも楽しんでもらえるだろーと安易な気持ちで「制御コンソールを用意し、問題は別画面に表示して、スマホで回答」のシステムを気がついたらAI駆動開発でやっていたというお話です。
このお話を書いた人の素性
もともとプログラマでこの業界に入ってきたということもあり、基本「自力で調べて自分で書く」習慣が骨の髄までしみこんでいる状況でした。
10歳からBASIC→アセンブラ→(ここから業務系)COBOL→C→Java→ObjectPascal→Perl→PHP→Pythonと約40年かけて来て、それなりに食っていけるレベルにはあったわけですから、簡単に習慣が変わるものでもないのはご理解いただけるところかと思います。
(40歳になるまで診断が付かなかったのも問題だとは思うんですが)病的なレベルでADHDとASD併発なので、基本的に周りとコミュニケーションは無理。そういった関係で何をするにも一人でどうにかしてきた(というかどうにかしないと前に進めない)状況であることを付け加えておきます。
そういった状況もあり。
自分の情報収集アンテナ感度がとても悪い(もしくは指向性が高すぎて範囲が狭い)ということもあり、世の中の実情について行けていなかったんですね。
部署の後輩がAIで楽をしている?
一般的に企業の情報システム部門といいますと、
- 社内システムの導入/運用/保守
- 基幹システム
- Web系システム
- SaaS等の外部システムとその連携
- 社内情報インフラの導入/整備/運用
- 通信回線
- VPN回線
- 社内LAN側ネットワーク
- 社内情報機器の導入/運用/保守
- 定期的な情報機器リプレースや新規導入
- 機器セキュリティもこの範囲
- 上記の障害対応
- この範囲が意外に広いので大変な部署と思われがち
といった多義に渡るものなのはご存じの通りですが、特に管理系に回ってもらっている後輩の作業速度がある日を境に極端に早くなった印象を持っていました。
聞くと「AIにぶん投げて対応してます」とのこと。
確かに精度も内容も良くなっていてその点については申し分無いし、むしろ管理系無理な自分からしたらそこを持ってもらえてるだけでもありがたい話なんですが。
それにしてもAI……???
AIを使用した既存PGの修正
世の中便利になりましてAIというものが世に出てきたというのはニュース等で聞いていたものの、あくまで自然言語のお話の中の文脈だろうと思っていたし、先の例で自然文で聞いて回答をさせている後輩の例も見ているので、そういう使い方が主なのかしらと思い込んでいました。
ところが、どうもソースコードをぶん投げると悪い場所を見つけてくれるっぽい。
そうと分かれば実践あるのみです。
今いる会社のWeb周りが10年前の開発で止まってしまっている状況(素のPHP+せいぜい使ってjQuery)のため、何もしなくてもソースは読めるし、修正箇所もだいたい目星が付く状態なのは困らないものの、数が膨大すぎてSE一人で対応しきれない状況になっていました。
(のちになぜに膨大になっているかとかそういうカラクリとそこに至る思想が分かってくるわけですが、これは別の話題。本件以外にもおなじ様なことをしているベンダーは、ここの知る限りなぜか中部圏資本が多いようなのでみなさんで燃やさないといけません。)
ところが道具があればこっちのもんです。
AIにぶん投げて挙動解析がある程度簡単にできるようになったおかげで、ブラックボックス(というか担当ベンダーが契約に反して仕様をオープンしない状態)になっている挙動不審な部分を自力修正してまともに動く状態にし続ける作業が始まっていくわけです。現場は大喜びしますが、業務負担がなかなかデカいことになるハメに。
この頃使っていたプロンプトはだいたい1問1答形式の簡単なもの。
「選択したこの部分、何してる?」「このロジック、問題無く動く?動かない?」とか「この記述方式、正しい?」と先に例示を用意してしれに回答させる形式が多かったと思います。
たまに「今何問目?」を聞いていたのはご愛敬。(だいたい間違えるところまででセットです)
「AI駆動開発」というらしい手法
というわけで、修正案件に絶大な効果をもたらしたAI。
やり方次第ではAIがある程度コード書いてくれるってことに気がつきました。
モノは試しと、既存で分裂しまくっているWebの「問い合わせフォーム」を1つにまとめるべくAIで作らせたらどうなるのかという実験をはじめてみるわけです。
自分が知っている言語だとこちらから手が入れられてしまうので、できるだけ知らない言語でできるだけAIに書かせるという事を企ててみました。(この例ではPython Djangoで構築)
結果から言うと、おおよそ9割正解を出してきている印象。
さすがにそのままの状態で使えるかというとまあ使えるレベルなんですが、少し心許ないというレベル感でした。
ここまでやってみたところで、VRChatの技術者コミュニティの方に話してみると、どうやらこれが「AI駆動開発」というモノらしい。
結果、知らずにやってたという状況になっていたのでした。
突然の鶴の一声「イベント出るよー」
直したフォームをいつリリースします?と現場に確認しているときに、「TV局主催のイベントに出るから何か企画考えて!」との話が降ってきました。
聞くと、よくあるTV局主催のお祭り系イベントの1ブースを取ってきたとのこと。
- 200インチモニタを背負って
- ステージ付きで
- がんばれば200人くらい集められて
- しかもカメラも入る
というなかなか大きな話で、営業企画の担当者もやったことがないレベルのもの。
カンのいい方ならお気づきかと思いますが、先の要件を満たす既存のテレビ番組がございます。
TBS系列「オールスター感謝祭」ですね。
じゃあこれをできるようなWebアプリがあれば解決だね、ということで大枠だけ先に作ってみることに。
しかも例によって「自分の知らない言語」で「できるだけAIに書かせる」もやらせてみました。
初期状態でどの言語で書くといい?と聞くとReactがいい!とAIが言うのでその通りにしてみました。
なお、Reactの経験など一切ございません。
仕様が決まっていると比較的作りやすい
この例ではターゲットとなる仕様がおおよそ決まっているモノですから、プロトタイプまでたどり着くのはもう爆速で2日(時間で考えると1人日)でおおよそのものができあがります。
AIに渡すプロンプトも画像が渡せるような状態に進化してますから、実際の出題画面や正解表示画面をみせつつ、これが欲しいという言い方に進化し、
「まずは添付画像をごらんください。
これは、今回必要な4択文書問題の表示例です。
この画面レイアウトをできるだけ忠実に守った上でデザインを入れてください」
という、どこかで聞いたようなプロンプト文章になってきています。
(もちろん詳細についても書き加えていますがここでは割愛)
この例のような画像から持ってこいパターンですと正解率60%くらいの印象ですが、デザイン部分はテンプレートなのでCSSくらいはこちらで書けば解決しますし、何より型を先に持ってこれる事による時短効果がデカい。
ここまででできたものはこちら。(画像は開発中のものです)



あまりに先進的なことをしようとするとハマりがち
ここまでですと、「管理画面と出題画面を用意し、それぞれが制御できていればOK」であれば何の問題も無いんですが、実際の「オールスター感謝祭」では「お手元のキーパッド」というものが存在します。
このキーパッドも当初はSCSI接続?のゴツいI/Fだったり(SCSI接続でないと1台壊れたらシステム全滅が説明付かない)、ある日突然6ボタン仕様になっていたり、最近ではタッチパッド対応までしているようです。1991年から考えると30年近く経っているわけですから進化しないと困りますね。
さすがに同じものを200台用意するのは無理がありますし、1イベントに書けていい予算を簡単に超過するので、「お手元のスマホ」で代用しようという方向にシフトしました。
おおよその画面構成はこんな感じ

考え方の道筋は間違ってないと思うんですが、これを実装するとなると同期処理どうするんだとか、様々な問題が発生してきます。
実務上ですとWebSocketで対応することになるんですが、今回のような厳密な要件になるとそこまで耐えられるものでもなく、またAI側に対処を聞いたところで実例が少なすぎる(表に出ているドキュメントがない)と、AIとはいえ回答を返せなくなってしまうのも事実。
結局、テスト環境単体では解決できない問題になってきました。
さて、どうしましょう……??
結局知識はどうやったって必要
解決方法として、CloudflareのD1、R2、Durable Object、Workersを持ってきて、同期部分について任せることにしました。
この部分は作る側に知識が無いといつまで経っても対処法が出ない。
AIの得意分野は「明確に対象が分かっているときに、その解決方法をもってくる」ですから、その対象を用意するのは使う側の責任かなと思います。
ただこの辺を漠然とどうしようとAIに聞いたところで的確な回答が返ってくるわけでもなく、特にインフラ部分は物理も絡む部分ですから、AI単体でどうにかすることもできません。
使う側にインフラなりの知識があって、適切に持ってこれる状態でないとダメなんだぁと実感しました。
ちなみにこれだけ用意したおかげで、
- 問題はD1から取得
- 出題に使用する画像や動画、効果音やBGMはR2から取得
- 同期処理はDurable Objectで実施
- 管理画面、出題画面、回答スマホ画面はWorkerでサーバレス運用
が実現でき、システムの見通しも良くなりました。
ところで
実際に社内プレゼンしたところ使えるとの評価になったので、ある程度の手直しを入れて運用に回す予定です。
ところで、オールスター感謝祭はTBS系の番組ですが、弊社が出展するイベントはフジ系列なんですよね。
これって問題になる?ならない??
Discussion