# 表示ページと OBS

## リンクを受け取る {#get-link}

文字起こしが動いている間に `/link` を実行すると、表示ページ・配信用オーバーレイ・YouTube のコメント欄風を開く 3 つのボタンが実行した人にだけ届きます。自動入室の VC では、VC に人がいる間は文字起こしが動いています。

- **表示ページ**: ボタンを押すとブラウザで開き、話している人ごとの字幕を見られます。
- **配信用オーバーレイ**: 背景が透明な字幕のページです。ボタンを押してブラウザで開き、そのアドレス（配信用オーバーレイのリンク）を OBS のブラウザソースに貼ります。
- **YouTube のコメント欄風**: 配信用オーバーレイを、YouTube のライブのコメント欄の形で開きます。YouTube のコメント欄向けの CSS を使うときは、こちらのアドレスを貼ります（[見た目を変える](#customize)）。

> **リンクを知っている人は誰でも字幕を見られます。** リンクをチャンネルや SNS に貼ったり、配信の画面に映したりしないでください。リンクを配信に映してしまったときは、`/stop` で文字起こしを止めてから始め直してください。始め直した文字起こしの字幕は前のリンクでは見られません。

## OBS に貼る {#obs}

1. OBS の「ソース」の「+」から「ブラウザ」を追加します。
2. 「URL」に、架空のデータのデモの URL（[https://moji.kaitoranma.com/?demo=1&overlay=1](https://moji.kaitoranma.com/?demo=1&overlay=1)）を貼ります。デモの URL なら、本物のリンクを画面に出さずにソースの位置と大きさを合わせられます。
3. ブラウザのソースを次のように設定します。

   | 設定 | おすすめ |
   |---|---|
   | 幅 × 高さ | 字幕を画面全体に重ねるなら 1920 × 1080、画面の下の帯だけに出すなら 1920 × 400 などにします。 |
   | 表示されていないときにソースをシャットダウン | オフにします。オフにすると、シーンを切り替えるたびに字幕のページがつなぎ直されません。 |
   | シーンがアクティブになったときにブラウザの表示を更新 | オフにします。 |

4. ソースの位置と大きさを合わせます。

   > ソースの設定の画面は配信に映さないでください。

5. 配信の前に、「URL」の欄のデモの URL を、配信用オーバーレイのリンク（[リンクを受け取る](#get-link)）に貼り替えます。

## 配信のたびに貼り替える {#every-stream}

1. VC で文字起こしを始めます。
2. `/link` を実行します。
3. OBS のソースの「URL」を、新しい配信用オーバーレイのリンクに貼り替えます。

1 つのリンクでは、文字起こしを始めてから止めるまでの 1 回分の字幕だけを見られます。新しい文字起こしが始まると、前のリンクのページには「終了しました」と表示されます。

リンクには期限があります。開いたままのページは期限が過ぎても字幕を表示し続けます。期限が過ぎてからページを開き直すと「このリンクでは字幕を見られません」と表示されるので、`/link` で新しいリンクを受け取ってください。

## 見た目を変える {#customize}

リンクの末尾に `&名前=値` を足すと、字幕の見た目を変えられます。表示の種類（対面・会議など）と文字の大きさは表示ページの右上の「⋯」からも切り替えられます。

| したいこと | 足すもの |
|---|---|
| 文字を大きくする | `&scale=1.5` |
| テロップの行を 2 行にする | `&lines=2` |
| 話している人を左右に並べる（対面） | `&view=seats` |
| 字幕を、話している人ごとのカードにする（会議） | `&view=meeting` |
| 発言を YouTube のライブのコメント欄の形で並べる（YouTube のコメント欄風） | `&view=youtube` |
| 明るい配色にする | `&theme=light` |

YouTube のコメント欄風（`&view=youtube`）は、配信用オーバーレイ（`overlay=1` が入ったリンク）でだけ選べます。確定した発言が YouTube のライブチャットと同じ形で下に足され、古い発言は上へ送られます。発言には話した人の Discord の名前とアイコンが付きます。YouTube のコメント欄向けに公開されている CSS（ジェネレーターで作った CSS など）を OBS のブラウザソースの「カスタム CSS」に貼ると、その見た目で表示されます。

ほかの設定とカスタム CSS の説明は[表示ページの URL パラメータと CSS（開発者向け）](../docs/viewer.md#url-パラメータ)にあります。

## うまく映らないとき {#trouble}

| 表示されているもの | すること |
|---|---|
| 「このリンクでは字幕を見られません」 | `/link` で新しいリンクを受け取り、前のリンクと貼り替えてください。 |
| 「終了しました」 | 貼っているリンクの文字起こしはもう終わっています。文字起こしを始め直してから、新しいリンクを貼ってください。 |
| 背景が透明にならない | 配信用オーバーレイのリンク（`overlay=1` が入ったもの）を貼っているか、カスタム CSS で背景の色を付けていないかを確かめてください。 |
| 何も表示されない | OBS に貼ったリンクから `&overlay=1` を外して、ブラウザで開いてください。VC に人がいれば、話す前から名札が表示されます。名札が表示されないときは、表示ページの右上の「⋯」を開き、いちばん下の表示ページの状態を見てください。文字おこしくんが止まっていないかも[まず稼働状況を確かめる](troubleshooting.md#status)の手順で確かめてください。 |