桜・竹・格子をモチーフにした和風ストリーミングオーバーレイです。OBS の「ブラウザソース」に読み込んで使用します。すべての設定はブラウザ内に保存されるため、外部ファイルは不要です。

保存先はこのブラウザの中（IndexedDB）です。file:// で開いたときと http://localhost で開いたとき、またブラウザが違うときは、それぞれ別の保存になります。別のPCやブラウザへは「ファイルに書き出す」で持っていってください。

パーツメニューの「表示更新」を押すと、今の編集内容を同じURLで開いている別タブへ即座に反映できます。編集用タブと配信確認用タブを並べて作業したいときに便利です。

2つのタブが同じオリジン（同じURL）で開かれている必要があります。ファイルをダブルクリックして file:// で直接開いた場合、ブラウザによっては2タブ間でデータが共有されず、この機能が動作しません。http:// または https:// 経由で開いてください。

このPCにPythonが入っていない場合、サーバー起動.bat を実行してもエラーになります。python.org からダウンロード・インストールしてください（インストール時に「Add python.exe to PATH」に必ずチェック）。インストール後、 サーバー起動.bat を再度実行すれば起動します。

OBSの「Custom Browser Dock」と「ブラウザソース」の両方に同じ公開URLを設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。

Chromeで開いたこの画面から、OBSのWebSocketサーバーに接続すると、編集内容をOBSのブラウザソースにそのまま反映できます。「対話」ウィンドウで操作する必要がなくなります（「表示更新」は同じブラウザのタブどうしでしか届かないため、OBSへはこちらを使います）。

編集すると、少しあとに自動でOBSへ送ります。

メニューの「📤 OBSに反映」か Ctrl+Enter を押したときだけ送ります。配信中にこっそり直したいとき向けです。

ChromeとOBSは同じPCで動かしてください（スマホなど別の機器からは接続できません）。Chromeが「ローカルネットワークへのアクセス」を確認してきたら許可してください。ポート・パスワードはこのブラウザに保存され、次に開いたときは自動で再接続します。OBS 28 以降が必要です。

ファイル上部の const CONFIG = { ... } ブロックを編集することで、色・テキスト・アニメーション間隔などを変更できます。

features.editLock を true にすると、画面の編集が一切できなくなります。obs にパスワードを入れて autoConnect: true にしておけば、開くだけでOBSにつながり、別のPC（editLock をかけていないファイル）から編集を送れます。

features: {
    // …
    editLock: true,
},
obs: {
    port: 4455,
    password: 'OBSのパスワード',
    mode: 'auto',
    autoConnect: true,
},