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

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


(2017/04/21追記)
2017/04/09に、今回使用しているcssがアップデートされておりました。 Youtubeの仕様変更への対応っぽいですね。 導入方法やカスタマイズ方法には変更は無いと思います。

前書き

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

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

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

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

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

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


cssの公開場所はこちら

設定編


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

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

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

カスタマイズ編


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

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

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

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

コメジェネにはユーザー名とコメントの2つが表示されてますが、Youtubeのチャット欄にはコメントした人のアイコンが表示されてます。 これと同じ表示にします。
106行目に以下の表記があります。
/* 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の46行目から76行目までのカラーコードを変更していきましょう。
ちなみに上から
・視聴者ユーザーの名前の色
・配信者ユーザーの名前の色
・モデレーターユーザーの名前の色
・コメント本文
・吹き出しカラー1
・吹き出しカラー2
となっております。

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

補足事項

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



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


【スポンサーリンク】

9 件のコメント :

  1. obsのコメント欄が白く真ん中に this video is unavailableと書かれていてできません。よろしければ返信お願いします

    返信削除
    返信
    1. こちらでは特に問題無く動いております。 cssも4月以降更新がありませんし、Youtubeも仕様変更した形跡もなく、こうなるとUnknownさんの設定orCSSコピペのミスかな・・・ としか判断ができません。
      今一度内容の見直し、CSS部分のコピペのやり直し等を行ってみて下さい。

      削除
  2. 大変参考になりました
    お伺いしたいのですが、上記手順で設定を行い、OBS上の画面に枠は表示されましたが、実際配信を開始すると、コメントがOBS側に表示されません。URLはあっているのですが、何か思いつく原因はありますでしょうか?

    返信削除
    返信
    1. コメントありがとうございます。 また、返信が遅くなり大変申し訳ございません。

      本題なのですが、現在自分がOBSを使っておらず、すぐに確認が取れない状態です。 仕事と別のBlog記事作成で手一杯ってのもありまして・・・
      年内は厳しいのですが、時間が取れれば一度確認してみます。 すぐに解答出来なくて大変申し訳ございません。 上記事情をご理解いただけたら幸いです。 よろしくお願いいたします。

      削除
    2. け~えす様
      こちらこそ失礼致しました。無理を言ってしまって申し訳ございません。
      いつかわかれば。で大丈夫です。

      削除
    3. すみません、まだ本件に手が付けれていないので、とりあえず気になった事だけ書いておきます。

      コメントのみ表示されないってのは、基本的に取得先URLが間違っていると思われます。
      チャット欄のURLって配信設定を変えたりすると(例えば普通の配信から時イベント配信に切り替える等)URLが変更される事があるので、今一度確認してみて下さい。

      それと配布先を確認したのですが、HP上部にあるDLリンクの「streamable_chat.css」を見てみたら、今年8月に手が入っているみたいです。 付き合わせはしていませんが、HPの下の方にあるCSSと違っている可能性があるので、このリンクで表示されるCSSを全部コピペしてOBSに入れてみて下さい。

      上記対応をすでに行っていたらすみません。 今日か明日にはOBSの最新版を入れてテストする予定です。 取り急ぎご報告まで。

      削除
    4. 思ったよりOBSの設定が早く終わったので、先程テスト配信してみました。

      VTF様のOBS簡易インストーラーの最新版を使ってビルドした物に、上記CSSを入れてテスト配信しましたが、問題無くコメントが表示されております。

      なのでCSS上の問題では無く、URLの問題だったり匿名様の環境依存の問題かと推測しております。
      当方のOSはWin7でして、もしWin10をお使いであれば先日の大型アップデートで色々とトラブルが発生していると聞いております。
      この問題に関係あるかは解りませんが、VTF様のBlogでキャプチャ周りの不具合の対処法等が掲載されておりましたので、Win10をお使いであればその辺も試されてはいかがでしょうか。

      こちらとしてはこれ以上の情報提供は難しいかと思いますが、今後も何か気になる事がありましたら、返信でご報告させて頂きます。

      匿名様のOBSでコメントが流れるようにお祈りいたしております。
      満足な回答になっていないかもしれませんが、どうぞお許しくださいませ。
      それでは!

      削除
  3. こんばんは。最近youtube liveをはじめてコメジェネの設定を探していて辿り着きました。
    書いてある通りに設定を行い無事表示させる事が出来ました。大変助かりました、有難うございます。

    ちなみにCSS公開先の最後にかかれている「8. FURTHER CUSTOMIZATION」の箇所を行わないとコメントが常時表示されたままで、設定を行うと表示から一定時間で消える所まで出来たのでその旨も書かれていたらなお親切かもしれません

    せっかくなのでコメントさせて頂きました!

    返信削除
    返信
    1. コメントありがとうございます。 また、返信が遅くなって本当に申し訳ございませんでした。

      うちのBlogが役にたって嬉しいです。 こういうコメントが本当に嬉しくってw

      それとご指摘ありがとうございます。 ただ、現在私がOBSからXsplitに移行してしまってまして、すぐに内容を確認できません。
      いつになるかは言えませんが、確認でき次第反映させて頂きたく思います。

      ありがとうございました。

      削除