# OBS メモ帳 配信画面（OBSブラウザソース）へリアルタイムにメモやスケジュール、タスクを表示できるOBS専用ツールです。 OBS内の**カスタムブラウザードック（操作パネル）**で手軽にメモを作成・管理でき、**配信用オーバーレイ（index.html）**に遅延ゼロで完全同期します。 --- ## 主な機能と最新仕様 ### 1. ドックでのメモ作成・管理 - **メモ追加**: 上部ヘッダーの「**＋ 追加**」ボタンでメモを無制限に増やせます。 - **アコーディオン（開閉）**: 畳んだ状態ではタイトルのみがコンパクトに表示され、クリックして開くと詳細内容（複数行テキストエリア）が表示・編集できます。 - **並び替え**: 各メモの「▲」「▼」ボタンで表示順序を自由に移動できます。 - **削除**: 不要になったメモは「🗑」ボタンで削除できます。 - **快適なスクロール**: メモが何十件増えてもカードが潰れることなく、ヘッダーとフッターを固定したまま縦スクロールで快適に閲覧・操作できます。 ### 2. 配信用画面への表示制御（初期非表示仕様） - **初期状態は完全非表示**: 新規作成時や起動直後は、どのメモも配信画面には表示されません（誤表示を防止）。 - **ワンタッチ配信トグル**: 配信画面に出したいメモの **`[📺 配信OFF]`** をクリックすると **`[📺 配信中]`** に切り替わり、配信画面（index.html）にリアルタイムで出現します。再度クリックすればいつでも非表示に戻せます。 ### 3. グレーアウト機能（チェックボックス） - 各メモ左側のチェックボックスをONにすると、削除せずに**取り消し線＋薄いグレーアウト**状態になります。 - ドック側だけでなく、配信画面（ブラウザソース）にも即時反映されます。 - ※設定により「完了したメモは配信用画面から完全に消す（非表示にする）」モードに切り替えることも可能です。 ### 4. 2種類の配信用URLコピーボタン - **全体配信用URL（ヘッダーの「🔗 配信用URL」ボタン）** 配信表示ON（`[📺 配信中]`）になっているメモをリスト形式でまとめて表示するURL（`index.html`）をコピーします。通常の配信用オーバーレイとしてOBSに登録する際はこちらを使用します。 - **単体配信用URL（各メモカードの「🔗」アイコン）** そのメモ1件だけをピンポイントで表示する専用URL（`index.html?id=xxx`）をコピーします。「今日の目標」や「参加ルール」などを配信画面の特定の場所に単体で配置したい場合に最適です。 ### 5. 充実のカラーカスタマイズ（全体設定 ＆ 個別メモ設定） - **全体デザイン設定（ヘッダー右端の「⚙️」ボタン）**: - **リアルタイムプレビュー**: ドック上で配信画面の見え方をリアルタイム確認可能。 - **背景色**: カラーピッカー ＋ 濃紺/黒/夜/白プリセット。 - **背景の不透明度（透過率スライダー 0%〜100%）**: 完全透明から半透明グラスモーフィズム、不透明まで自由自在。 - **文字色**: カラーピッカー ＋ 白/黄/水色/黒プリセット。 - **文字サイズ**: 小 / 標準 / 大 / 特大。 - **文字シャドウ**: 明るいゲーム画面やカメラ映像の上でも文字がくっきり読める視認性向上シャドウ。 - **メモごとの個別カラー設定（各メモを展開した右下のパレット）**: - メモごとに個別の背景色・文字色を指定できます。 - **ワンクリックプリセット**: 青・緑・橙・赤・紫・黒・白のドットを押すだけで、そのメモカード自体の背景色・文字色・枠線が一発で変化します。 - **自由なカラーピッカー**: ミニピッカー（背景色 / 文字色 ）で独自の色に微調整も可能。 - **「全体色」ボタン**: いつでも全体設定の共通カラーへワンクリックで復帰できます。 --- ## ファイル構成 ```text obs_memo/ ├── dock.html # OBSカスタムブラウザードック用HTML ├── dock.css # ドック用スタイルシート（OBSに溶け込むダークモダンUI） ├── dock.js # ドックUI操作・アコーディオン・URLコピー制御 ├── index.html # OBSブラウザソース（配信用画面）用HTML ├── overlay.css # 配信用オーバーレイ用スタイル（透過対応・シャドウ） ├── overlay.js # 配信用オーバーレイ表示・リアルタイム同期制御 ├── memo-store.js # データ保存（localStorage）＆リアルタイム同期（BroadcastChannel） ├── install.bat # OBS自動登録バッチスクリプト └── README.md # 本マニュアル ``` --- ## 導入手順 ### 方法A：自動登録 (`install.bat` を使う場合・推奨) 1. OBS Studio を起動している場合は一度終了します。 2. フォルダ内の `install.bat` をダブルクリックして実行します。 3. 画面の指示に従って Enter キーを押します： - ファイルがわんコメのテンプレートフォルダへ自動配置されます。 - OBSのカスタムブラウザードックに「**メモ帳**」が自動登録されます。 - OBSの現在のシーンにブラウザソース「**メモ帳**」が自動追加されます。 4. OBS Studio を起動すると、ドック一覧に「メモ帳」が追加されています。 --- ### 方法B：手動でOBSに登録する場合 #### 1. カスタムブラウザードックの追加 1. OBS上部メニューの **「ドック」** ＞ **「カスタムブラウザードック」** を開きます。 2. **ドック名**: `メモ帳` 3. **URL**: - ローカルファイルを直接開く場合: `dock.html` の絶対ファイルパス （例: `file:///C:/Users/.../obs_memo/dock.html`） - ローカルサーバー（わんコメ等）経由: `http://localhost:11180/templates/custom/obs_memo/dock.html` 4. **「適用」** をクリックすると、OBS内にメモ帳ドックが表示されます。サイドバーや画面下部など、使いやすい位置にドラッグ＆ドロップして配置してください。 #### 2. 配信用ブラウザソースの追加 1. メモ帳ドックの右上にある **「🔗 配信用URL」** ボタンをクリックします（URLがクリップボードにコピーされます）。 2. OBSの「ソース」パネルで **「＋」** ＞ **「ブラウザ」** を選択します。 3. ソース名を「**メモ帳**」（または任意の名）にしてOKをクリックします。 4. **URL** 欄にコピーしたURLを貼り付けます（`index.html` のパス）。 5. 幅・高さを任意に設定します（例: 幅 `500`、高さ `600` など）。 6. **「OK」** をクリックします。 - ※初期状態では全メモが非表示のため最初は何も表示されません。ドックでメモの **`[📺 配信OFF]`** をクリックして **`[📺 配信中]`** にすると配信画面に出現します。 --- ## ❓ よくある質問・トラブルシューティング ### Q. ドックで設定を変えたのに画面に反映されない / 古い表示のまま - **解決策**: OBS上のドック内を右クリックし、**「現在のページを再読み込み」** をクリックしてください。ブラウザキャッシュが更新され、最新のスタイルと挙動が適用されます。 - `install.bat` をご利用の場合は、OBSを終了してから再度 `install.bat` を実行してください。 ### Q. 配信用ブラウザソースにメモが何も表示されない - **解決策**: 初期状態では全メモが「配信非表示」になっています。ドック側の各メモカードにある **`[📺 配信OFF]`** ボタンをクリックして **`[📺 配信中]`**（緑色）に切り替えてください。 ### Q. 特定のメモだけを配信画面の隅に小さく置きたい - **解決策**: 各メモカードの右側にある「**🔗**」アイコンをクリックすると、そのメモ専用のURL（`index.html?id=xxx`）がコピーされます。OBSで新しく「ブラウザソース」を追加し、このURLを貼り付けて配置してください。 ### Q. メモが増えてもスクロールできる？ - **解決策**: はい。メモが増えてもカードは押しやすい高さを維持し、自動的に縦スクロールバーが現れます。マウスホイールやスクロールバーのドラッグで自由にスクロールできます。