MMD-PVから作詞作曲までやる、ボカロPしんりんの製作ノート

ボーカロイド、VRなど音楽と映像の作成方法と講座

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

投稿日:

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

はじめに

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

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

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

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

 

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

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

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

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

 

コメントのURLを貼る

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

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

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

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

 

カスタムCSSの設定

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

Chat v2.0 Style Generator 日本語版を使う

これは「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 日本語版
http://www.geocities.jp/css4obs/index.html

Chat v2.0 Style Generator
https://chatv2.septapus.com

Chat v2.0 Style Generator 日本語のおすすめの設定

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

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

変更点

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

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

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

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

ユーザー名(チャンネル名)表示を消すか迷う

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

スマホからはどう見える?

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

iPhoneから縦に見た場合

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

iPhoneから横に見た場合

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

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

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

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

 

OBSで保存される動画はコメント付きなので注意

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

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

 

まとめ

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

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

-動画編集

Ad-336px-stinger8

Ad-336px-stinger8

Copyright© MMD-PVから作詞作曲までやる、ボカロPしんりんの製作ノート , 2018 All Rights Reserved.