配信オーバーレイ用カウンター

配信中の勝敗と連勝数をボタンで数え、その結果を透過背景のオーバーレイ画面に反映させるツールです。操作用の画面と表示用の画面がURLで分かれていて、表示側のURLをOBSの「ブラウザ」ソースに設定すると、配信画面の隅に戦績パネルだけが載ります。ランクマッチの配信で「今日は何勝何敗でしたっけ」と聞かれるたびに手が止まる、あの状態をなくすために作りました。

こんなときに使う

• ランクマッチやカスタムマッチの配信で、その日の戦績をリスナーに見せ続けたいとき
• 連勝が続いていることを画面上で盛り上げたいとき（2連勝からバッジが出ます）
• 大会配信で、チーム名と勝敗だけのシンプルなスコアパネルが欲しいとき
• 画像編集ソフトでスコア画像を作り直す手間を、ボタン1つに置き換えたいとき

使い方

1. 「表示設定」でチーム名・ラベルを入力し、アクセントカラーを6色から選びます。
2. 「OBS ブラウザソース用URL」の欄にある /overlay のURLをコピーし、OBSでブラウザソースを新規作成して貼り付けます。
3. 試合が終わるたびに「勝ち +1」「負け +1」の大きなボタンを押します。押し間違えたら「勝ち −1」「負け −1」で戻せます。
4. 配信を仕切り直すときは「リセット」で勝ち・負け・連勝をまとめて0に戻します（チーム名と色は残ります）。

仕様と機能

項目	内容
操作画面	トップページ。スコア、勝率、設定、オーバーレイURLをまとめて表示
表示画面	/overlay。ページ背景を透明に上書きし、スコアパネルだけを左上に配置
チーム名	最大24文字。未入力のときは「OUR TEAM」を表示
アクセントカラー	6色から選択（シアン／パープル／ピンク／イエロー／グリーン／ローズ）
連勝バッジ	連勝が2以上のときだけ表示。チェックボックスで非表示にもできる
勝率	勝ち ÷（勝ち＋負け）を四捨五入した整数パーセント。0戦のときは0%
連勝の扱い	勝ちで+1、負けで0にリセット。「勝ち −1」では連勝も1減る
保存先	ブラウザのlocalStorage（キーは stream-overlay-counter-v1）
画面間の同期	localStorageのstorageイベントを監視し、操作画面での変更をオーバーレイ側へ反映

勝ち数・負け数・連勝数はいずれも0を下回らないようにしてあります。マイナス表示のスコアが配信に映る事故は起きません。

作るときに決めたこと

いちばん悩んだのは、操作画面とオーバーレイをどう繋ぐかでした。素直に考えればサーバーを1つ立てて、操作をリアルタイム送信するのが王道です。でもそれをやると、配信のたびにサーバーの生死を気にすることになりますし、私がこのアプリの運用をやめた瞬間に手元のオーバーレイも止まります。そこでlocalStorageに1つのキーだけを書き、別タブ・別ウィンドウにはstorageイベントで伝える方式にしました。同じブラウザのプロファイル内でしか同期しないという明確な制約と引き換えに、通信もアカウントも要らなくなっています。

連勝バッジを「2連勝から」にしたのは、1勝しただけで炎のマークが出るのは軽すぎると感じたからです。かといって3連勝からにするとバッジが出る機会が減りすぎる。実際に何度か配信で使って、2が一番ちょうどよく賑やかでした。

色は自由に選べるカラーピッカーにせず、あえて6色の固定パレットにしました。透過オーバーレイは配信画面の上に重なるので、暗い色を選ぶと背景に沈んで読めなくなります。明度の高い色だけを並べておけば、どれを選んでも破綻しません。

入れなかったものもあります。試合ごとの履歴、日付別の集計、複数プロファイルの切り替え。どれも一度は検討しましたが、配信中に触る道具として大きいボタンが2つ並んでいる状態を崩したくなかったので見送りました。オーバーレイのパネル位置も左上固定です。位置調整はOBS側の変換機能でできるため、こちらで持つ必要はないと判断しました。

注意点

• 同期はlocalStorageのstorageイベントに依存しているため、操作画面とオーバーレイは同じブラウザ（OBSのブラウザソースを含む）で開いている必要があります。別のパソコンやスマートフォンからの遠隔操作はできません。
• 記録はこの端末のブラウザにのみ保存されます。プライベートウィンドウの利用やブラウザデータの削除、別ブラウザへの移行で消えます。
• オーバーレイの背景を透明にする処理はページ側で行っていますが、実際に透けるかどうかはOBSのブラウザソース設定にも依存します。