Youtube Liveでコメントを画面に表示させる方法【録画は非表示可能】

Youtube Liveでコメントを画面に表示させる方法【カスタムCSS例】

2018年11月17日

OBSとChat v2.0 Style Generatorの設定例・カスタムCSSの例を教えて？
スマホからはどう見えるの？
こんな疑問に答えます。
講座系の動画をYouTubeで配信している僕が、実体験を元に解説していきます。

本記事の内容

今回は、Youtube Liveでコメントを画面に表示させる方法について書きます。

OBSとChat v2.0 Style Generatorを併用すれば簡単にできました。
公開で配信すれば、綺麗にコメントが表示されます。
位置・文字色・フォントなど細かく設定できるのが便利です。

ただ、最新のiPhoneのYouTubeアプリでは、何も設定しなくてもコメントが綺麗にポップアップします。
なので、スマホ向けにはあまり必要ない設定かもしれません。

その辺も含めて、詳しく解説していきます。

OBSにブラウザのソースを追加する

OBSのソース追加から「ブラウザ」を選びます。

名前を「ブラウザ」から「YouTubeコメント画面内表示」に変えました。
これから何度も使うので、変更しておくとわかりやすいです。

プロパティ画面が出るので、ここを設定していきます。

コメントのURLを取得します。

YouTubeトップ＞クリエイターツール＞ライブ配信、と進みます。
チャットウィンドウを出して、URLをコピペします。

OBSに戻り、先ほどの「URL」部分にペーストします。

コメントのURLは、一定期間ごとに変わるようです。
（連続で配信する場合は、変わらないですね）

カスタムCSSを設定すると、コメントの文字色や背景色を変えられます。

これは「Chat v2.0 Style Generator 日本語版」を使うのが便利です。

このサイトは Chat v2.0 Style Generator を翻訳・改変して作成されました。
快く許可してくださったChris Rhodesさん(サイト)に心より感謝いたします。
http://www.geocities.jp/css4obs/howto.htmlより引用

上記サイトは、大元のChat v2.0 Style Generatorを、作者の許可を取って翻訳・改変して作成されたとのことです。
フォントを日本語に完全対応して、設定画面も日本語になるなど工夫されていますね。

Chat v2.0 Style Generatorでは、かなり自由にカスタマイズできます。
文字色・アイコン・フォントも自由に指定できます。

僕のおすすめの設定を載せておきます。

アイコン、チャンネル名、コメントのフォントサイズと行の高さを３２にしました。
小画面再生でも見えるように、わりと大きめにしてみました。

アイコン:
サイズ: 32へ変更

ユーザー名(チャンネル名):
フォントサイズ: 32へ変更
行の高さ(デフォルト:0):32へ変更

コメントの設定:
フォントサイズ: 32へ変更
行の高さ(デフォルト:0):32へ変更

ユーザー名がわりと邪魔に感じたので、表示させるか迷います。
ただ、来てくれた方の名前もわかりやすくするため、表示させて見ました。

スマホからどう見えているか大事ですよね。

縦に見た場合、生放送中は自動でした部分がチャット表示されます。
録画で見た場合は、チャットタブを選ぶとチャットが再現されます。

iPhoneから横に見た場合は、このようにポップアップされます…

これは知らなかったです…
（アップデートで変わったのかな…）

これができるなら、あんまコメントを画面に表示させる意味ないかもしれないですね。
ここまで書いてきて、なんですが…

なので、今回のChat v2.0 Style Generatorは、スマホというより大画面向けですね。
大画面を前提とした高画質ゲーム配信で、大量のコメントを表示させたい時に便利そうです。

OBSで同時録画した場合、録画される動画にもコメントが付いてきます。

なので、コメントなしの動画を保存するには少し工夫しないといけないようです。
思いついたのは、VRのゲーム面をWin+Gキーでキャプチャ録画しておくのがいいかもしれないです。

というわけで今回は以上です。
OBSとChat v2.0 Style Generatorを併用すれば簡単にできました。
大画面を前提とした高画質ゲーム配信で、大量のコメントを表示させたい時に便利そうです。