ツイキャスで配信するさい、コメントを配信画面に映すにはどうしたらよいのでしょうか。
じつは簡単にできます。というのも、ツイキャスに掲載されている情報をコピー＆ペーストするだけでよいからです。
実際にやってみましょう。
配信ソフトが必要
まず前提として配信ソフトが必要です。たとえば、
- OBS Studio（以下OBS）
- XSplit
- Streamlabs Desktop（旧称Streamlabs OBS）
のいずれかを使います。
今回はOBSを使用しますが、ほかの配信ソフトでもかまいません。問題なくできます。
これ以降は、ツイキャスでの配信経験があることを前提としています。配信方法がわからない場合は、最初に下記ページをご覧ください。
URLをコピーしよう
ツイキャスでは、コメントを配信画面に表示するための仕組みが最初から用意されています。
どういうことかというと、まず配信画面のページを開いてください。
- ツイキャスにアクセスする。
- 画面右上の「配信する」ボタンをクリックする。
画面が切り替わったら「ツールとの連携設定」をクリックします。
そして、「配信ツール向けオーバーレイ」タブをクリックしましょう。
「コメントを配信画面に表示」という部分にURLが表示されているので、「コピー」をクリックします。
URLをコピーできました。コメントを配信画面に表示するうえで、このURLが重要な意味を持っています。
URLをペーストしよう
あとは、いまコピーしたURLをOBSにペーストします。「ソース」の「+」アイコンから「ブラウザ」をクリックしてください。
「新規作成」が選択された状態で、適当な名称をつけます。「コメント」でも「チャット」でも、なんでもかまいません。そして「OK」をクリックします。
すると、下記画像のような設定画面が開きます。「URL」の部分に注目してください。ここを（1）削除し、（2）さきほどコピーしたURLをペーストしましょう。
▲URLをペーストしたところ
必要に応じて「幅」と「高さ」の設定も変更します。たとえば、表示されるコメント数を少なくしたい場合は、OBSの「ブラウザ」ソースを開いて「高さ」を200にします。
▲任意の設定にしてください。このとおりでなくてかまいません。
「OK」をクリックします。完成しました。
コメントが表示されるか確認しよう
実際にコメントを確認してみましょう。
ツイキャスの放送ページを開いてください。自分でコメントを入力し、「コメント」ボタンをクリックします。
かりに配信中であれば、OBSおよびツイキャスの両方にコメントが表示されます。配信中でない場合は、OBSのほうにだけコメントが表示されます。
▲きちんとコメントの背景が透明になっています（透過）。お茶などのアイテムが表示されないのは仕様です。
もしコメントが表示されない場合は、以下の点を確認してください。
- URLを正しくコピーできているか
- URLを正しくペーストできているか（OBSの「URL」を空欄にしてペースト）
- 自分でテストしている場合、「コメント」ボタンをクリックしたか（クリックする）
- 「ブラウザ」ソースの順序は適切か
- 「ブラウザ」ソースが非表示になっていないか
デザインを変更しよう
ひょっとしたら、デザインをカスタマイズしたいという人も多いかもしれません。
- 文字の色・サイズを変えたい
- ユーザーのアイコンを表示したい
- コメントをもっと見やすくしたい
上記のようなデザインの変更というのは、CSSを変更すればできます。ただ、CSSといわれてもピンとこない人が多いでしょう。
そこで便利なのが、「OBSキャスコメ CSSカスタマイザー」（以下、CSSカスタマイザー）です。
使い方は簡単です。試しに、同サイトの「CSSコードをクリップボードにコピー」ボタンをクリックしてください。文字列（CSSのコード）をコピーできます。
あとはこの文字列をOBSにペーストすればよいのです。
- OBSの「ブラウザ」ソースをダブルクリックする。
- 「カスタム CSS」の部分を削除する。
- 「カスタム CSS」に文字列をペーストする。
- 「OK」をクリックする。
▲「カスタム CSS」にペーストしたところ。「URL」のほうではありません。
すると、見た目が大きく変わりました。これがCSSの効果です。
カスタマイズ時の注意点
CSSカスタマイザーの「コメント欄サンプル」を見ながらカスタマイズしましょう。
設定ができたら、さきほどと同じようにCSSをOBSにコピー＆ペーストします。コピー＆ペーストを忘れないようにしてください。
- CSSカスタマイザーで設定する。
- 同サイトのCSSコードをコピーする。
- OBSの「ブラウザ」ソースを開き、「カスタム CSS」にCSSコードをペーストする。
注意点ですが、設定を変えたあとはCSSの内容が変わります。そこで、設定を変えるたびに毎回コピー＆ペーストしなおしてください。
ほかのやり方について
今回のツイキャスの機能を使わずにやりたいのであれば、コメントビューアーの「わんコメ」内蔵機能で行う方法もあります。
まとめ
コメントを配信画面に表示したいなら、ツイキャスに掲載されているURLをOBSにコピペしましょう。これだけです。
もしコメントをカスタマイズしたい場合は、CSSをOBSに追加します。そのCSSは、CSSカスタマイザーで吐き出せます。
本文中では書きませんでしたが、ツイキャス用のCSSを無料公開してくれているブログもあります。それを使ってカスタマイズするのもありです。
コメントの見方については、下記ページをご覧ください。
コメント