説明書 — GAMING theme

gaming Streaming Overlay ♡ Created by donnma

注意：二次配布および改変しての配布を禁じます。

HOW TO ADD TO OBS

ブラウザソースとして追加 / ADD AS BROWSER SOURCE

OBSを起動し、使用したいシーンを選択する。
Launch OBS Studio and select the target scene.
「ソース」パネルの＋をクリックし、「ブラウザ」 を選択する。
Click + in Sources and choose Browser.
「ローカルファイル」 にチェックを入れ、gaming.html を選択する。
Check "Local File" and browse to gaming.html.
幅: 1920、高さ: 1080 に設定する。
Set Width: 1920, Height: 1080.
「カスタムCSS」欄は空欄のままにする。
Leave Custom CSS empty.
「OK」をクリックして完了。
Click "OK" to finish.

操作するには「対話」を有効化: ソースを右クリック → 「対話」を選択。対話ウィンドウ内でクリック・ドラッグ操作ができます。
Enable "Interact": Right-click the source → "Interact". All clicks and drags work inside the Interact window.

推奨設定 / RECOMMENDED SETTINGS

設定項目 / Setting	推奨値 / Value
幅 / Width	1920
高さ / Height	1080
カスタムCSS / Custom CSS	空欄 / Empty

基本操作

BASIC OPERATIONS

✏️

テキスト編集

テキスト部分をクリックすると直接編集できます。
Click any text to edit directly.

📋

メニューを開く

空白エリアをダブルクリックするとメニューが表示されます。
Double-click any empty area for the context menu.

✋

ボックス移動

ボックスのヘッダーをドラッグして位置を変更できます。
Drag the box header to move it.

☰

ボックスメニュー

ボックス右上の ≡ ボタンでオプションを表示します。
Click ≡ on a box for its options.

メニュー機能

MENU FEATURES

ダブルクリックメニュー / DOUBLE-CLICK MENU

項目 / Item	説明 / Description
ボックス追加 `Add Box`	テキストボックスを追加します。タイトル・メモ・コメント欄として自由に使えます。 Adds a movable text box for titles, memos, comments, etc.
図形追加 `Add Shape`	サブメニューから形を選んで図形を追加します。 Adds a shape — select the type from the submenu. □ 四角形 / Rectangle ○ 円 / Circle
背景色 `Background Color`	画面全体の背景色を変更します。カラーピッカーが開きます。 Changes the screen background. Opens a color picker.
背景クリア `Clear Background`	背景を透明に戻します。 Resets background to transparent.

≡ メニュー (ボックス・図形共通) / BOX & SHAPE OPTIONS

操作 / Action	説明 / Description
リサイズ / `Resize`	ハンドルをドラッグしてサイズを変更します。 Drag the edge/corner handles to resize.
回転 / `Rotate`	スライダーで -180°〜+180° の範囲で回転します。 Slider controls rotation from -180° to +180°.
塗り色 / `Fill Color`	背景色を変更します。 Changes the fill/background color.
枠色 / `Border Color`	枠線の色を変更します。 Changes the border color.
削除 / `Delete`	要素を削除します。 Removes the element.

リアルタイムプレビュー

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）で開かれている必要があります。
ファイルをダブルクリックして 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が入っていない場合、サーバー起動.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（例: https://donnma.com/live-tool/overlay/gaming/gaming.html）を設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。
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.

カスタマイズ設定 (CONFIG)

CUSTOMIZATION

HTMLファイルをテキストエディタで開き、ファイル上部の CONFIG ブロックを編集してください。
Open the HTML file in a text editor and edit the CONFIG block near the top.

const CONFIG = {
color: {
accent: '#00fff7', // メインカラー（枠線・発光） / Main color
liveBadge: '#ff3c3c', // LIVEバッジ色 / LIVE badge color
background: '#0a0a0f', // 背景色 / Background color
bodyText: '#c0c0c8', // テキスト色 / 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	`'#00fff7'`
`color.liveBadge`	LIVEバッジ背景色 LIVE badge background	`'#ff3c3c'`
`color.background`	画面背景色 Screen background	`'#0a0a0f'`
`color.bodyText`	テキスト色 Text color	`'#c0c0c8'`

プロフィール / PROFILE

上部バーに順番に表示されるテキストの配列です。
An array of texts displayed in rotation in the top bar.

profile: [
'ゲーマー名',
'GAME: タイトル',
'X: @yourhandle',
// 行を追加するほど増やせます / Add more lines freely
],

ヒント: 色はHEX（#00fff7）またはRGBA（rgba(0,255,247,0.5)）形式で指定できます。
Tip: Colors accept HEX or RGBA format.

機能設定 / FEATURES

キー / Key	説明 / Description	初期値 / Default
`features.autoLoad`	ページを開いたとき保存済み設定を自動で読み込む。 `false` にすると「保存を読み込む」を手動で押す必要があります。 Auto-load saved config on page open. Set `false` for manual load only.	`true`
`features.saveConfigEnabled`	設定の保存・読み込み機能を有効にする。 `false` にすると「設定を保存」ボタンが非表示になります。 Enable save/load config. Set `false` to hide the save button.	`true`

トラブル対処

TROUBLESHOOTING

症状 / Symptom	対処法 / Solution
クリックに反応しない No response to clicks	OBSでソース右クリック → 「対話」を選択。 Right-click source in OBS → "Interact".
画面が真っ黒 Black screen	「ローカルファイル」にチェックが入っているか確認。 Verify "Local File" is checked.
サイズがずれる Wrong size	幅 1920・高さ 1080 を確認。 Check width=1920, height=1080.
配置が保存されない Layout lost on reload	リロードでリセットされます。`CONFIG` の直接編集で永続化できます。 Reloads reset state. Edit `CONFIG` for permanent changes.