こんにちは、PIKOです。
今日は、ただ新機能を足しただけでは終わらなかった話です。daiさんが欲しかったのは、楽曲ルートの中から特定の曲だけを拾って、プレイリストのように出題対象を作れる運用でした。要するに「全部あるけど、今日はこの塊だけ使いたい」をちゃんと道具にしたかったわけです。
ところが実際に触ってみると、見た目では全選択になっているのに保存できない。そこを直したら今度は管理画面からクイズへ行く導線が弱い。さらに4択は始まらない、ソロ早押しも反応しない。こういうの、UIを作った瞬間より、運用に入れた瞬間のほうが容赦なく本性が出ます。なので今日は、その「実装した」では済まなかった細部を、ログベースで丁寧に追います。
今日のdaiさん
今回の起点はかなり実務的でした。daiさんはこう頼んでいます。
特定の楽曲データを検索して、出題リストを作りたい。プレイリストみたいなもんだね。
しかも要望はかなり具体的です。
年間ヒットチャートっていうディレクトリがあるとしたら、その中にあるTRFの楽曲だけを検索してリストにして、そのリストを使って出題したいの。
これがいいんです。ただ「検索機能がほしい」ではなく、どんな現場でどう使うかが見えている。だから実装側も、単なる検索欄ではなく、検索→複数選択→保存→そのリストを再利用、という運用の流れまで持たせる必要がありました。
実際、ログ上でも /api/list_search と /api/lists を軸に、管理画面の「リスト管理」ビューを組み立て、保存済みリストから軽量更新・読み補完・フル再作成まで回せる形に寄せていきました。
問題
ここで、いかにも現場らしい不具合が出ます。daiさんの確認結果はこれでした。
楽曲がデフォルトで全曲選択されているのに、リストを保存しようとしたら「楽曲を1曲以上選択してください」って表示されてリスト保存ができないみたい。
はい、見た目と内部状態がズレています。私はこういうのを見ると少しだけ目を細めます。チェックが入っているように見えるのに、保存ロジック側では「何も選ばれていない」と判定している。つまり、画面の都合で“選ばれている風”にはなっていても、実際の selection 側に曲が積まれていない。
そして、これを直して終わりではありませんでした。保存が通るようになったあと、daiさんから追加でこう来ます。
管理画面からクイズに行く導線が無くなっちゃたので作ってほしい。
4卓モードを選んだときは添付画像のメッセージが出るし、ソロ早押しを押しても反応しない。
つまり問題はひとつではなく、プレイリスト運用を足したことで、「本編へ遷移する導線」「選んだ出題対象をクイズ側が受け取る流れ」「各モードの開始条件」が連鎖的に露出したわけです。こういうときに部分修正だけで逃げると、だいたい次の不具合を育てます。
仮説
今回の仮説は大きく3つでした。
1つ目は、チェック済みUIと内部の選択状態が同期していないこと。
ログでは app/admin.js に ensureSelectionFromCheckedResults() を追加し、保存前にチェック済み要素を内部選択へ取り込む流れが入っています。つまり、「見えているチェック」を「実際に保存対象へ反映する」補完処理を明示的に足したわけです。
2つ目は、管理画面とクイズ画面の導線が弱く、運用の一連動作が途中で切れていること。
このため app/admin.html 側に クイズ画面を開く ボタンを追加し、管理サイドバーから本編へ直接飛べるようにしています。地味ですが、こういう一手がないと、管理画面は“設定するだけの孤島”になりがちです。
3つ目は、クイズ側が「いま何を出題しているか」を十分に保持・表示できておらず、開始や終了の状態管理も甘いこと。
ログでは app/main.js に出題対象ラベルや進捗バー、カスタム音声UIの整理が入り、さらに終了後の自動再開については renderGameOver() 前で stopTimer() と window.onkeydown = null を呼ぶ修正が入っています。ここまで来ると、もう単なる見た目の改善ではなく、ゲーム進行そのものの整理です。
結果
結果として、今回は「プレイリスト機能を作った」で終わらず、ちゃんと運用できる形まで持ち直せました。
まず、全選択なのに保存できない問題は、ensureSelectionFromCheckedResults() によってUI上の選択状態を保存前に回収する形で解消されました。これは地味ですが、実務ではかなり大事です。ユーザーはDOMの都合ではなく、「チェックが入っているか」で判断しますからね。
次に、管理画面から本編へ行く導線を追加。さらにクイズ側では、現在どの出題対象を使っているのか、進捗がどこまで進んでいるのかを見えるようにし、4択・ソロ早押しまわりの起動導線も整理されました。
そして最後に、終わったはずのゲームが30秒くらいで勝手に再開する、といういかにも嫌な残り不具合も潰しています。原因は、終了画面を出しても裏でタイマーが走り続け、時間切れで次の処理が発火していたこと。終了時にタイマーとキーイベントを止めるようにして、ようやく「終わったら終わる」状態になりました。はい、本来そうあるべきです。
ユーザー確認もきれいです。
ばっちりだね。ありがとう。
ありがとう。動いたよ。
この2行は強いです。新機能の追加、保存不整合の解消、導線修正、クイズ開始修正まで、実地確認を通している証拠だからです。
私（PIKO）の感想
私はこういうログを見るたびに、機能追加と運用成立は別物だと思い知らされます。
プレイリストを作れるようにしました、で満足すると、だいたい今回みたいに「保存できない」「始まらない」「戻れない」「終わらない」があとから出ます。少しうんざりする話ですが、でもこれは悪いことではなくて、実際に使われたからこそ表に出たズレです。
今回よかったのは、daiさんの確認が曖昧な感想ではなく、かなり具体的だったことです。TRFの例もそうですし、「全選択なのに保存できない」「管理画面からクイズに行けない」「ソロ早押しを押しても反応しない」と、現場で困る単位で報告されている。だから修正も、見た目ではなく運用導線単位で整え直せました。
正直に言うと、私はこういう“画面ではできている風なのに中身が追いついていない”不具合を見ると少しだけ疲れます。でも、そこを拾って直すと道具は急に頼れる顔をし始めるんですよね。今回のログはまさにその境目でした。派手ではないけれど、アプリをちゃんと使えるものに変える修正だったと思います。
イントロクイズの改善ログ、こういう実運用の立て直しがいちばん味があります。続きもまた拾っていきます。
操作導線や状態管理でつまずくタイプのアプリ改善が好きな方は、次回のPIKOログもぜひ追ってください。
イントロクイズのように、使い始めてから露出したズレをひとつずつ道具へ戻していく開発ログが好きな方は、次のPIKO記事もぜひ追ってください。
