YouTubeのコメントを、OBSのライブ配信に透過で表示する方法

MacでDTMライブ配信

「YouTubeのコメントを、OBS のライブ配信に、透過表示(透明な状態)する方法ってないの?」って疑問を、解決していきます。

OBS のライブ配信中に、YouTube のコメントを表示できたら、視聴者といっしょに盛り上がれますよね?

OBS Studio のブラウザ機能をつかえば、簡単に実装できるので、ぜひトライしてみてください。

というわけで今回は、YouTubeのコメントを、OBS Studio のライブ配信で、透過表示する方法を、3ステップで解説していきます。

この記事を読むと、こんな感じのライブ配信ができるよ↓
動画:OBS で、YouTube ライブのコメントを、透過処理で表示
(Size: 889KB)

YouTubeのコメントを、OBSのライブ配信に透過で表示する方法【3ステップ】

YouTubeのコメントを、OBSのライブ配信に透明で表示する方法を、解説していきます。

今回は、「新・VIPで初心者がゲーム実況するには」さんの記事を、参考にさせていただいております。感謝です><。

【参考】【YouTube Live】全5種類、コメントを配信画面に表示する方法 。透過も可能 - 新・VIPで初心者がゲーム実況するには

今回の記事は、DTM ライブ配信記事の連載企画です。

まずは、前回までの記事「実例付き!ライブ配信画面の「外枠」を作る方法」を読んで、ライブ配信ができるところまで、できていることを前提にすすめていきます!

DTM/DAW ライブ配信時の画面のうえに、YouTube コメントを透過した状態で表示させていきます。

だれでもできるように、3ステップで説明していきますので、やってみましょう!

サウンドオルビス
サウンドオルビス
それでは、いってみよ〜!

【ステップ1】OBS Studio のブラウザ機能で、YouTube コメントを表示させる

ステップ1は、OBS Studio のブラウザ機能で、YouTube のコメントを表示させていきます。

まずは、YouTube Live のチャット URL を確認して、OBS Studio の設定をおこなう流れになっていますよ。

それでは、いってみよ〜!

YouTube Live のチャット URL をコピーする

それでは、YouTube Live のエンコーダ配信ページを、つくりましょう。

Youtube start livestream

YouTube の画面で、ライブ配信を開始 をクリックします。

ワンポイントアドバイス

まずはコメントを表示させるために、YouTubeのチャット画面の URL を取得します。「ライブ配信を開始」のボタンをおさないかぎり、いきなりライブ配信がスタートしないはずですので、ご安心ください。

Youtubelive newencorder leftside

ライブ配信の管理ページの左サイドバーにあるエンコーダ配信 を、クリックします。

Youtubelive newencordersetting

新しいエンコーダ配信の項目を設定したら、エンコーダ配信を作成 をクリックします。

Ylive setting comment1

ライブ配信の管理画面の右上に、注目してください。

チャットの文字列みぎの 三点リーダーをクリックしてください。

Ylive setting comment2

チャットをポップアウト を、クリックします。

Ylive setting comment3

別窓でチャットウィンドウが、ポップアップします。

ウィンドウ上部にある「URL」を、コピーしておいてください。これを、OBS Studio のブラウザ機能の「URL」に貼り付けていきますよ!

OBS Studio の設定

それでは、OBS Studio をひらいてください。

Obs comment display1

前回までの記事で、OBS Studio でこんな感じの画面までできました。

気になる人は、「実例付き!ライブ配信画面の「外枠」を作る方法」を、ごらんください。

Obs source browser1

OBS Studio のソースタブのしたにあるブラウザ をクリックしてください。

Obs source browser2

ブラウザの新規作成の画面が、でてきました。名前は、わかりやすく「コメント」としておきましょう。

Obs source browser property

ブラウザのプロパティ画面が、でてきました。

変更する箇所は、こんな感じです↓

ブラウザのプロパティ画面の変更するもの

Obs comments property setting

  • URL:YouTube チャットでコピーした URL
  • 幅:400
  • 高さ:600
  • カスタムCSS:ステップ2で解説
イメージは、こんな感じですよ!

Obs browser url ycomments

URL の「studio」を、「www」に置き換える必要があるとのことでしたが、わたしの環境ではそのままでも、コメントを表示させることができました。

URL は、ポップアウトしたチャットの URL を貼り付けてください。

