# ガイド: OBS・自作のオーバーレイ あなたは配信の字幕や、話者ごとの吹き出しを自分で作れます。文字おこしくんは Subscribe の WebSocket につなぐページのオリジンを制限していないので、あなたのページはどこに置いても（OBS のブラウザソースからも）Subscribe につなげます。 ## 方法を選ぶ | 方法 | 手間 | できること | |---|---|---| | Discord の `/link` の返答のボタンで開く、公式の配信用オーバーレイのリンク（`…#token=…&overlay=1`）を、そのまま OBS に入れる | なし | 公式のデザインで字幕を出せる。URL パラメータと OBS の「カスタム CSS」で表示・色・大きさを変えられる（[表示ページの URL パラメータと CSS](../viewer.md)）。`view=youtube` では、文字おこしくんが YouTube のライブチャットと同じ要素の形で発言を出すので、YouTube のコメント欄向けに公開されている CSS をそのまま使える | | **自作の HTML + 参照実装**（このページ） | HTML 1 枚 | レイアウト・演出を自由に作れる | ## 自作の HTML（話者ごとに最後の一言を出す字幕） 次の 2 ファイルを同じ場所に置きます。 1. [mojiokoshi-subscribe.js](../examples/mojiokoshi-subscribe.js)（参照実装。中身を変えずに置く） 2. `overlay.html`（このページのコード） OBS のブラウザソースに `https://<置いた場所>/overlay.html#token=<トークン>&server=wss:///v1/subscribe` を入れます。トークンの取り方は[クイックスタート](../quickstart.md#1-接続先とトークンを手に入れる)を見てください。 ```html captions
``` - **`file://` で開くと、ブラウザが ES モジュールの読み込みを拒むことがあります。** 2 つのファイルは、GitHub Pages・Cloudflare Pages などの静的ホスティングか、ローカルの静的サーバー（`npx serve` など）に置いてください。1 ファイルにしたいときは、参照実装の中身を `