都道府県カウンター 操作マニュアル
47都道府県耐久配信向けの、URL 共有 + OBS 対応リアルタイム集計ツール。
1. このツールでできること
- 配信中に 地図 / 一覧 をクリックして都道府県の票数を増減
- 専用 URL で 視聴者にリアルタイム共有(観覧専用)
- OBS ブラウザソースとして透過素材を出せる
- 進行フェーズ(上陸 / 開拓 / 発展 / 制覇)と色のカスタマイズ
- 県達成 / 地方コンプ / 全47県制覇 の 演出(紙吹雪・ファンファーレ・歓声 SE)
- 状態を 設定ファイルでバックアップ / 復元
- 𝕏 (Twitter) シェア 用テキスト下書きの自動生成
2. 全体の流れ
- トップ画面で配信タイトルを入力して「作成する」を押す
- 視聴者URL / OBS URL がコピー欄に発行され、その下に 配信者画面を開く ボタンが表示される
- 配信者画面を開く を押して配信者画面を別タブで開く(この配信者画面のタブは閉じないこと)
- 視聴者URL を X でシェアしたり、配信概要欄やコメント欄に貼ったりして共有する
- OBS を使う配信なら、OBS URL を OBS の「ブラウザソース」に貼る
- 配信中に地図 / 一覧をクリックして票を増やす
- 地方コンプ・全47県制覇でフィナーレ演出
配信者画面を一度開いた後は、同じブラウザならトップ画面の「🕘 続きから」一覧から 配信者画面を開く でいつでも再開できます。
3. 3 つの URL の役割
| URL | 用途 | 公開してよい? |
|---|---|---|
| 配信者URL | 票の増減、設定変更、リセット、シェア、エクスポート | ❌ NG(秘密キーを含むため絶対に他人に渡さない) |
| 視聴者URL | 観覧専用。地図と票数がリアルタイム反映 | ✅ OK(概要欄/コメ欄に貼る) |
| OBS URL | OBS ブラウザソース用。透過背景・操作不可 | ✅ OK(配信に貼る) |
3 URL とも同じイベントを参照しているので、配信者の操作は視聴者と OBS に即時反映されます。
4. 配信者画面の操作
4-1. 画面レイアウト
- 左上: 0/47 県達成 + 総票数
- 左側 (縦並び): 制覇 / 発展 / 開拓 / 上陸 のフェーズ別カウンタ
- 右上の独立枠: 北海道
- 右下の独立枠: 沖縄
- 中央: 本州 + 四国 + 九州
- 右側パネル: 都道府県別カウント (47 県) と、その下に地域別カウント (8 地方)
4-2. 地図 / 一覧でカウント
PC (マウス操作)
| 操作 | 挙動 |
|---|---|
| 左クリック | +1 |
| 右クリック | -1 |
スマホ / タブレット (タッチ操作)
| 操作 | 挙動 |
|---|---|
| 地図 / 一覧の県をタップ | +1 |
| 右側一覧の各セル右の − ボタンをタップ | -1 |
地図上の都道府県をクリックしても、右側の一覧をクリックしても同じです。北海道は右上の独立枠、沖縄は右下の独立枠から操作します。
スマホでは地図側で -1 はできないため、間違ったら右の一覧から − ボタンで戻してください。
4-3. 県名で絞り込み
一覧パネル上部の検索ボックスに「東京」などと打つと、一覧から該当県だけが残ります。配信中に特定の県を素早く操作したいときに便利。
4-4. 設定ドロワー
ヘッダ右の ⚙ 設定 を押すと右からドロワーが開きます。閉じるには:
- 右上の × をクリック
- 背景の暗い部分をクリック
- ESC キー
ドロワー内には以下のセクション:
- 共有URL: 視聴者URL / OBS URL のコピー
- 進行フェーズ: 各段階の必要票数と色のカスタマイズ(後述)
- バックアップ: 現在の状態を設定ファイルで保存
- 操作: 全カウントリセット
- 演出テスト: 紙吹雪 + ファンファーレを手動発火
4-5. 設定の保存
目標値や色を変更したら、ドロワー下部の 設定を保存して全員に反映 を押してください。視聴者画面と OBS にも即時反映されます。
5. 進行フェーズ(上陸 / 開拓 / 発展 / 制覇)
各都道府県の票数に応じて、地図と一覧の色が 4 段階で進化します。
| 段階 | デフォルト必要票数 | デフォルト色 |
|---|---|---|
| 上陸 | 1 票以上 | 水色 |
| 開拓 | 2 票以上 | 緑 |
| 発展 | 3 票以上 | 橙 |
| 制覇 | 4 票以上 | ピンク |
例:
制覇 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. イベントの再開 / バックアップ
イベントを後から開き直す方法は 2 通り:
- 同じブラウザの「続きから」: ワンクリック再開。日常の中断/再開はこれで OK
- 設定ファイル (バックアップ/復元): 別の PC・別ブラウザに移したい / 完全に同じ状態を残したい場合
8-1. 「続きから」リスト
トップ画面の「🕘 続きから」セクションに、このブラウザで 作成・開いた配信者画面 の履歴が新しい順で並びます。配信者画面を開く でそのまま再開できます(票数・設定すべてサーバに保存済み)。
- 履歴はブラウザのローカル保存。別の PC やプライベートモードでは復元できません
- 削除 ボタンはこの一覧から消すだけ。サーバ上のイベントは残ります
- 同じブラウザでも、長期間操作が無いと一覧の項目が指すイベントが自動削除される場合があります(次項参照)
8-2. 設定ファイルでバックアップ
設定ドロワー → バックアップ → この状態を設定ファイルで保存 でダウンロード。中身は:
- タイトル / 目標値 / 色 設定
- 各都道府県の票数と初達成時刻
配信者用の秘密キーは含まないので、共有しても安全です。
8-3. 設定ファイルから復元
トップ画面の 🗂 過去の設定ファイルから復元 セクションで設定ファイルを選んで 設定ファイルから復元する。
- 新しい配信者URL / 視聴者URL / OBS URL が発行されます(元の URL とは別のイベント)
- 元イベントは破壊されません(設定ファイルから何度でも分岐を作れます)
- タイトル欄が保存時のタイトルで自動入力されるので、編集して別配信用に派生させるのも可
9. OBS への設置
- OBS のシーンに 「ブラウザソース」を追加
- URL に OBS URL を貼る
- 幅
1920× 高さ1080推奨 - 「ソースが非アクティブのときシャットダウン」をオフ推奨(配信中の途切れ防止)
- 配信者画面で操作すれば OBS にも即時反映、演出も同期されます
透過レイアウト
OBS URL は背景が透過で、UI も操作不可(pointer-events: none)になっています。地図には薄いドロップシャドウ、テキストにはアウトラインシャドウが入っているので、明るいゲーム画面の上に重ねてもバキッと浮き上がります。
表示パーツを選ぶ
配信者画面 → ⚙ 設定 → OBS ブラウザソース用 URL のコピー欄の下に、表示パーツのチェックボックスがあります。 チェックを外したパーツが OBS 画面から消え、上の OBS URL が自動で更新されるので、その都度コピーして OBS のブラウザソースに貼り直してください。
| チェック項目 | 外すと隠れるもの |
|---|---|
| 🗾 地図本体 | 日本地図本体(本州 + 北海道 + 沖縄の SVG)。テキスト類だけ出したい時に外す |
| 県達成 / 総投票数 | 左上の「N / 47 県達成」「(総投票数: M)」 |
| 👑 TOP 3 | 「👑 TOP 3」ランキング |
| 🎯 進行フェーズ | 「🎯 進行フェーズ」凡例 |
| 残り県テロップ | 「残り N 県」テロップ |
| 進捗バー | 地図下の進捗バー |
| 都道府県別カウント (右パネル) | 右の都道府県別カウントパネル全体(地域別カウントも含む) |
| 地域別カウント (右パネル内) | 地域別カウント(北海道 1/1 等のバッジ)だけ |
例: 「都道府県別カウント (右パネル)」と「残り県テロップ」のチェックを外せば、地図 + 左カラムだけのスッキリ OBS レイアウトになります。チェックを変えると配信者画面の OBS プレビューも即時反映されるので、見た目を確認しながら調整できます。
(上級向け) URL の末尾には ?hide=stats,top3,... のように、外したパーツのキーがカンマ区切りで付与されます。URL を直接編集してチェックボックス無しの環境 (テンプレ的に共有する等) で使うこともできます。
複数ソースで自在レイアウト
チェックボックスの組み合わせを変えるたびに OBS URL が変わるので、異なる組み合わせの URL を順番にコピーして OBS のブラウザソースに別々に貼れば、各ソースを配置・サイズ調整して自由なレイアウトが組めます。各ソースはサーバと独立に同期するので、票数も演出もすべて揃います。
- ソース A: 🗾 地図本体だけチェック → 地図だけ大きく中央に
- ソース B: 👑 TOP 3 と 県達成 / 総投票数 だけチェック → ランキングと達成数を画面下に小さく
- ソース C: 都道府県別カウント (右パネル) だけチェック → 右の県別パネルをサイドに
音声の扱い
地方コンプ歓声・ファンファーレなどの SE はブラウザソース側でも鳴ります。OBS の「音声モニタリング」設定で配信音声に乗せるか、独自に SE を流すかを選んでください。
10. 視聴者画面
視聴者URL は 観覧専用です。視聴者がクリックしても何も起こりません。配信者の操作がそのままリアルタイムで反映され、進捗バッジ・地図・一覧が即時更新されます。
視聴者にはこの URL だけを配って、配信中に「今どこまで進んでるか」を見てもらう用途です。
11. トラブルシューティング
地図が読み込まれない / 画面が真っ暗
- キャッシュをクリアして再読込(Ctrl+Shift+R / Mac は Cmd+Shift+R)
- 別のブラウザ、または「シークレット / プライベートウィンドウ」で開いてみる
- それでも直らない場合は お問い合わせ までご連絡ください
配信者URLでログインできない / 「認証失敗」と出る
- URL 末尾の 秘密キーが省略されていないか確認(コピー時に途中で切れている場合あり)
- プロンプトが出たら配信者URLをそのまま貼り付け直してください
- 復活できないときは設定ファイルのバックアップから復元するのが最速
音が鳴らない
- ブラウザの自動再生ポリシーで、最初にどこかをクリックするまで音声がブロックされていることがあります。配信者画面の何かを 1 度クリックすると以降は鳴るようになります
- OBS のブラウザソースは「ページの音声を制御する」が ON のとき音が出ます
サーバを再起動したらデータは消える?
消えません。サーバ側に保存されているので、サーバや PC を再起動しても同じ URL でアクセスすれば復活します。URL を覚えているか、設定ファイルをエクスポートしておくのが大事です。
イベントを作成できない / 「リクエストが多すぎる」と出る
イベント作成は連投防止で 3 分間に 5 回までに制限しています。少し時間を空けてから再試行してください。
12. お問い合わせ
不具合のご報告・ご質問は以下までお願いします。
- 📧 メール: aoyama.hyde2@gmail.com
- 🐦 X(旧 Twitter): @AoyamaHyde
※ 個人運用のため、返信が遅くなる場合があります。あらかじめご了承ください。
不具合報告テンプレート
以下の項目のうち分かるものだけでもご記入いただけると助かります。
・発生した内容: ・発生手順: ・利用環境(PC/スマホ・ブラウザ): ・スクショ or 動画(あれば): ・配信者URL / 視聴者URL / OBS URL のどれで起きたか: ・発生時のイベント(タイトル等、分かれば):
13. 支援のお願い(任意)
このツールが配信のお供になったり、ちょっと役に立ったら、 HydeyTools の Booth ページから 「金額を上乗せして応援(BOOST)」でご支援いただけるとうれしいです。
ツール本体は今後もずっと無料で提供を続けます。 サーバ運用・新機能開発のはげみになります。
🔗 https://hydeytools.booth.pm/items/8422961
※ ダウンロード自体は ¥0 で可能です。BOOST はあくまで任意の応援機能です。
14. ライセンス
- アプリ本体のコード: MIT
- 同梱の日本地図 SVG: @svg-maps/japan by Victor Cazanave, CC BY 4.0
- 歓声 SE: 「Cheer-Crowd01」素材(配布元のライセンスに従う)
- 紙吹雪: canvas-confetti (ISC)