Discord に追加

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

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

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 のコメント欄風を表す
文字を大きく・小さくする 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 オフ 表示ページは、背景を透過し、ボタンなどを出さない（配信用オーバーレイ）。表示ページは、終了と失敗の知らせだけを右下に小さく出す

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

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

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

/* 例: 文字のフォントを変え、対面の吹き出しを少し透かす */
.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 のコメント欄風

配信用オーバーレイ（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 <親の要素名>" を付けます。

デモ

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

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