スコアボード
リフリップ式スコアボードで試合やゲームをリアルタイム採点
スコアボードとは？
スコアボードは、スポーツイベントやゲームで得点を記録するための専用ツールです。このオンラインスコアボードは、実際のメカニカルリフリップ式スコアボードの外観とフリップアニメーションを再現し、卓球、バドミントン、バスケットボール、ボードゲーム、クイズナイトなどに没入感のある採点体験を提供します。
レッドブルー、レッドイエローなど複数のカラーテーマを搭載、最大6チームまで対応し、大画面への投影に対応したフルスクリーンモードを備えています。すべてのデータはブラウザのローカルストレージに自動保存されます。
使い方
使い方
- カラースキームを選択します：赤-青、赤-黄など
- チーム名をクリックして編集します
- + / - ボタンでスコアを調整します
- フルスクリーンボタンで大画面に投影します
表示のヒント
- イベント開始前にフルスクリーンモードにして、名前・色・スコアが客席から読み取れるか確認しましょう。
- スコアが公式記録として重要な場合は、タブの閉鎖やローカルストレージの消去に備え、紙や別システムにも控えを残してください。
利用シーン
仕組み
スコアボードはクライアント側の小さな状態機械として動作します。各チームは名前、スコア、色のフィールドを持つオブジェクトで、ロースター全体はすべての変更時にJSON文字列としてwindow.localStorageに永続化されます。localStorageは同期的でオリジンとブラウザプロファイルにスコープされるため、同じタブはリフレッシュ後も生存しますが、異なるブラウザやプライベートモードのウィンドウでは空のロースターから開始します。 フリップ式ディジットアニメーションは純粋なCSSで実装されています。各ディジットはX軸周りに回転する2つの半分で構成され、スコア変更時に表示ディジットを切り替えながら300〜400msのtransform: rotateXトランジションでフラップをアニメーションします。アニメーションはネットワークフレームではなくローカルステートで駆動されるため、会場のWi-Fiが試合中に切断されても表示はアニメーションし続けます。フルスクリーン表示は標準のFullscreen API（element.requestFullscreen、document.exitFullscreen）を使用し、ブラウザのUIなしでプロジェクターやTVにボードを表示します。 マルチタブ同期はstorageイベントに便乗しています。あるタブでlocalStorageのキーが変更されると、同じオリジンの他のすべてのタブがStorageEventを受信し、更新されたJSONから再レンダリングします。これにより、データがデバイスから外に出ることなく、審判のスマートフォンとコートサイドのノートPCをバックエンドなしで同期させることができます。
- ステート永続化: スコア変更ごとにJSON.stringifyしたロースターをwindow.localStorage.setItemで保存。オリジンとブラウザプロファイルごとにスコープ
- フリップアニメーション: CSS疑似要素2つを約300〜400msのtransform: rotateXでアニメーション。JSアニメーションループは不要
- Fullscreen API: element.requestFullscreen() / document.exitFullscreen()。fullscreenchangeイベントでEscキーによる終了を追跡
- マルチタブ同期: window.addEventListener('storage', handler)でキー変更時に他のすべてのタブで発火
- スコアの下限: スコアはゼロでクランプされるため、カジュアルプレイ中にマイナスボタンで負の値にはなりません
- カラーテーマ: CSSカスタムプロパティ（--team-a、--team-b）でDOMツリーを再描画せずにパレットを切替
- スコア上限は採用中のルールセットに従います。例: バスケットボールに上限なし、卓球は11点でデュースは2点差ルール
使用例
バスケットボールのハーフタイム表示
チーム A: Lakers カラー: 赤
チーム B: Celtics カラー: 青
Q1: 22 - 18
Q2: 41 - 38 (ハーフタイム)
Q3: 60 - 55
Q4 最終: 82 - 76
テーマ: 赤青、体育館のプロジェクターでフルスクリーン表示テニスのセット別スコア
セット1: 6 - 4 (プレイヤー A 勝ち)
セット2: 3 - 6 (プレイヤー B 勝ち)
セット3: 7 - 5 (プレイヤー A 勝ち)
最終: プレイヤー A が 2-1 で勝利
ヒント: チーム名を選手名に変更し、試合間でリセットクイズ大会・4チーム形式
ラウンド1: Team Quokka 8, Team Otter 6, Team Bear 7, Team Wolf 5
ラウンド2: 14, 13, 12, 10
ラウンド3: 21, 22, 17, 16
最終: 30, 31, 25, 23 -> Otter の勝ち
最大6チームに対応、スコアは localStorage に保存卓球 11 点ゲーム
スコア推移: 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
10-10 でデュース: 2点差で勝利
最終: 12 - 10
テーマ: 赤黄のハイコントラストで大画面視認性を向上
スコアリセット時もプレイヤー名は次のゲームに引き継がれるよくある質問
どのスポーツに合いますか？
もとは卓球やバドミントンのフリップ式スコア表示（瞬時に切り替わる大きな太字数字）向けに設計されました。ボードゲーム、クイズ大会、バスケットボール、バレーボール、e スポーツトーナメント、教室での競技など、素早くスコアを更新する用途全般で使えます。
チーム名や色をカスタマイズできますか？
はい。チーム名はクリックして直接編集できます。プリセットのカラーテーマ（赤×青、赤×黄など）からイベントに合わせて選べます。ロゴや画像のアップロード機能はありません。
フリップアニメーションはどのように動作しますか？
機械式のフリップカードを模した CSS の 3D 変形アニメーションです。フリップ時間は短く（数百ミリ秒）、素早い得点更新を妨げません。即時更新を好む場合は設定からアニメーションを無効化できます。
更新してもスコアは保存されますか？
はい。現在の構成（チーム名、スコア、色）は変更のたびに localStorage に保存されるため、同じブラウザでの再読み込みではスコアが保持されます。ブラウザを切り替えたりサイトデータを消去すると 0-0 にリセットされます。
プロジェクターや大型画面で使えますか？
はい。フルスクリーンモードに対応しているため、プロジェクター、TV、外部モニターに表示できます。スコアは localStorage に保存され、同じブラウザ内であればページの再読み込み後も残ります。
セット／ゲームスコア（テニスなど）に対応していますか？
一部のバージョンでは「N セット先取」の構造を定義し、各セット終了時にポイントカウントをリセットできます。シンプルなビルドは生のポイントしか追跡しません。スポーツに合うモードを選んでください。
アップロードされるものはありますか？
いいえ。スコアボードは完全にブラウザ内で動作します。スコアはタブ内と（任意で）localStorage に保存され、サーバーと共有されることはありません。