説明書 — donnma theme

DONNMA THEME Streaming Overlay | Created by donnma

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

OBSへの追加方法

How to Add to OBS

ブラウザソースとして追加 / Add as Browser Source

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

操作するには「対話」を有効にしてください: ソースを右クリック → 「対話」を選択。OBSの「対話」ウィンドウ内でクリック・ドラッグ操作ができます。
Enable "Interact" to use the overlay: Right-click the source → "Interact". You can click and drag inside the Interact window.

推奨設定 / Recommended Settings

設定項目 / Setting	推奨値 / Value
幅 / Width	1920
高さ / Height	1080
カスタムCSS / Custom CSS	空欄 / Empty
シーン切替時にリロード	お好みで / Optional

基本操作

Basic Operations

✏️

テキスト編集 / Edit Text

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

📋

メニューを開く / Open Menu

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

✋

ボックス移動 / Move Box

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

☰

ボックスメニュー / Box Menu

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

donnma-01 と donnma-02 の違い: どちらも同じ機能を持ちます。初期カラーや初期レイアウトが異なります。好みの方を使用してください。
donnma-01 vs donnma-02: Both have identical features. They differ in default colors and layout. Use whichever you prefer.

メニュー機能

Menu Features

ダブルクリックメニュー / Double-Click Menu

項目 / Item	説明 / Description
ボックス追加 `Add Box`	テキストボックスを追加します。タイトル・メモ・コメント欄として自由に使えます。 Adds a movable text box. Use freely as a title, memo, or comment area.
図形追加 `Add Shape`	図形を追加します。サブメニューから形を選択してください。 Adds a shape. Select the type from the submenu. □ 四角形 / Rectangle ○ 円 / Circle
背景色 `Background Color`	画面全体の背景色を変更します。カラーピッカーが開きます。 Changes the screen background color. Opens a color picker.
背景クリア `Clear Background`	背景を透明に戻します。OBSのクロマキーと組み合わせて使えます。 Resets the background to transparent. Useful with OBS chroma key.

ボックス・図形の ≡ メニュー / Box & Shape Options

操作 / Action	説明 / Description
リサイズ `Resize`	周囲にハンドルが表示されます。端をドラッグしてサイズを変更できます。 Shows resize handles around the element. Drag an edge or corner to resize.
回転 `Rotate`	スライダーで-180°〜+180°の範囲で回転できます。 Use the slider to rotate from -180° to +180°.
塗り色 `Fill Color`	ボックス・図形の背景色を変更します。 Changes the background/fill color of the box or shape.
枠色 `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つ開く（donnma-01.html の編集用・確認用、どちらも同じURL）。
Two browser tabs open automatically for donnma-01.html — both point to the same local URL.
片方のタブで編集し、メニューから 📡 表示更新 を押す。
Edit in one tab, then click 📡 Update Display in the menu.
もう一方のタブに変更が即座に反映される。
The other tab updates instantly.
donnma-02.html を試したい場合は http://localhost:8080/donnma-02.html を別タブで開く。
To try donnma-02.html, open http://localhost:8080/donnma-02.html in another tab.
終わったら、開いたウィンドウで何かキーを押すとローカルサーバーが停止する。
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を設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。
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ファイルをメモ帳や VS Code などのテキストエディタで開き、ファイル上部の CONFIG ブロックを編集することで永続的に設定を変更できます。

Open the HTML file in a text editor (Notepad, VS Code, etc.) and edit the CONFIG block near the top to make permanent changes.

const CONFIG = {
color: {
accent: '#8B4513', // メインカラー（枠線・アクセント）/ Main color
liveBadge: '#8B4513', // LIVEバッジ背景色 / LIVE badge color
background: '#f5ede0', // 画面背景色 / Screen background
bodyText: '#8B4513', // テキスト色 / 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
},
layout: {
width: 1920,
height: 1080,
},
};

カラー設定 / Color Settings

キー / Key	説明 / Description	初期値 / Default
`color.accent`	枠線・アクセントカラー Border & accent color	`'#8B4513'`
`color.liveBadge`	LIVEバッジ背景色 LIVE badge background	`'#8B4513'`
`color.background`	画面背景色 Screen background color	`'#f5ede0'`
`color.bodyText`	コメント・メモのテキスト色 Text color for comments/memos	`'#8B4513'`

テキスト設定 / Text Settings

キー / Key	説明 / Description
`text.liveBadge`	LIVEバッジの文字 / Text on LIVE badge
`text.titleBoxHeader`	タイトルボックスのラベル / Title box label
`text.titleBoxContent`	タイトルボックスの初期テキスト / Initial title text
`text.commentBoxHeader`	コメントボックスのラベル / Comment box label
`text.memoBoxHeader`	メモボックスのラベル / Memo box label
`text.memoBoxContent`	メモの初期テキスト / Memo initial text
`text.messagePlaceholder`	メッセージ欄のプレースホルダー / Message placeholder

プロフィール設定 / Profile

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

profile: [
'配信者名',
'WEB: yoursite.com',
'X: @yourhandle',
// 必要なだけ追加できます / Add as many as you like
],

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

機能設定 / 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
クリックしても反応しない Clicking has no effect	OBSでソースを右クリック → 「対話」を選択してください。 Right-click the source in OBS → select "Interact".
画面が真っ黒 Black screen	「ローカルファイル」にチェックが入っているか確認してください。 Verify that "Local File" is checked in the browser source settings.
サイズ・位置がずれる Wrong size or position	幅 1920・高さ 1080 に設定されているか確認してください。 Check that Width is 1920 and Height is 1080.
配置が保存されない Layout not saved after reload	ページリロードでリセットされます。永続化するには `CONFIG` を直接編集してください。 Runtime changes reset on reload. Edit `CONFIG` directly for permanent changes.
フォントが変わっている Font looks different	インターネット接続がない場合、Google Fontsが読み込めず代替フォントになります。 Without internet, Google Fonts can't load and a fallback font is used.