説明書 — CYBERPUNK VAPORWAVE

cyberpunk-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 → choose Browser.
「ローカルファイル」 にチェックを入れ、cyberpunk-gaming.html を選択する。
Check "Local File" and select cyberpunk-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".

// 推奨設定 / 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.

メニュー機能

// MENU FEATURES

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

項目 / Item	説明 / Description
ボックス追加 `Add Box`	テキストボックスを追加します。 Adds a movable text box.
図形追加 `Add Shape`	サブメニューから形を選択して図形を追加します。 Adds a shape — select from submenu. □ 四角形 / Rectangle ○ 円 / Circle
背景色 `Background Color`	背景色を変更します。カラーピッカーが開きます。 Changes background color. Opens a color picker.
背景クリア `Clear Background`	背景を透明に戻します。 Resets background to transparent.

// ≡ メニュー / BOX & SHAPE OPTIONS

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

カスタマイズ設定 (CONFIG)

// CUSTOMIZATION

HTMLファイルをテキストエディタで開き、ファイル上部の 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（#ff007f）またはRGBA（rgba(255,0,127,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 → "Interact".
画面が真っ黒 Black screen	「ローカルファイル」にチェックが入っているか確認。 Check "Local File" is enabled.
サイズがずれる Wrong size	幅 1920・高さ 1080 を確認。 Verify width=1920, height=1080.
配置が保存されない Layout lost on reload	`CONFIG` の直接編集で永続化できます。 Edit `CONFIG` directly for permanent changes.