【OBS対応】コメントウィジェット

【OBS対応】コメントウィジェット
コメントウィジェットは、YouTubeライブのチャットを自分のデザインで配信画面に表示できるOBS対応のウィジェットです。コメントはYouTube公式のAPIで取得し、コントローラーに配信のURLを貼り付けて接続するだけで使えます。

OBSで使えるコメントウィジェット

コメントウィジェットは、YouTubeライブのチャットを自分のデザインで配信画面に表示できるOBS用ウィジェットです。コメントの取得にはYouTube公式のAPI(YouTube Data API)を使うため、Googleアカウントの連携や配信者側の設定変更は必要ありません。

使い方は、コントローラーに配信のURLを貼り付けて「接続」を押し、発行された専用URLをOBSの「ブラウザ」ソースに追加するだけです。フォント・文字色・ボックスの塗りや枠線まで調整できるので、コメント欄をそのまま映すのではなく、配信画面の雰囲気に合わせた見た目で見せられます。

コメントウィジェットはプロプラン以上の機能で、現在は先行アクセスとして受付のみ行っています。プロプラン以上のチャンネルであれば、ウィジェット一覧の作成ギャラリーにあるコメントのカードから先行アクセスを希望できます。ご利用いただける状態になりましたら、ご登録のメールアドレスにお知らせします。

YouTubeライブに接続する

どの配信のチャットを表示するかは、コメントコントローラーで指定します。コントローラーは編集画面の下に表示されるほか、OBS連携から別ウィンドウで開いたり、QRコードを読み取ってスマートフォンから開いたりできます。

配信のURLを入力欄に貼り付けて「接続」を押すと接続が完了します。通常の視聴URL(youtube.com/watch?v=…)のほか、youtu.be の短縮URL、youtube.com/live/… の形式、動画ID(11文字)そのままの入力にも対応しています。接続すると動画IDと接続日時が表示され、「YouTubeで開く」から接続先の配信ページを確認できます。

対応しているのは、YouTube上で公開されているライブ配信のライブチャットです。また、接続できるのはライブチャットが開いている配信だけなので、配信の終了後やアーカイブ、通常の動画のURLを指定すると「この動画では現在ライブチャットが開いていません」と表示されます。

配信が終わるとコメントの取得は自動的に止まり、そのままでは再開しません。次の配信を表示するときは、新しい配信のURLを貼り付けて接続し直してください。同じ配信のはずなのにコメントが流れてこないときは、「再接続」を押すと取得をやり直せます。表示をやめたいときは「切断」を押すと接続が解除されます。

表示をカスタマイズする

デザインはウィジェットの編集画面で設定します。まずは「テンプレートから選択」で用意されたデザインを選び、そこから細かいところを調整していくのが手早い進め方です。

設定できるのは主に次の項目です。

  • 表示 — コメントどうしの行間
  • ウィジェット全体のボックス — 見出しは「ボックススタイル」。コメント一覧を囲むパネルの塗り・枠線・角丸・余白、幅と高さ
  • 各コメント — 「コメントのボックス」で1件ごとの塗り・枠線・角丸・余白・シャドウ、「本文」と「投稿者名」でフォント・文字間隔・文字色・境界線・シャドウ
  • 投稿者名の位置 — 「投稿者名」の中の「位置」。本文と同じ行に並べる「行内」か、本文の上に置く「コメントの上」
  • 上書き設定 — コメントの種類や投稿者の役割ごとに、ボックスとテキストの設定を上書き

上書き設定では、メンバー加入とスーパーチャットを本文とは別のデザインで目立たせられます。スーパーチャットは「額ごと」を選ぶと金額帯ごとに色を変えられ、「1色」を選ぶと金額にかかわらず同じ色になります。

投稿者名は、オーナー・モデレーター・メンバーの役割ごとに色などを上書きできます。すべての役割を「なし」にしておけば、役割による色分けをしない見せ方にもできます。

YouTubeのロゴについて

配信画面には、YouTubeのロゴが表示されます。YouTubeから取得したコメントを表示していることを明確にするための表示です。ロゴはコメント枠の外側の右下に小さく表示され、設定で非表示にすることはできません。ロゴをクリックすると接続中の配信ページが開きます。

参考: YouTube API Services の Developer Policies

取得する情報と取り扱い

コメントウィジェットが取得するのは、接続を指示した配信についてYouTube上で公開されているライブチャットの情報だけです。具体的には、コメントの本文と投稿日時、投稿者の表示名・アイコン画像のURL・チャンネルID、投稿者の属性(配信者・モデレーター・メンバー・確認済みチャンネルの別)、スーパーチャットやメンバーシップに関するイベントの情報、接続先を特定するための情報(動画ID、ライブチャットID)です。いずれもYouTube上で公開されている情報で、ユーザー本人のYouTubeアカウントへ当社が接続することはありません。

取得したライブチャットの情報は、配信画面へ表示するための中継にのみ使用し、当社のデータベースには保存しません。中継のため、当社のサーバーのメモリ上で直近の一定件数のみを一時的に保持し、配信の終了または接続の解除により削除されます。なお、接続先を特定するための情報(動画ID、ライブチャットID、接続日時)は、コメントの内容とは別にウィジェットの設定として保存し、接続を解除するかウィジェットを削除すると失われます。

投稿者がYouTube上でコメントを削除した場合、または投稿者が配信からブロックされた場合は、YouTubeから通知を受けて、配信画面上の該当する表示を速やかに取り除きます。取り扱いの詳細はプライバシーポリシーに記載しています。

OBSのブラウザソースに貼るだけで使える

作成したコメントウィジェットは専用URLとして発行されます。OBSでブラウザソースを追加し、そのURLを設定すると配信画面に表示できます。配信レイアウトに合わせてOBS側でサイズや位置を調整できるため、ゲーム画面やカメラ映像とのバランスを見ながら配置できます。

OBSへの追加は最初の一度だけです。配信ごとに行うのは、コントローラーに配信のURLを貼り付けて「接続」を押す操作だけで、OBS側の設定はそのまま使い続けられます。ブラウザソースに対応した配信ソフトであれば、OBS以外でも表示できます。

OBSへの追加手順をステップごとに確認したい場合は、Jamlucaの使い方を参考にしてください。

コメントウィジェットが向いている配信シーン

  • 配信画面の雰囲気に合わせたデザインでコメントを見せたい
  • ゲーム画面や映像を見ながら、視聴者のコメントも追えるようにしたい
  • スーパーチャットやメンバー加入を目立たせて感謝を伝えたい
  • モデレーターやメンバーの発言を色で見分けられるようにしたい
  • 雑談配信や作業配信で、コメントを画面の主役として見せたい
  • アーカイブや切り抜きにも、コメントを映像として残したい
テンプレートや機能の詳細は製品ページで紹介しています。プロプラン以上のチャンネルでβ版先行アクセスを受付中です。
コメントウィジェットを使ってみる