都道府県カウンター操作マニュアル

47都道府県耐久配信向けの、URL 共有 + OBS 対応リアルタイム集計ツール。

1. このツールでできること

配信中に 地図 / 一覧 をクリックして都道府県の票数を増減
専用 URL で 視聴者にリアルタイム共有（観覧専用）
OBS ブラウザソースとして透過素材を出せる
進行フェーズ（上陸 / 開拓 / 発展 / 制覇）と色のカスタマイズ
県達成 / 地方コンプ / 全47県制覇の演出（紙吹雪・ファンファーレ・歓声 SE）
状態を json でバックアップ / 復元
𝕏 (Twitter) シェア 用テキスト下書きの自動生成

2. 全体の流れ

トップ画面で配信タイトルを入力して「作成」
配信者URL / 視聴者URL / OBS URL の 3 種類が発行される
配信者URL を自分のブラウザで開く（このタブは閉じないこと）
視聴者URL を配信概要欄やコメント欄に貼る
OBS URL を OBS の「ブラウザソース」に貼る
配信中に地図 / 一覧をクリックして票を増やす
地方コンプ・全47県制覇でフィナーレ演出

配信者URLには「配信者だけのための秘密キー」が含まれています。絶対に他人に渡さないでください。

3. 3 つの URL の役割

URL	用途	公開してよい？
配信者URL	票の増減、設定変更、リセット、シェア、エクスポート	❌ NG（秘密キーを含むため絶対に他人に渡さない）
視聴者URL	観覧専用。地図と票数がリアルタイム反映	✅ OK（概要欄/コメ欄に貼る）
OBS URL	OBS ブラウザソース用。透過背景・操作不可	✅ OK（配信に貼る）

3 URL とも同じイベントを参照しているので、配信者の操作は視聴者と OBS に即時反映されます。

4. 配信者画面の操作

4-1. 地図 / 一覧でカウント

操作	挙動
左クリック	+1
右クリック	-1

地図上の都道府県をクリックしても、右側の一覧をクリックしても同じです。北海道は左上の独立枠、沖縄は右下の独立枠から操作します。

4-2. 県名で絞り込み

一覧パネル上部の検索ボックスに「東京」などと打つと、一覧から該当県だけが残ります。配信中に特定の県を素早く操作したいときに便利。

4-3. 設定ドロワー

ヘッダ右の ⚙ 設定 を押すと右からドロワーが開きます。閉じるには:

右上の × をクリック
背景の暗い部分をクリック
ESC キー

ドロワー内には以下のセクション:

共有URL: 視聴者URL / OBS URL のコピー
進行フェーズ: 各段階の必要票数と色のカスタマイズ（後述）
バックアップ: 現在の状態を json で保存
操作: 全カウントリセット
演出テスト: 紙吹雪 + ファンファーレを手動発火

4-4. 設定の保存

目標値や色を変更したら、ドロワー下部の 設定を保存して全員に反映 を押してください。視聴者画面と OBS にも即時反映されます。

5. 進行フェーズ（上陸 / 開拓 / 発展 / 制覇）

各都道府県の票数に応じて、地図と一覧の色が 4 段階で進化します。

段階	デフォルト必要票数	デフォルト色
上陸	1 票以上	水色
開拓	2 票以上	緑
発展	3 票以上	橙
制覇	4 票以上	ピンク

地図上部のバッジは「各段階に到達した県の数 / 47 (達成率%)」を示します。
例: 制覇 4票｜ 2/47 (4%) = 制覇まで届いた県が 2 県、全体の 4%。

段階の無効化

必要票数を 0 にすると、その段階より上の段階に昇格しなくなります。
例: 開拓=0 にすると、何票入っても「上陸」止まりになります（ただし大目標・超目標も同様に 0 にする運用が直感的）。

6. 演出

6-1. 県達成（票が増えるたび）

該当県の上に 県名 + フェーズ名！のスタンプがポップ表示
例: 東京都上陸！ → 東京都開拓！ → 東京都発展！ → 東京都制覇！
超目標を超えた票数（デフォルト 5 票以上）になると 東京都熱狂！ として続けて発火
SE が 票数の回数だけ「ピコン」と鳴る（上陸=1回、開拓=2回、発展=3回、制覇=4回、それ以上は最大 8 回）

右クリックでの -1 やリセットでは発火しません。

6-2. 地方コンプ（8 地方のいずれかが全達成）