幅・高さは、「1920×1080」のライブ配信サイズだと、「400×600」ぐらいのコメントサイズが見やすい感じがしたので、この数値。

カスタム CSS については、ステップ2で解説していきますよ。

設定がおわったら、ウィンドウ右下の OK をクリックしてください。

Obs ycomments success

ぶじに、YouTube Live のコメントを、OBS Studio のライブ配信プレビュー画面に、表示させることができました。

みやすい位置に、マウスでドラッグして配置を変更してください。

ここまでで、ステップ1の「OBS Studio のブラウザ機能で、YouTube コメントを表示させる」は、終了です。

ワンポイントアドバイス

Obs browser comments nopreview

まれに「チャットは使用できません」と、表示されることがあります。新しいエンコーダ配信ごとに、コメントのチャットアウト URL が変わるため、ライブ配信のたびに URL 変更をお忘れなく!!

【ステップ2】YouTube コメントを CSS で、透明にしよう!

ステップ2は、YouTube コメントを CSS で、透明にしていきます。

むずかしいことは、ありません。CSS は、「Chat v2.0 Style Generator 日本語版」というジェネレーターをつかえば、コピペで OK ですよ!

それでは、下記のジェネレーターサイトにアクセスしてください↓

【参考】Chat v2.0 Style Generator 日本語版

Cv2sg japan1
画像:Chat v2.0 Style Generator 日本語版より

アクセスすると、こんな感じで OBS Studio で表示する YouTube コメント欄のデザインを、自分でカスタマイズすることができます。

今回は、デフォルトのまま使用させていただきます。

とにかくページをスクロールして、いちばん下までいきましょう。

Cv2sg japan2
画像:Chat v2.0 Style Generator 日本語版より

はい、でました。一番下にある CSS を、すべて選択して「コピー」してください。

Obs comments property menu

それでは、OBS Studio のブラウザプロパティを開いてください。

開き方は、OBS のソースタブにある「コメント」に、マウスをあわせて右クリックします。

でてきたメニューの一番下にある プロパティ を、クリックですよ!

Obs comments property setting


body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

プロパティの「カスタムCSS」には、デフォルトで上記のコードが書いてあります。

上記のコードは、消してしまって OK です↓

Obs customcss clear

空っぽになったカスタム CSS に、Chat v2.0 Style Generator 日本語版でコピーした CSS コードをコピペしてください。

こんな感じで↓

Obs customcss cv2sg japan



/**********************************************************************
 * CSS生成日 : 2020/07/14 14:48:23
 * バージョン: Chat v2.0 Style Generator 日本語版 2020.05.31
 **********************************************************************/

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+SC&family=Noto+Sans+TC&family=Noto+Sans+KR&family=Noto+Sans&display=swap");

/* Background colors - 背景色 */
body {
  overflow: hidden;
  background-color: rgba(0,0,0,0);
}
/* Transparent background - 背景透過 */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: transparent !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines - 縁取り */
yt-live-chat-renderer * {
  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 18px !important;
  line-height: 20px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial !important;
}

/* Hide scrollbar - スクロールバー非表示 */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input - ヘッダーと入力欄非表示 */
#panel-pages,
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding - 余白設定 */
yt-live-chat-text-message-renderer {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-membership-item-renderer,
yt-live-chat-legacy-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-paid-message-renderer {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars - チャンネルアイコン */
yt-img-shadow #img,
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-membership-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {

  width: 24px !important;
  height: 24px !important;
  border-radius: 24px !important;
  margin-right: 6px !important;
}

/* Member Badge - モデレーター・メンバーのバッジ(アイコン)サイズ */
img.yt-live-chat-author-badge-renderer,
div #image,
svg.yt-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Emoji - 絵文字・メンバー用スタンプ */
#message > img ,
img.yt-live-chat-text-message-renderer {
  width: 24px !important;
  height: 24px !important;
}

/* Hide badges - バッジ非表示. */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-text-message-renderer #chat-badges {

  vertical-align: text-top !important;
}

/* Timestamps - 時刻表示 */
yt-live-chat-text-message-renderer #timestamp {
  display: none !important;
  color: #999999 !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 16px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
}

/* Badges - 名前・バッジの色 */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names - チャンネル名 */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 18px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}

/* チャンネル名を隠す */
yt-live-chat-author-chip {

}

/* チャンネル名の余白削除 */
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip,
yt-live-chat-author-chip {
  padding: 0px 0px;
}


yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 2px;
}

