背景
TwitchのコメントをOBS上に流すために、外部サービスを利用しないシンプルな方法を探しました。簡単に使えて、表示のカスタマイズも十分にできるChat Designer for Twitchが便利そうだったので、ここにまとめておきます。
概要
Twitch配信において、外部サービスを使わないでコメントを画面上に流す方法です。
Chat Designer for Twitchを使用します。
コメントの見え方を編集し、その見え方でチャットが流れるhtmlファイルをOBSで取り込むことで、配信にコメントを表示します。
ダウンロード
上記URLからzipファイルをダウンロードして展開します。展開したフォルダの中身は、下記の画像の通りです。
コメントの見え方の編集
Designer.html をEdgeまたはChromeで開いて、画面に表示されるコメントの見え方を編集します。Firefoxは未対応です。
基本
基本的な設定方法は、Chat Designer for Twitch公式が用意してくれた動画を見ます。
以下に、上記動画で紹介されている内容以外で自分が設定したことを書きます。
コメント投稿者名を隠す
コメントのみを表示して、コメント投稿者名を表示したくない場合はUsernameのフォントサイズを0に設定します。
コメントを左寄せにする
コメントを左寄せにしたい場合は、Messageのalign設定を変更します。Sizing & Spacingではないです。
一定時間経ったらコメントを消す
古いコメントが画面上にいつまでも残らないように、一定時間でコメントが消えるように設定します。Animation -> Timing内のDurationで、コメントが消えるまでの時間を設定します。単位はミリ秒なので、11000を設定したら11秒でコメントが消えます。
編集内容の保存
画面下の緑色のSaveボタンを押して、data.jsをScriptフォルダ内に上書き保存します。これで編集した内容がChat.htmlにおけるコメント表示に反映されます。
OBSでの表示
OBSからソースとして「ブラウザ」でChat.htmlを取り込みます。
このChat.htmlがTwitchのコメントを自動的に表示、更新してくれます。