北海道 / 東北 / 関東 / 中部 / 近畿 / 中国 / 四国 / 九州沖縄のどれかが全県上陸するたび、画面に 地方名オーバーレイ + 歓声 SE。SE は 6 種類からランダムで再生され、3.5 秒経過後にフェードアウトします。

6-3. 全47県制覇

全 47 都道府県が上陸完了したら、紙吹雪 + ファンファーレの総決算演出。地図のステータスも「制覇」になります。

6-4. 手動演出テスト

設定ドロワー → 演出テスト → 紙吹雪 + ファンファーレ で全制覇演出をいつでも発火できます。

7. 𝕏 シェア

ヘッダの 𝕏 シェア ボタンで、X (Twitter) のポスト下書きが新しいタブで開きます。

本文テンプレ

🗾 <タイトル> 配信中！
進捗 N/47 県

【残り N県】
青森・岩手・宮城・秋田・山形… 他28県

#47都道府県耐久

(視聴者URL)

X の 280 字制限と t.co 短縮（URL は 23 字計算）を考慮して、残り県名は入る分だけ列挙、あふれた分は「他N県」で締めます
全 47 県達成済みなら祝コメ版に切り替わります
URL は本文末尾に改行 + 直接埋め込み（投稿後に X 側で t.co 短縮されます）

8. json バックアップ / 復元

8-1. エクスポート

設定ドロワー → バックアップ → この状態を json で保存 でダウンロード。中身は:

タイトル / 目標値 / 色設定
各都道府県の票数と初達成時刻

配信者用の秘密キーは含まないので、共有しても安全です。

8-2. インポート（復元）

トップ画面の 🗂 過去の json から復元 セクションで json を選んで json から復元する。

新しい配信者URL / 視聴者URL / OBS URL が発行されます（元の URL とは別のイベント）
元イベントは破壊されません（json から何度でも分岐を作れます）
タイトル欄が保存時のタイトルで自動入力されるので、編集して別配信用に派生させるのも可

「配信前にテストして、リセットしてから本番に入る」「配信後に最終状態をアーカイブ」など、スナップショット運用に便利です。

9. OBS への設置

OBS のシーンに 「ブラウザソース」を追加
URL に OBS URL を貼る
幅 1920 × 高さ 1080 推奨
「ソースが非アクティブのときシャットダウン」をオフ推奨（配信中の途切れ防止）
配信者画面で操作すれば OBS にも即時反映、演出も同期されます

透過レイアウト

OBS URL は背景が透過で、UI も操作不可（pointer-events: none）になっています。地図とバッジだけが表示されるので、配信のレイアウトに重ねやすい構成です。

音声の扱い

地方コンプ歓声・ファンファーレなどの SE はブラウザソース側でも鳴ります。OBS の「音声モニタリング」設定で配信音声に乗せるか、独自に SE を流すかを選んでください。

10. 視聴者画面

視聴者URL は 観覧専用です。視聴者がクリックしても何も起こりません。配信者の操作がそのままリアルタイムで反映され、進捗バッジ・地図・一覧が即時更新されます。

視聴者にはこの URL だけを配って、配信中に「今どこまで進んでるか」を見てもらう用途です。

11. トラブルシューティング

地図が読み込まれない / 画面が真っ暗

ブラウザのコンソールに赤いエラーが出ていないか確認
キャッシュをクリアして再読込（Ctrl+Shift+R）

配信者URLでログインできない / 「認証失敗」と出る

URL 末尾の 秘密キーが省略されていないか確認（コピー時に途中で切れている場合あり）
プロンプトが出たら配信者URLをそのまま貼り付け直してください
復活できないときは json バックアップから復元するのが最速

音が鳴らない

ブラウザの自動再生ポリシーで、最初にどこかをクリックするまで音声がブロックされていることがあります。配信者画面の何かを 1 度クリックすると以降は鳴るようになります
OBS のブラウザソースは「ページの音声を制御する」が ON のとき音が出ます

サーバを再起動したらデータは消える？

消えません。SQLite に保存されているので、サーバや PC を再起動しても同じ URL でアクセスすれば復活します。URL を覚えているか、json をエクスポートしておくのが大事です。

連続でイベントを作ろうとして 429 エラー

イベント作成は連投防止で 180 秒に 5 件までです。少し待ってから再試行してください。

12. ライセンス

アプリ本体のコード: MIT
同梱の日本地図 SVG: @svg-maps/japan by Victor Cazanave, CC BY 4.0
歓声 SE: 「Cheer-Crowd01」素材（配布元のライセンスに従う）
紙吹雪: canvas-confetti (ISC)

都道府県カウンター 操作マニュアル