OBS設定
// HOW TO ADD TO OBS// ブラウザソースとして追加 / ADD AS BROWSER SOURCE
- OBSを起動し、使用したいシーンを選択する。
Launch OBS Studio and select the target scene. - 「ソース」パネルの ＋ をクリックし、「ブラウザ」 を選択する。
Click + in Sources → choose Browser. - 「ローカルファイル」 にチェックを入れ、
cyberpunk-gaming.htmlを選択する。
Check "Local File" and selectcyberpunk-gaming.html. - 幅: 1920、高さ: 1080 に設定する。
Set Width: 1920, Height: 1080. - 「カスタムCSS」欄は 空欄 のままにする。
Leave Custom CSS empty. - 「OK」をクリックして完了。
Click "OK" to complete.
操作するには「対話」を有効化: ソースを右クリック → 「対話」を選択。対話ウィンドウ内でクリック・ドラッグ操作ができます。
Enable "Interact": Right-click the source → "Interact".
Enable "Interact": Right-click the source → "Interact".
// 推奨設定 / RECOMMENDED SETTINGS
| 設定項目 / Setting | 推奨値 / Value |
|---|---|
| 幅 / Width | 1920 |
| 高さ / Height | 1080 |
| カスタムCSS / Custom CSS | 空欄 / Empty |
基本操作
// BASIC OPERATIONS✏️
// テキスト編集
テキスト部分をクリックして直接編集できます。
Click text to edit directly.
📋
// メニューを開く
空白エリアをダブルクリックするとメニューが表示されます。
Double-click empty area for context menu.
✋
// ボックス移動
ヘッダーをドラッグして移動できます。
Drag the box header to move it.
☰
// ボックスメニュー
右上の ≡ でオプションを表示します。
Click ≡ for options.
リアルタイムプレビュー
REAL-TIME PREVIEWパーツメニューの 📡 表示更新（別タブ）
を押すと、今の編集内容を同じURLで開いている別タブへ即座に反映できます。編集用タブと配信確認用タブを並べて作業したいときに便利です。
Click "📡 Update Display" in the parts menu to instantly push
your current edits to another tab open on the same URL — handy for keeping an editing tab and a
preview tab side by side.
条件：2つのタブが同じオリジン（同じURL）で開かれている必要があります。
ファイルをダブルクリックして
Requirement: both tabs must share the same origin (same URL).
Opening the file directly via
ファイルをダブルクリックして
file:// で直接開いた場合、ブラウザによっては2タブ間でデータが共有されず、この機能が動作しません。http://
または
https:// 経由で開いてください。Requirement: both tabs must share the same origin (same URL).
Opening the file directly via
file:// (double-click) often won't share data between
tabs in some browsers. Use http:// or https:// instead.
手元での確認方法（ローカルサーバー） / LOCAL PREVIEW
- 同梱の
サーバー起動.batをダブルクリックする（要 Python）。
Double-click the includedサーバー起動.bat(requires Python). - 自動でブラウザタブが2つ開く（編集用・確認用、どちらも同じURL）。
Two browser tabs open automatically — both point to the same local URL. - 片方のタブで編集し、メニューから 📡 表示更新 を押す。
Edit in one tab, then click 📡 Update Display in the menu. - もう一方のタブに変更が即座に反映される。
The other tab updates instantly. - 終わったら、開いたウィンドウで何かキーを押すとローカルサーバーが停止する。
Press any key in the console window to stop the local server when done.
Pythonが必要です： このPCにPythonが入っていない場合、
Python required: If Python isn't installed on this PC,
サーバー起動.bat
を実行してもエラーになります。python.org
からダウンロード・インストールしてください（インストール時に「Add python.exe to PATH」に必ずチェック）。インストール後、
サーバー起動.bat を再度実行すれば起動します。Python required: If Python isn't installed on this PC,
サーバー起動.bat
will fail. Install it from python.org (check "Add python.exe to PATH" during setup), then run the file
again.
配信本番では： OBSの「Custom Browser
Dock」と「ブラウザソース」の両方に同じ公開URLを設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。
On stream: If both the OBS "Custom Browser Dock" and the Browser Source point to the same hosted URL, this feature works without any local server.
On stream: If both the OBS "Custom Browser Dock" and the Browser Source point to the same hosted URL, this feature works without any local server.
OBSに反映するには： この機能は同じブラウザのタブどうしで使うものです。OBSのブラウザソースはChromeとは保存場所が別なので、OBSに反映したいときは「OBS接続」を使ってください。
保存・プリセット
SAVE & PRESETS今の画面は自動で保存されます。名前を付けて取っておきたい画面はプリセットに、別のPCへ持っていくときはファイルに書き出します。いずれもメニューの 「⚙️ 設定」 から使えます。
The screen is auto-saved. Use presets for named layouts and export for other PCs — all from Settings.
| 項目 / Item | 説明 / Description |
|---|---|
自動保存AUTO SAVE |
今の画面は、操作するたびに自動でこのブラウザに保存されます。次に開いたときは続きから始まります。 The screen is saved automatically and restored next time. |
プリセットPRESET |
「⚙️ 設定」で今の画面に名前を付けて、いくつでも保存できます（例：雑談用・ゲーム実況用）。一覧から読み込む・上書き・削除ができます。 Save named presets and load, overwrite or delete them from the list. |
ファイルに書き出すEXPORT |
今の画面とすべてのプリセットを、画像も含めて1つのJSONファイルにまとめてダウンロードします。別のPCへの持ち運びやバックアップに使えます。 Downloads the current screen and all presets (with images) as one JSON file. |
ファイルから読み込むIMPORT |
書き出したJSONファイルから、今の画面とプリセットを復元します。同じ名前のプリセットがあるときは上書きするか確認します。以前の形式のファイルも読み込めます。 Restores the screen and presets from an exported file. |
画面リセットRESET |
「⚙️ 設定」から、画面を初期状態に戻します（今の画面は消えます。プリセットは残ります）。 Resets the screen (presets are kept). |
以前の「設定を保存」OLD SAVE |
前のバージョンで「設定を保存」していた内容は、プリセット一覧の先頭に「以前の『設定を保存』」として残っています。 Data saved with the old "Save config" appears at the top of the preset list. |
保存先はこのブラウザの中（IndexedDB）です。
file:// で開いたときと http://localhost で開いたとき、またブラウザが違うときは、それぞれ別の保存になります。別のPCやブラウザへは「ファイルに書き出す」で持っていってください。
OBS接続
OBS CONNECTChromeで開いたこの画面から、OBSのWebSocketサーバーに接続すると、編集内容をOBSのブラウザソースにそのまま反映できます。「対話」ウィンドウで操作する必要がなくなります。
Connect from Chrome to the OBS WebSocket server and your edits appear in the OBS Browser Source.
準備と使い方 / SETUP
- OBSのメニュー 「ツール → WebSocketサーバー設定」 で「WebSocketサーバーを有効にする」をオンにし、「接続情報を表示」でポートとパスワードを確認する（最初の1回だけ）。
In OBS, open Tools → WebSocket Server Settings, enable the server and note the port and password. - OBSのブラウザソースには、今までどおりこのHTMLファイルを入れておく。
Keep this HTML file in your OBS Browser Source as usual. - 同じPCのChromeで同じHTMLファイルを開き、空いている場所をダブルクリック → 「⚙️ 設定」 → 「OBS接続」にポートとパスワードを入れて 「接続」。
Open the same file in Chrome on the same PC, double-click → Settings → enter port/password → Connect. - Chromeで編集すると、OBSのブラウザソースにそのまま反映されます。OBS側にも保存されるので、OBSを再起動しても消えません。
Edits in Chrome appear in OBS and are saved there too.
反映のしかた / MODES
| モード / Mode | 説明 / Description |
|---|---|
リアルタイムReal-time |
編集すると、少しあとに自動でOBSへ送ります。 Sends edits to OBS automatically. |
確定したときだけOn confirm |
メニューの「📤 OBSに反映」か Ctrl+Enter を押したときだけ送ります。配信中にこっそり直したいとき向けです。 Sends only when you press "Send to OBS" or Ctrl+Enter. |
ChromeとOBSは同じPCで動かしてください（スマホなど別の機器からは接続できません）。Chromeが「ローカルネットワークへのアクセス」を確認してきたら許可してください。ポート・パスワードはこのブラウザに保存され、次に開いたときは自動で再接続します。OBS 28 以降が必要です。
カスタマイズ設定 (CONFIG)
// CUSTOMIZATIONHTMLファイルをテキストエディタで開き、ファイル上部の CONFIG ブロックを編集してください。
Open the HTML in
a text editor and edit the CONFIG block near the top.
const CONFIG = {
color: {
accent: '#ff007f', // メインカラー（枠線・発光） / Main color
liveBadge: '#ff007f', // LIVEバッジ色 / LIVE badge color
background: '#0b071a', // 背景色 / Background color
bodyText: '#ffffff', // テキスト色 / Text color
},
text: {
liveBadge: 'LIVE',
titleBoxHeader: 'TITLE',
titleBoxContent: 'LIVE配信用オーバーレイ画面',
commentBoxHeader: 'COMMENT',
memoBoxHeader: 'MEMO',
memoBoxContent: '空白ダブルクリックでメニュー選択可能',
messagePlaceholder: 'メッセージを入力...',
memoPlaceholder: 'メモを入力...',
},
profile: [
'あなたの名前 / Your Name',
'WEB: yourwebsite.com',
'X: @yourhandle',
],
animation: {
profileInterval: 3000, // プロフィール切替間隔(ms)
},
};
// カラー設定 / COLOR SETTINGS
| キー / Key | 説明 / Description | 初期値 / Default |
|---|---|---|
color.accent |
枠線・発光カラー Border & glow color |
'#ff007f' |
color.liveBadge |
LIVEバッジ背景色 LIVE badge color |
'#ff007f' |
color.background |
画面背景色 Screen background |
'#0b071a' |
color.bodyText |
テキスト色 Text color |
'#ffffff' |
ヒント: 色はHEX（
Tip: Colors accept HEX or RGBA format.
#ff007f）またはRGBA（rgba(255,0,127,0.5)）形式で指定できます。Tip: Colors accept HEX or RGBA format.
機能設定 / FEATURES
| キー / Key | 説明 / Description | 初期値 / Default |
|---|---|---|
features.autoLoad |
ページを開いたとき、前回の画面（自動保存）から始める。false にすると毎回初期状態から始まります。Start from the last auto-saved screen. false = always start fresh. |
true |
features.saveConfigEnabled |
今の画面を自動で保存する。false にすると自動保存しません（プリセット・ファイル書き出しは使えます）。Auto-save the current screen. |
true |
features.presetSave |
設定画面に「プリセットに保存」（名前を付けて保存・上書き）を出す。 Show "Save as preset" in Settings. |
true |
features.presetLoad |
設定画面にプリセットの一覧（読み込む・削除）を出す。 Show the preset list in Settings. |
true |
features.obsSettings |
設定画面に「OBS接続」の欄を出す。false にすると、ブラウザに保存された値ではなく、いつも下の obs の値で接続します。Show the OBS connection panel. false = always use the obs values below. |
true |
features.fileExport |
設定画面に「ファイルに書き出す」を出す。 Show "Export to file". |
true |
features.fileImport |
設定画面に「ファイルから読み込む」を出す。 Show "Import from file". |
true |
features.resetButton |
設定画面に「画面リセット」を出す。 Show "Reset screen". |
true |
features.editLock |
表示専用にする。true にすると、パーツメニュー・ドラッグ・入力など画面の編集が一切できなくなります（OBS接続で送られてきた変更は反映されます）。Display-only mode: disables all editing (changes sent via OBS connection still apply). |
false |
OBS接続の初期値 / OBS DEFAULTS
| キー / Key | 説明 / Description | 初期値 / Default |
|---|---|---|
obs.port |
OBSのWebSocketサーバーのポート番号。 WebSocket server port. |
4455 |
obs.password |
OBSのWebSocketサーバーのパスワード。このファイルを人に渡すとパスワードも渡るので注意してください。 WebSocket server password (shared if you share this file). |
'' |
obs.mode |
反映のしかた。'auto' = リアルタイム、'manual' = 確定したときだけ。'auto' = real-time, 'manual' = on confirm. |
'auto' |
obs.autoConnect |
ページを開いたら自動で接続する。 Connect automatically when the page opens. |
false |
ゲームセンターなど、画面を触られたくない場所では：
features.editLock を true にすると、画面の編集が一切できなくなります。obs にパスワードを入れて autoConnect: true にしておけば、開くだけでOBSにつながり、別のPC（editLock をかけていないファイル）から編集を送れます。
features: {
// …
editLock: true,
},
obs: {
port: 4455,
password: 'OBSのパスワード',
mode: 'auto',
autoConnect: true,
},
トラブル対処
// TROUBLESHOOTING| 症状 / Symptom | 対処法 / Solution |
|---|---|
| クリックに反応しない No response to clicks |
OBSでソース右クリック → 「対話」。 Right-click source → "Interact". |
| 画面が真っ黒 Black screen |
「ローカルファイル」にチェックが入っているか確認。 Check "Local File" is enabled. |
| サイズがずれる Wrong size |
幅 1920・高さ 1080 を確認。 Verify width=1920, height=1080. |
| 配置が保存されない Layout not saved |
今の画面は自動で保存されます。file:// と http://localhost では保存場所が別なので、いつも同じ開き方で開いてください。features.saveConfigEnabled が false だと保存されません。Auto-saved per browser and URL. Open the file the same way each time. |
| OBSに接続できない Cannot connect to OBS |
OBSが起動しているか、「ツール → WebSocketサーバー設定」でサーバーが有効か、ポートとパスワードが合っているかを確認してください。 Check that OBS is running, the WebSocket server is enabled, and the port/password are correct. |
| OBSに反映されない Changes not shown in OBS |
「確定したときだけ」のときは、メニューの「📤 OBSに反映」か Ctrl+Enter で送ってください。OBSのブラウザソースに同じテーマのHTMLが入っているかも確認してください。 In confirm mode, press "Send to OBS" or Ctrl+Enter. Make sure OBS uses the same theme file. |