# 表示ページの URL パラメータと CSS

> リンクの受け取り方と OBS への貼り方は、使い方の[表示ページと OBS](../help/obs.md)にあります。表示を一から自分で作るときは、あなたのプログラムが、同じトークンで公開 API から字幕のデータを受け取れます（[クイックスタート](quickstart.md)・[ガイド: オーバーレイ](guides/overlay.md)）。

## URL パラメータ

リンクの `#` の後ろに `&名前=値` を足すと、表示を変えられます（例: `https://moji.kaitoranma.com/#token=<トークン>&overlay=1&view=meeting&scale=1.5`）。

| したいこと | パラメータ | 既定 | 内容 |
|---|---|---|---|
| 表示の種類を変える | `view`: `seats` / `captions` / `lanes` / `meeting` / `flow`。`overlay=1` では、ほかに `telop` / `youtube` | `seats`（`overlay=1` では `telop`） | `seats` は対面（左右に話者、真ん中に会話）を、`captions` は字幕（新しい発言を下に足していく字幕）を、`lanes` はレーン（話者ごとの横長の帯に、いまの発言を出す表示）を、`meeting` は会議（話者ごとのカード）を、`flow` は流れる（確定した発言が右から左へ流れる表示）を表す。`telop` はテロップ（配信画面の下の字幕）を、`youtube` は [YouTube のコメント欄風](#youtube)を表す |
| 文字を大きく・小さくする | `scale`: 0.5〜4 | 1 | 文字の大きさの倍率を表す。どの表示でも、文字の大きさは、表示ページの大きさ（OBS ではブラウザソースの大きさ）にも比例する |
| テロップの行の数を変える | `lines`: 1〜10 | 3 | `telop` で重ねて出す行の数を表す |
| 消えるまでの秒数を変える | `fadeSeconds`: 0〜3600 | 20（`overlay=1` では 8） | 確定した発言が消えるまでの秒数を表す。0 なら、表示ページは発言を消さない。`youtube` では、表示ページは発言を消さない |
| 消えるまでの秒数を変える | `shortFadeSeconds`: 0〜3600 | 5（`overlay=1` では 3） | 相槌などの短い発言が消えるまでの秒数を表す |
| 消えるまでの秒数を変える | `shortChars`: 0〜50 | 5 | 表示ページは、`shortChars` の文字数以下の発言を、`shortFadeSeconds` で消す短い発言とみなす |
| アイコン・名前を出さない | `hideAvatars`: `1` | オフ | 表示ページは、アイコンを出さない |
| アイコン・名前を出さない | `hideNames`: `1` | オフ | 表示ページは、名前を出さない |
| 配色を変える | `theme`: `auto` / `dark` / `light` | `auto` | `auto` では、表示ページが配色を端末の設定に合わせる |
| 読み上げる | `live`: `1` | オフ | 表示ページは、確定した発言をスクリーンリーダーに読み上げさせる |
| （リンクに最初から入っている） | `token` | — | 表示用のトークンが入る |
| （リンクに最初から入っている） | `overlay`: `1` | オフ | 表示ページは、背景を透過し、ボタンなどを出さない（配信用オーバーレイ）。表示ページは、終了と失敗の知らせだけを右下に小さく出す |

- あなたは `telop` と `youtube` を、配信用オーバーレイ（`overlay=1` のリンク）でだけ選べます。表示ページは、`overlay=1` の無いリンクの `view=telop` と `view=youtube` を、`seats` で開きます。
- 表示ページは、なくした表示のリンクも開きます。表示ページは、`view=stage` を `seats` で、`view=timeline` を `lanes` で開きます。表示ページは、なくしたパラメータの `cols` と `window` を無視します。

あなたが表示ページの画面で表示の種類を切り替えると、表示ページが `view` を、アドレス欄の URL に書き戻します。書き戻した後の URL をコピーすれば、そのまま OBS に貼れます。

## 見た目を変える（カスタム CSS）

あなたは OBS のブラウザソースの「カスタム CSS」に CSS を書き足して、表示ページの色やフォントを変えられます。表示ページの CSS が、同じプロパティを、もっと詳しいセレクタで決めていることがあります。書き足した値が反映されないときは、値に `!important` を付けてください。

```css
/* 例: 文字のフォントを変え、対面の吹き出しを少し透かす */
.mv-root {
  --mv-font: "Noto Sans JP", sans-serif;
}
.mv-seats {
  --mv-msg-bg: rgba(14, 21, 40, 0.6) !important;
}
```

| プロパティ | 既定 | 内容 |
|---|---|---|
| `--mv-font` | BIZ UDPGothic → Hiragino Sans → Noto Sans JP → … | 文字のフォントを表す |
| `--mv-bg` / `--mv-surface` / `--mv-line` / `--mv-ink` | 暗い配色: `#14161d` / `#1e212b` / `#2e3242` / `#f1f2f5`、明るい配色: `#f7f6f2` / `#ffffff` / `#e5e3dc` / `#1c1f2a` | `--mv-bg` は表示ページの背景の色を表す（`overlay=1` では背景は透明）。`--mv-surface` は名札・レーンの面の色を、`--mv-line` は線の色を、`--mv-ink` は文字の色を表す |
| `--mv-leave-ms` | `600ms` | 発言が消えるときのフェードの長さを表す |
| `--mv-msg-bg` / `--mv-seat-avatar` / `--mv-seat-col` | 対面の表示が決める | `--mv-msg-bg` は対面の吹き出しの地の色を、`--mv-seat-avatar` は席のアイコンの大きさを、`--mv-seat-col` は左右の列の幅を表す。`--mv-msg-bg`・`--mv-seat-avatar`・`--mv-seat-col` は `.mv-seats` に書く |
| `--mv-display-font` / `--mv-rounded-font` | Dela Gothic One → … / M PLUS Rounded 1c → … | `--mv-display-font` は、テロップと会議の見出しの太い文字のフォントを表す。`--mv-rounded-font` は、会議のカードと名札の丸い文字のフォントを表す |
| `--mv-speaker` | 話者ごとに決まる | 話している人ごとの色を表す（話者を見分けるための色で、ブランドの色とは別）。表示ページが `--mv-speaker` を話者ごとに付けるので、`.mv-root` に書いても色は変わらない |

## YouTube のコメント欄風 {#youtube}

配信用オーバーレイ（`overlay=1` のリンク）に `&view=youtube` を足すと、表示ページは、確定した発言を、YouTube のライブチャットと同じ要素名・ID・入れ子・class で描きます。あなたが、YouTube のコメント欄向けに公開されている CSS（ジェネレーターで作った CSS など）を、OBS のブラウザソースの「カスタム CSS」にそのまま貼ると、表示ページは、貼った CSS の見た目で発言を出します。

| 階層 | 要素 |
|---|---|
| 外側 | `yt-live-chat-app` > `div#contents` > `yt-live-chat-renderer[hide-timestamps]` |
| `yt-live-chat-renderer` の中 | `tp-yt-iron-pages#content-pages` > `div#chat-messages` > `div#contents` > `div#chat` > `div#item-list` |
| 一覧 | `yt-live-chat-item-list-renderer[allow-scroll]` > `div#contents` > `div#item-scroller` > `div#item-offset` > `div#items` |
| コメント 1 件 | `yt-live-chat-text-message-renderer[author-type=""]` |
| コメントの中 | `yt-img-shadow#author-photo` > `img#img`、`div#content` > `span#timestamp`・`yt-live-chat-author-chip`（> `span#author-name`・`span#chat-badges`）・`span#message-container` > `span#message` |

表示ページは、YouTube と同じく、各要素に `class="style-scope <親の要素名>"` を付けます。

- 表示ページは、確定した発言（`final`・`refined`）だけを、確定した順に `#items` の末尾へ足します。表示ページは、新しい発言を下に足し、古い発言を上へ押し出します。表示ページは、話している途中の発言を出しません。
- 表示ページは、`fadeSeconds` では発言を消しません。発言を消したいときは、貼る CSS のアニメーションで消してください。
- 名前とアイコンは、話した人の Discord の名前とアイコンです。`hideNames=1` では、表示ページは `yt-live-chat-author-chip` を描きません。`hideAvatars=1` では、表示ページは `yt-img-shadow` を描きません。アイコンが無いときは、表示ページが、話者の色の地に頭文字を描いた絵を `img#img` に出します。
- 表示ページは、`#timestamp` に話し始めの時刻（見ている端末の時計の「時:分」）を書きます。表示ページは、YouTube の既定と同じく時刻を隠します。時刻を出すかは、貼る CSS が決めます。
- 表示ページは、`yt-live-chat-text-message-renderer` に、`data-utterance-id`・`data-seat-key`（例: `discord:<ユーザー ID>`）・`data-stage`（`final` か `refined`）と、話者の色の `--mv-speaker` も付けます。貼る CSS は、`data-seat-key` と `--mv-speaker` で、話者ごとに見た目を変えられます。
- 表示ページの標準の見た目は透明の地に白い文字です。表示ページは標準の見た目の規則の詳細度を 0 にしているので、貼った CSS は `!important` が無くても標準の見た目に勝ちます。

## デモ

表示ページの URL に `demo=1` を付けると、Discord で文字起こしをしていなくても、表示ページが架空のデータで字幕を表示します（トークンは要りません）。OBS のブラウザソースの URL を本物のリンクに貼り替える前に、表示の種類・位置・大きさを確かめられます。

| 見られるもの | URL |
|---|---|
| 対面（4 人） | [https://moji.kaitoranma.com/?demo=1](/?demo=1) |
| 会議（10 人。`n` は話者の数で、1〜24） | [https://moji.kaitoranma.com/?demo=1&view=meeting&n=10](/?demo=1&view=meeting&n=10) |
| 配信用のテロップ（背景は透過。OBS に貼って位置を合わせる） | [https://moji.kaitoranma.com/?demo=1&overlay=1](/?demo=1&overlay=1) |
| 配信用のテロップを、ゲーム画面の代わりの背景の上で見る（ブラウザでの確認用） | [https://moji.kaitoranma.com/?demo=1&overlay=1&backdrop=1](/?demo=1&overlay=1&backdrop=1) |

- 表示の設定（`view`・`theme`・`scale`・`lines`・`fadeSeconds` など）は、本物と同じように反映されます。
- `overlay=1` の無いデモでは、あなたは、Discord のアクティビティと同じ 5 つの表示（対面・字幕・レーン・会議・流れる）を選べます。テロップと YouTube のコメント欄風は、`overlay=1` のデモでだけ見られます。
- 架空のデータだと分かるように、表示ページはヘッダーに「デモ（架空のデータ）」と出します。配信用オーバーレイでは、表示ページは左上に小さく「DEMO」と出します。