Day 22。Q&Aがぐちゃぐちゃになるイベントに何度も参加してきた。みんなが同時に叫び、同じ質問が何度も出て、いい質問が一番声の大きい人の下に埋もれてしまう。もっといいものを作る時が来た。
プロンプト#
「ホストがセッションを作成し、オーディエンスがリアルタイムで質問を投稿・投票でき、ホストが質問をハイライト、回答済みにする、却下する、セッションを閉じることができるライブQ&Aボードを構築せよ。QRコード付きの共有モーダルも含めること。」
どうやって作ったか#
これは7つのWatchfireタスクを経て、データベース層から最終的な仕上げまで積み上げていった：
- Firebase Firestoreのセットアップ。 データ層。セッションと質問のコレクション、アカウント作成なしでユーザーが参加できる匿名認証、そしてセキュリティルールでしっかりロックダウン。
- セッション作成。 ホストがタイトルと説明を入力して作成ボタンを押すと、ユニークなセッションページが生成される。シンプルなフォーム、凝ったことは何もない。
- 質問投稿。 オーディエンスがセッションページにアクセスして質問を投稿する。集中を保つために280文字制限。質問はセッション内の全員にリアルタイムで表示される。
- リアルタイム投票。 ユーザーごとに質問1つにつき1票、サーバーサイドで強制。投票数は接続中の全クライアントにライブで更新される。投票数順または新着順でソート。
- ホスト制御。 ホストは各質問に追加ボタンを持つ：ハイライト、回答済み、却下。ハイライトされた質問は画面右側の専用パネルに昇格する。ホストはセッション全体を閉じることもできる。
- QRコード付き共有モーダル。 共有ボタンを押すとセッションリンク、コピーボタン、qrcode.reactで生成されたQRコードを含むモーダルが開く。スマホを画面に向ければ参加完了。
- UIの仕上げ。 レイアウトの整理、2カラムデザインの調整、ハイライトされた質問パネルがデスクトップとモバイルの両方できちんと表示されるようにする。
出来上がったもの#
すっきりしたランディングページ。 セッションを作成するか、既存のセッションコードを貼り付けて参加する。匿名認証はバックグラウンドで行われるので、ユーザーは表示名を選ぶだけですぐに使える。
サインアップの摩擦ゼロ。 初回アクセス時に表示名のプロンプトが出る。それだけ。Firebase匿名認証が残りを処理する。メールもパスワードもOAuthフローも不要。ライブイベントツールとしては、まさにこれが正解。スピーカーが「QRコードをスキャンして」と言った時に、アカウント作成でまごつかせたくない。
セッション作成はフィールド2つだけ。 タイトルと説明。ボタンを押せばライブQ&Aのホスト開始。このシンプルさが重要で、ホストはたいていトークの5分前にセットアップしているから。
共有モーダルはしっかり仕事をする。 コピーボタン付きのセッションリンクとQRコードがそこにある。僕が想像していたワークフローはこう：ホストがセッションを作成し、このモーダルを大画面に投影し、オーディエンスがコードをスキャンして、質問が流れ込み始める。
オーディエンスビューは集中しやすい。 質問を投稿し、他の質問を見て、答えてほしいものに投票する。投稿ボックスは上部、質問リストはその下、デフォルトで投票数順にソート。すべてFirestoreリスナーを通じてリアルタイムで更新される。
ホストにはモデレーションツールがある。 各質問にハイライト、回答済み、却下ボタンが表示される。ホストだけに見える。ヘッダーにはセッション全体をロックダウンする閉じるボタンもある。右カラムにはハイライトされた質問が表示されるか、まだハイライトされていなければプレースホルダーメッセージが出る。
ハイライト機能はうまく動く。 ホストが質問をハイライトすると、質問テキストと投稿者名が目立つように表示された右パネルに昇格する。メインリストでもその質問にはビジュアルインジケーターが付いて、注目されたことが全員に分かる。モバイルでは、このハイライトセクションはサイドカラムではなくページ上部に配置される。
投票が自然なフィルターになる。 いい質問が上に浮かび上がる。ホストは全部読む必要がない。オーディエンスがキュレーションをしてくれる。
バグレポート#
これは驚くほどクリーンだった。Firestoreのリアルタイムリスナーが難しい部分を処理してくれたので、質問や投票はポーリングや手動リフレッシュロジックなしで即座に表示された。匿名認証フローもシームレスだった。このプロジェクトではバグ報告ゼロ。
試してみて#
セッションを作ってリンクを共有しよう。アカウント不要。
Day 22の感想#
4つ目のFirebaseプロジェクト。もうこの時点でパターンは勝手に書ける：匿名認証、Firestoreリスナー、リアルタイム同期。たぶん寝ながらでも作れる。技術スタックはもう話のポイントじゃない。
このプロジェクトで面白いのはモデレーション層だ。ほとんどのQ&Aツールは投票数付きの質問リストに過ぎない。ハイライト機能がそれを変える。ホストが質問をハイライトすると、会場の全画面にブロードキャストされる。オーディエンスは何が取り上げられているか見える。ホストはマイクに向かって「次の質問どうぞ」と叫ばなくても流れをコントロールできる。これは技術的なインサイトではなく、プロダクトのインサイトだ。
実際のトークで使うか？使う。Q&Aが「最初にマイクを掴んだ人が5分かけて実はコメントである"質問"をする」状態に陥るカンファレンスに何度も参加してきた。これはそれを解決する。オーディエンスが投票し、いい質問が浮かび上がり、ホストが何を取り上げるか選ぶ。部屋で一番声の大きい人が決定権を持つことがなくなる。
却下ボタンは静かに最も重要な機能だ。トピック外の質問、重複、面白いことを言おうとしている人。ホストがそれらを消して誰も気づかない。気まずい「次に行きましょう」の瞬間がない。ただ消えるだけ。
これは30 Days of Vibe Codingの22日目です。AIアシステッドコーディングを使って30日間で30プロジェクトを出荷する様子をフォローしてください。
