みなさんこんにちはかばたんごです。
なんか気が付いたら寒くなってきましたね、まだPCから発する熱で生きられる時期なので耐えてますが電気代が高くならないといいなと思う今日この頃です。
さてCAINDでは今年の夏から新しくクイズシステムを導入しました。
ちょうどゴールデンCAINDの直前ぐらいの時期ですね
その名も「BLM QUIZ SYSTEM」内部的にはQSと呼んでいます。
CAINDのクイズシステム「BLM QUIZ SYSTEM」（QS）について
導入の背景と目的
- CAIND内部のAIを使ったシステム開発ブームの一環として導入されました。
- 目的は、これまで手動で手間がかかっていた部分をシステム化し、番組の充実度向上と工数削減を図ること。
QS導入前のクイズパネル表示フロー（手動）
従来のフローは非常に面倒かつ非合理的とされていました。
1.回答者（出演者）は専用のGoogleフォームに回答を記入
2.スタッフが手入力でGoogleスライドに反映
3.全員分反映を確認次第配信担当がオープン
特に手入力分の尺が無駄になっていた点は早めにどうにかしたいとは考えていました。
QS開発へ着手
という経緯がありましてQSの開発へ着手しました。
ちなみに着手当初は大喜利ツール（仮）って呼んでました。みんなクイズ企画で大喜利し過ぎですｗｗｗ
開発初期の段階でまず要件定義を行いました。
最初からコードはAIに書かせる気満々だったのでここが人間様のお仕事のなかでは重要なフェーズになってきます。
QSのサーバはCAINDのHPやかばんあじ名義の活動と共通の鯖に乗せたかったので言語的な制約もありました。実際API周りはPHPで書かれてます。
（昔存在していた某Misskeyサーバのときに金銭的に痛い目見たため）
そしてAIに一通りなげつけてそれなりなものができました。
ある程度試行錯誤して、ひとまず動くものができました。
OAで実戦投入へ
そしてゴールデンCAIND直前の7月19日放送回で実戦投入しました。
一旦止まることなく動いてくれて安心はしましたが問題も多く出てきました。
問題点① 文字が小さい
？？？「文字が小さくて読めない！」
という某眼鏡型ルーペのCMみたいなことを言っておりますが
本当に文字が小さくてOA上で読みずらいということが起きておりました。
結果、当該配信回では配信担当側で拡大してもらうという対応をさせてしまいました。
ということで文字サイズを自動でいい感じに調整する機能をのちに実装しました。
また文字の表示に関してものちに細かく調整をしました。
いろいろなパターンを試して、外の4G環境で見ることも想定して低画質での表示もテストした後にこのパターンで行こうと決めました。
・フォント→ FOT-UD角ゴラージ
・配置 →左揃え 中央配置
・文字サイズ → clampとjsで自動調整 js側で三段階踏んでます
問題点② グリッドレイアウトがうまく動作しない
実際あまり番組内で露出する不具合ではなかったのですが裏では表示レイアウトがうまく動作せずに表示が乱れるということが頻発しておりました。
一時、CSSがあまりに複雑になっていた影響もあったとみております。
実際にjsとCSSの構造をシンプルにできたことによって表示バグは限りなく減りました。
そして想定していなかったバグはゴールデンCAIND中でも…
問題点③ 記号が正常に出ない！？
はい、完全に考慮漏れですね
で放送終了後そっこうで修正が入りました
特殊記号には気を付けようという教訓です。
管理者画面の裏側とは
管理者画面はこんな感じになっています。
画面上部には回答開始・締め切り・OBS画面のリセットボタンを備えております。
回答一覧部分では回答の表示・非表示機能を設けており、必要に応じて１人の回答にフォーカスするといったことができたり
正解・不正解に応じてパネルの背景色を変える機能を設けております。
また、スタッフからの要望により回答受信時に効果音がなる機能も直近のOAから追加されてます。
まとめ
マジでシステム化できるとこはしたほうが楽できるし、企画の幅が広がるからやってみるといいよ！
以上かばたでした。
P.S
だいたいCAINDギジュツのハナシを書くときはカフェでSurfaceをカタカタしてます。
今回はスタバの梨のフラペチーノを飲みながら書きましたおいしかったです。
コメント