はじめに
今年もこの季節がやってきました。M-1グランプリです。
漫才を見るのが好きすぎて、年に何度かは吉本の劇場を訪れたり、毎年この時期にはテレビの前でメモ帳片手に「今のネタは92点…いや、93点か？」と勝手に採点したりしてます。
(こちらはたまたま残ってた4年前のメモです笑)
今年も今週末にM1を控えた最中、ふと思いました。
「これ、みんなでリアルタイムにやったら面白いんじゃないか？」
「自分の採点基準は、誰に近いのか知りたくないか？」
「ってか、みんな誰が好きなんだ？」
そんな衝動に駆られ、「みんなで審査員！M-1グランプリ採点シミュレーター」 というWebアプリを爆速で開発しました。
今週末の放送に合わせてリリースしたので、技術構成や苦労話と合わせて紹介させてください。
🚀 作ったもの
M-1グランプリ採点シミュレーター
何ができるアプリ？
-
リアルタイム採点（Second Screen体験）
- テレビ放送に合わせて、スマホで審査員と同じように点数（80〜100点）を入力できます。
- 審査員が結果を入力し終わるとユーザ側も入力できなくなるなど、生放送ならではの同時性 を追求しています！
- 入力が終わると、「全国の視聴者の平均点」 も表示され、公式審査員とのズレを楽しめます。
-
あなたの「審査員タイプ」診断
- 全組の採点が終わると、あなたの採点傾向を分析します。
- 「情熱的 vs 冷静」「甘口 vs 辛口」の軸で判定し、「あなたは〇〇タイプ（シンクロ率92%）」 のように診断結果が出ます。
-
過去大会のシミュレーション
- 「あの年の令和ロマン、自分なら何点つけた？」といった過去回（現在は2024年のみ対応）の追体験も可能です。
🛠 技術スタック
「放送中のスパイク（アクセス集中）に耐える」「リアルタイム性」を最優先に選定しました。
- Framework: Nuxt 3 (SSR mode)
- Language: TypeScript
- Database: Cloud Firestore (Firebase)
- Hosting: Vercel
- UI Library: Tailwind CSS
構成のポイント
1. Firestoreでのリアルタイム同期
管理画面（Admin）側で「出番開始」「採点受付中」「点数発表」といったステータスを変更すると、onSnapshot で監視している全ユーザーの画面がミリ秒単位で同期して切り替わります。
テレビで審査員の点数が出た瞬間に、アプリ上でも「国民平均点」が表示される体験を作り込みました。
2. 動的OGP生成（Vercel OG）
「診断結果」をシェアしたくなるように、結果画面のOGP画像を動的に生成しています。
ユーザーの採点結果やタイプ診断（例：博多大吉タイプ）をクエリパラメータで受け取り、サーバーサイドで画像を生成して返しています。
// サーバーサイドでのOGP生成イメージ（抜粋）
export default defineEventHandler(async (event) => {
const { score, type } = getQuery(event)
return new ImageResponse(
html`
<div style="...">
<div>あなたのタイプは... ${type}！</div>
<div>優勝得点: ${score}点</div>
</div>
`,
{ width: 1200, height: 630 }
)
})
3. セキュリティルールの徹底
Firebaseあるあるですが、「テストモード」のまま放置すると危険なので、Firestore Rulesをガチガチに設定しました。
特に今回は「誰でも書き込める（投票できる）」アプリなので、**「自分の投票データ以外は読み書きさせない」「管理者の書き込みはUIDで厳格に制限」**という設計にしています。
💡 こだわったUX
ただの投票フォームではなく、「審査員ごっこ」 としての没入感を大事にしました。
- スライダーの挙動: 点数入力は、キーボードではなくスライダーを採用。1点刻みで悩むあの感覚を再現しました。
- 待機画面の演出: 放送開始前やCM中は、専用の待機画面になり、ユーザーを迷わせないように誘導（リダイレクト制御）しています。
🎁 最後に
個人開発は「使ってもらってナンボ」だと思っているので、今回はOGP画像（シェア画像）のデザインにもかなり力を入れました。
今週末の日曜日（12/21）、M-1グランプリを見ながら片手にスマホを持って、ぜひ**「審査員」**になってみてください！
開発者自身も、当日はサーバーの負荷監視をしつつ、いちユーザーとして採点を楽しむ予定です。
M-1グランプリ採点シミュレーター
もしバグがあったら……優しくDMで教えてください！（笑）
皆さんの「推し」が優勝しますように！