OBS Studio 連携設定

OBS Studio の配信画面にリアクションカウンターやエモート演出を表示するセットアップ手順です。

---

1. リアクションカウンターの追加

OBS Studio にブラウザソースを追加し、画面上にリアクションカウンターを表示します。

設定手順

1. コントロールパネルの「設定」を開き、ブラウザソース URL (推奨) の URL をコピーします。

2. OBS Studio の「ソース」パネル下部にある「＋」ボタンをクリックし、「ブラウザ」を選択します。
3. ソース名を入力して「OK」をクリックします（例：リアクションカウンター）。
4. プロパティ画面で各項目を以下のように設定します。

項目	設定値	説明
URL	コピーしたブラウザソース URL	http://localhost:53023/overlay など
幅	800〜1920	配信画面のレイアウトに合わせた横幅
高さ	600〜1080	配信画面のレイアウトに合わせた縦幅
カスタムCSS	（空欄または既定値）	変更の必要はありません

5. 必要に応じて以下のチェックボックスを有効にします。
   • 「シーンがアクティブになったときにブラウザの表示を更新する」（推奨：シーン切り替え時の表示崩れを防ぎます）
   • 「表示されていないときにソースをシャットダウンする」（PCの負荷を抑えたい場合に有効にします）
6. 「OK」をクリックして設定を完了します。

固定ポート設定による URL の維持

本ツールは初回起動時に決定したポート番号（初期値：53023）を data/settings.json に保存して固定動作します。 次回以降の起動でもポート番号が変わらないため、OBS Studio 側のブラウザソース URL を毎回書き換える必要はありません。

---

2. エモート花吹雪オーバーレイの追加

チャット欄の絵文字に合わせて画面全体にエモートを舞わせる場合は、エモート専用のブラウザソースを追加します。

設定手順

1. コントロールパネルの「エモート検出」を開き、Emote Overlay URL（例：http://localhost:53023/overlay_emote）をコピーします。

2. OBS Studio の「ソース」パネルで「＋」から「ブラウザ」を選択します。
3. ソース名を入力します（例：エモート演出）。
4. プロパティ画面で以下のように設定します。

項目	設定値
URL	コピーした Emote Overlay URL
幅	OBS Studio のキャンバス幅（例：1920）
高さ	OBS Studio のキャンバス高さ（例：1080）

キャンバス解像度の確認方法

OBS Studio のメニューバーから「設定」の「映像」を開き、「基本（キャンバス）解像度」の数値を確認します。

5. 「OK」をクリックして設定を完了します。

---

3. シーン固定URL（アドバンス設定）の活用

シーンごとに異なるデザインを固定したい場合や、複数のカウンターを同時に配置したい場合は、コントロールパネルの「アドバンス設定」を使用します。

例えば、ゲーム配信シーンでは縦型リスト、雑談配信シーンではタンクモードのように使い分けられます。

設定手順

1. コントロールパネルの「アドバンス設定」を開きます。
2. プレビューを確認しながら、対象シーンに合わせたいレイアウトやカラーテーマを選択します。
3. 画面に生成されたシーン固定URL（例：http://localhost:53023/overlay?layout=tank&colorTheme=sunset）をコピーします。
4. OBS Studio の対象シーンにあるブラウザソースの URL 欄に貼り付けます。

---

4. OBS Studio のカスタムブラウザドックへの配置

コントロールパネルを OBS Studio のウィンドウ内に組み込む（カスタムブラウザドック）ことで、配信画面を見ながら同じ画面内でリアクション集計の確認や設定変更を行えます。

設定手順

1. OBS Studio のメニューバーから「ドック」の「カスタムブラウザドック...」を開きます。
2. ドック名と URL を入力します。
   • ドック名：YouTube Live Reaction Counter
   • URL：コントロールパネルの URL（例：http://localhost:53023/control）

3. 「適用」をクリックします。
4. コントロールパネルのウィンドウが表示されます。
5. 表示されたウィンドウのタイトルバーをドラッグし、OBS Studio 内の任意の場所にドッキングします。
6. ドックウィンドウの一覧画面で「閉じる」をクリックします。

コントロールパネルの幅狭表示と画面更新

コントロールパネルはドックの横幅に合わせて自動的にレイアウトが調整されます。 幅が狭い場合は、カウンター集計、接続状況、操作ボタンの順に縦並びで配置されます。 アップデート後に表示が古いままの場合は、ドック内をクリックして Ctrl + R（Mac は Cmd + R）を押すか、右クリックして「再読み込み」を選択してください。