公開日 OBS Studio

OBS Studio　Youtube配信でコメントを表示させるcss

どうも、け～えすです。
ニコニコのブロマガだと書きにくい、Youtubeネタをやってみます。


（2017/04/21追記）
2017/04/09に、今回使用しているcssがアップデートされておりました。　Youtubeの仕様変更への対応っぽいですね。　導入方法やカスタマイズ方法には変更は無いと思います。
(2019/01/29追記)　私がOSBを使わなくなったため、記事の更新は今後行うことはありません。　不具合についても調査が出来ませんのでご了承ください。

前書き

ニコ生だと配信ツールやその補助的なツールも結構ありまして、コメントビュワーも色々と出てきてます。
そんな環境に慣れている私が、Youtube配信を始めようとした時に困ったのが、「コメジェネ表示どうすんべや・・・」って所でした。

最初はニコ生でも使っていた「HTML5コメントジェネレーター」と、同じ作者さんが作られている「YoutubeLive簡易コメントビューアー」 （KILINBOX様）を使っておりました。
その後にETS2をつべ配信している方の所で視聴していた所、感じのいいコメジェネをお使いだったので自力で調べて使おうとしたところ・・・　なぜか動かないorz

ちなみに使おうとしたのは「Youtubepopoutchat」と言うChoromeやFireFoxで使えるアドオンを利用する物でした。
最近バージョンアップを行われたのですが、やはり正常に表示されないのでどうにもならず、js自体を見てみてもさっぱり解んないｗ

jsに作者さんのTwitterのアドレスがあったので、ちょっと見に行ったら丁度OBS Studio用のｃｓｓを公開された所でした。
まぁこれが非常にいい感じで、サクっと導入させて頂きました。

導入方法ですが、そのｃｓｓの公開場所に詳しい手順が書いております。
Googleのページ翻訳を使えばある程度把握できると思いますが、ちょっと注釈の意味も込めて導入方法の手順を書いていきたいと思います。

※注意
今回の記事で使用したOBS Studioは、VTF様が公開の「OBSStudio簡易インストーラー2017/01/08版」になります。　OBS公式版やOBS Classicでは試していないので、動かなかったりしたらごめんなさい。
また、このCSSはXsplitでは正常動作致しませんでした。


ｃｓｓの公開場所はこちら

設定編


公開ページに飛んだら、「streamable_chat.css」（README.mdのすぐ下のリンク）をクリックし、ｃｓｓ本文が表示されるので本文を「すべて選択」した上でコピーし、テキストファイルを新規作成して貼り付けておきます。

ここからは、ｃｓｓ公開ページの解説を読みながら進めていって下さい。　スクショもあるからすぐわかると思います。（下の番号は、公開ページの解説を同じ数字にしております。）

１．OBS Studioの ソースの所でBrowserSourceをクリックします。
２． 「新規作成」が選択されていれば、その下の入力欄にソース名（任意）を書いてOKボタンを押す
３．自分のYoutubeLiveストリームのページを開き、チャット欄の右上の「チャットをポップアウト」を
押してチャット欄を別表示にさせる。
ポップアップしたチャットウインドウのURLをコピーする。
４．２で作った際に出てくる設定画面の「URL」に、３でコピーしたURLを張る。
５．その下の「Width」は300、「Height」は400に、「FPS」は３０にする。
６．事前にテキストファイルに張り付けていたｃｓｓ本文をすべてコピーし、OBSの「CSS」部分に
張り付ける。
７．OKボタンを押して作業完了です。　出来上がったソースを好きな位置に配置して下さい。

カスタマイズ編


もうちょっと表示を大きく

自分の配信環境ですと、少々小さい表示になってしまうので、もうちょっと全体を大きく表示させようと思います。

１．先程作ったシーンをクリックし、その下の歯車を押して設定画面を表示させます。
２．「Width」は400、「Height」は600に変更します。
３．CSSの所を少し下にスクロールすると、
#items .mention.yt-live-chat-text-message-renderer {
font-family: "Montserrat";
font-size:16px;
}
の表記が出てくると思います。
「font-size:16px;」を16pxから20pxに書き換えます。
ちなみに22pxあたりまでならいけるけど、25pxでは今の表示設定だと文字が重なります。
表示サイズ（WidthやHeight）を大きくとる必要があると思われます。

コメントユーザーさんのアイコンを表示

コメジェネにはユーザー名とコメントの２つが表示されてますが、Youtubeのチャット欄にはコメントした人のアイコンが表示されてます。　これと同じ表示にします。
１０６行目に以下の表記があります。
/* Hide Chat Elements */
#items .yt-live-chat-author-badge-renderer-0,
yt-live-chat-pinned-message-renderer,
yt-live-chat-ticker-renderer,
yt-live-chat-ticker-paid-message-item-renderer,
#action-panel,
yt-live-chat-header-renderer,
#author-photo,
#show-more,
yt-live-chat-text-message-renderer #menu {
  display:none !important;
}
ここの「#action-panel,」「#author-photo,」を削除して、以下の通りにします。
（記述ミスの為、間違いの部分に打ち消し線を入れて修正しております。）
/* Hide Chat Elements */
#items .yt-live-chat-author-badge-renderer-0,
yt-live-chat-pinned-message-renderer,
yt-live-chat-ticker-renderer,
yt-live-chat-ticker-paid-message-item-renderer,
#action-panel,
yt-live-chat-header-renderer,
#show-more,
yt-live-chat-text-message-renderer #menu {
  display:none !important;
}

これでコメントの際にコメントユーザーのアイコンがコメジェネに表示されます。

コメントや吹き出しの色を変更

CSSの中にも書いているのですが、色コード自体はcss3maker.comの色コード表を使うと簡単に色コードが取得できるので、これを使って好きな色を作り、それをcssに書き込めばOKです。
色コードを作るページはこちら

欲しい色を作ったら、CSSの４６行目から７６行目までのカラーコードを変更していきましょう。
ちなみに上から
・視聴者ユーザーの名前の色
・配信者ユーザーの名前の色
・モデレーターユーザーの名前の色
・コメント本文
・吹き出しカラー１
・吹き出しカラー２
となっております。

吹き出しカラー１と２はrgbaのコードで行う方がいいみたいですね。

補足事項

設定編でチャット欄のURLをOBSに書き込みましたが、Youtubeのライブストリーミングを「今すぐ配信」から「イベント」に切り替えたり、又はその逆の操作を行ったりすると、チャット欄のURLが変更になる事があるそうです。　OBSに表示されなくなったりしたらURLの再取得を行ってOBSのURLを書き換えて下さい。



ETS2配信を行っている知り合いで、何人かYoutube配信を始めようと考えている人がいらっしゃったので、非常にやっつけ仕事なんですがとりあえず詰め込んで書いてみました。
不明点とかございましたら、コメントで書いて頂ければフォローも致しますのでよろしくお願いいたします。


スポンサーリンク