/* Messages - チャット本文 */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 18px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}


/* SuperChat/Fan Funding Messages - スーパーチャットメッセージ */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-paid-sticker-renderer #author-name,
yt-live-chat-paid-sticker-renderer #author-name *,
yt-live-chat-membership-item-renderer #author-name,
yt-live-chat-membership-item-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 20px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-paid-sticker-renderer #purchase-amount-chip,
yt-live-chat-paid-sticker-renderer #purchase-amount-chip *,
yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext *,
yt-live-chat-donation-announcement-renderer #text,
yt-live-chat-donation-announcement-renderer #text *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 18px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
}

yt-formatted-string,
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content *,
yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext * {
  color: #ffffff !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-size: 18px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
}

yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif;
  font-weight: 500 !important;
}

yt-live-chat-mode-change-message-renderer, 
yt-live-chat-viewer-engagement-message-renderer, 
yt-live-chat-server-error-message, 
yt-live-chat-banner-manager,
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}
/* アニメーションの設定 */
/* チャット欄をすごく小さくした時に表示を崩れないようにする */

カスタム CSS に貼り付ける CSS は、「Chat v2.0 Style Generator 日本語版」をごらんいただけましたら幸いです。

もしも、みてもコードがわからない場合は、実際にわたしが貼り付けた「Chat v2.0 Style Generator 日本語版」デフォルトの CSS コードを残しておきますので、参考にしてください。

設定がおわったら、プロパティウィンドウ右下の OK をクリックしてください。

Obs nocomments

赤い枠の部分が、YouTube Live のコメント部分になります。

コメントがない場合は、完全な透明な状態で表示されていますね。

それでは実際に、チャット欄でコメントを自分で入力してみましょう。テストは、大事ですからね。

Obs ycomment Transparent

はい。というわけで、無事に OBS Studio のライブ配信画面に、YouTube Live のコメントを透明で表示させることができました。

あとは、実際にステップ3でライブ配信していくだけですね。

ここまでで、ステップ2の「YouTube コメントを CSS で、透明にしよう!」は、完了です。

【ステップ3】YouTube コメントを、画面に重ねて配信してみよう

ステップ3では、実際にYouTube コメントを、画面に重ねて配信してみましょう。

新しくエンコーダ配信を作成しているので、「ストリームキー・ストリームURL」を、OBS Studio の設定画面で適用させて、配信開始のボタンをおすだけですね!

YouTube ライブ配信のはじめ方は、「MacでDAWの画面を音入りでライブ配信する方法 - 【ステップ3】実際に DTM ライブ配信をやってみる」を、読んでみてください。

無事にライブ配信できると、こんな感じの動画を、ライブ配信にのせることができますよ↓

動画:OBS で、YouTube ライブのコメントを、透過処理で表示
(Size: 889KB)

これで、ライブ配信中に、チャットのコメント機能をみんなで共有できて、いっしょに盛り上がることができますね!

ここまでで、ステップ3「YouTube コメントを、画面に重ねて配信してみよう」は、完了です。

YouTubeのコメントを、OBSのライブ配信に透明で表示する方法まとめ

まとめの画像

YouTubeのコメントを、OBSのライブ配信に透明で表示する方法について、解説してきました。

まとめると、こんな感じです↓

3ステップのまとめ
  • 【ステップ1】OBS Studio のブラウザ機能で、YouTube コメントを表示させる
  • 【ステップ2】YouTube コメントを CSS で、透明にしよう!
  • 【ステップ3】YouTube コメントを、画面に重ねて配信してみよう

あらためて、ステップ1から挑戦して、ライブ配信に透過した YouTube Live のコメントを表示させてみましょう!

【記事上まで移動するリンク↓】
YouTubeのコメントを、OBSのライブ配信に透明で表示する方法【3ステップ】

第6回目のライブ配信講座、ちょっと作業がおおかったですね。ぶじにライブ配信で、コメントを表示できたでしょうか?

サウンドオルビス
サウンドオルビス
それじゃあ、今回はこの辺で!?この記事が、あなたの悩みを解決できていたらうれしいです。

そのほか、DTM ライブ配信する人向けに、やり方を基礎から解説している記事をご用意しております。

Mac でライブ配信やってみたい人は、ぜひチェックしてみてくださいね↓

【連載記事まとめ】Macでやる!!DTMライブ配信講座

サウンドオルビス

3,068,233 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事