【OBS対応】コメントウィジェット
OBSで使えるコメントウィジェット
コメントウィジェットは、YouTubeライブのチャットを自分のデザインで配信画面に表示できるOBS用ウィジェットです。コメントの取得にはYouTube公式のAPI（YouTube Data API）を使うため、Googleアカウントの連携や配信者側の設定変更は必要ありません。
使い方は、コントローラーに配信のURLを貼り付けて「接続」を押し、発行された専用URLをOBSの「ブラウザ」ソースに追加するだけです。
フォント・文字色・ボックスの塗りや枠線まで調整できるので、コメント欄をそのまま映すのではなく、配信画面の雰囲気に合わせた見た目で見せられます。
YouTubeライブに接続する
どの配信のチャットを表示するかは、コメントコントローラーで指定します。接続の手順は次のとおりです。
- コメントコントローラーを開きます。編集画面の下に表示されるほか、OBS連携から別ウィンドウで開いたり、QRコードを読み取ってスマートフォンから開いたりできます。
- 配信のURLを入力欄に貼り付けます。
- 「接続」を押します。
コメントコントローラーの入力欄に配信のURLを貼り付けて「接続」を押すと、その配信のチャットが表示されます。
入力欄には、次の形式を貼り付けられます。
- 通常の視聴URL（youtube.com/watch?v=…）
- youtu.be の短縮URL
- youtube.com/live/… の形式
- 動画ID（11文字）そのまま
接続すると、動画IDと接続日時が表示されます。「YouTubeで開く」から接続先の配信ページを確認できます。
対応しているのは、YouTube上で公開されているライブ配信のライブチャットです。接続できるのはライブチャットが開いている配信だけなので、配信の終了後やアーカイブ、通常の動画のURLを指定すると「この動画では現在ライブチャットが開いていません」と表示されます。
配信が終わるとコメントの取得は自動的に止まり、そのままでは再開しません。
- 次の配信を表示するときは、新しい配信のURLを貼り付けて接続し直します。
- 同じ配信のはずなのにコメントが流れてこないときは、「再接続」を押すと取得をやり直せます。
- 表示をやめたいときは、「切断」を押すと接続が解除されます。
表示をカスタマイズする
デザインはウィジェットの編集画面で設定します。まずは「テンプレートから選択」で用意されたデザインを選び、そこから細かいところを調整していくのが手早い進め方です。
編集画面の右側には、コメント一覧全体の「ボックススタイル」と、コメントの種類ごとの「コメントのスタイル」が並んでいます。
右側の上がボックススタイル（コメント一覧を囲むパネル）、その下に流れる向きとコメントのスタイルの 6 つのボタンが並びます。
ボックススタイル
「ボックススタイル」は、コメント一覧を囲むパネルの設定です。
- パネルの塗り・枠線・角丸・パディング
- 幅と高さ
- コメントの「揃え」と、コメントどうしの「間隔」
その下の「流れる向き」では、新着コメントが入る側と、コメントが流れていく向きを 4 つのアイコンから選びます。棒の側から入り、矢印の向きに流れます。
コメントのスタイル（編集パネル）
「コメントのスタイル」には、「通常のコメント」「メンバーシップ」「スーパーチャット」「オーナー」「モデレーター」「メンバー」の 6 つが並んでいます。どれを押しても同じ編集パネルが開きます。
編集パネルの左は並べ替え用のプレビュー、右はタブで切り替える設定です。投稿者名と本文は、プレビューへドラッグして置き場所を決められます。プレビューで要素を押すと対応するタブへ移り、タブを押すとその要素が選ばれます。
「通常のコメント」を押すと開く編集パネル。左のプレビューで並びを決め、右のタブで細かい見た目を設定します。
タブごとに設定できる項目は次のとおりです。
- 「全体」タブ — 縦 / 横・「本文と同じ行」・揃え・寄せ・間隔と、1 件ごとの塗り・枠線・角丸・パディング・シャドウ
- 「本文」「投稿者名」タブ — フォント・文字間隔・文字色・境界線・シャドウ
- 「本文」タブだけ — 折り返した行を左 / 中央 / 右へ寄せる「文字揃え」と、本文だけを内側へ寄せる「マージン」
枠線には、太さと「辺」「線種」のメニューが並びます。色を付けるまでは操作できません。
- 「辺」は、すべて / 上 / 右 / 下 / 左 / カスタムから選びます。
- 「カスタム」を選ぶと、辺ごとに太さを決められます。0 にした辺は描かれません。
- 「線種」は、実線 / 破線 / 点線から選びます。
投稿者名とスーパーチャットの金額は、行の箱の中だけでなく、箱の上 / 下にも置けます。
- プレビューの行の上下へドラッグするか、「投稿者名」「金額」タブの「配置」から選びます。
- 左右の位置は、左・中央・右から選べます。
- 同じ側に両方を置くと 1 行に並び、それぞれ左・中央・右を選べます。
補足
- 本文のフォント・文字間隔とマージンは、スーパーチャット・メンバーシップ・「オーナー」「モデレーター」「メンバー」の「本文」タブでも上書きできます。未設定なら通常のコメントの「本文」タブの値になります。
- 塗りか枠線のあるコメント 1 件の箱とグループの箱では、中身が常に角丸の形で切り取られます。箱からはみ出させたい要素は、箱の外に置いてから「ずらし」で重ねます。
フォント
フォントは「本文」「投稿者名」「金額」「メンバーシップ」の各タブで、書体・太さ・斜体を組にして選びます。選んだフォントは、その要素だけに効きます。
- 文字サイズは、通常のコメントの「全体」タブで決めます。
- 「金額」タブでは、フォント（書体・太さ・斜体・文字間隔）も本文とは別に指定できます。
- メンバーシップ・スーパーチャット・「オーナー」「モデレーター」「メンバー」のタブは、未設定なら通常のコメントの同じタブのフォントに従います。「通常のコメントのフォントを引き継ぐ」で戻せます。
補足
- メンバーシップ・スーパーチャットの「投稿者名」タブの「テキストスタイル」（フォント・文字色・シャドウ・境界線）も、その種類だけの設定です。
- 設定していない項目は、ボックスの中では「色の付け方」、ボックスの外では通常のコメントの投稿者名に従います。
- シャドウ・境界線は、目のアイコンで描かないようにできます。
装飾
「全体」タブの「装飾」で、コメント 1 件の箱にアイコン・線・画像を合わせて 8 個まで重ねられます。「＋ 装飾を追加」から種類を選びます。
左下のハートのアイコン、下辺の波線、右上の画像（星）を重ねた例。追加した装飾は「装飾」の一覧に並び、行を開くと位置や大きさを変えられます。
位置は、どの種類も「起点」と、そこからの X / Y で決めます。X は右、Y は下が + です。アイコンと画像の起点は箱の 9 か所、線の起点は各辺の中点です。
左がアイコン・画像の起点（9 か所）、右が線の起点（各辺の中点）です。右上の起点から X を +、Y を − にずらすと、星のように箱の右上の外へ置けます。
重ねる側は「箱の上」「箱の下」から選びます。箱の外へはみ出して置いても切り取られません。
アイコン
- 「アイコン」から「Fluent Emoji」か「Tabler Icons」のアイコンを選びます。
- 起点からの位置・サイズ・回転・左右反転と、重ねる側を決めます。
- プレビューのアイコンはドラッグで動かせます。押すと出る取っ手で、大きさと向きも変えられます（Shift を押しながら回すと 15° 刻み）。
- Tabler Icons のアイコンは色を選べます。未設定なら本文の色になります（引き継いだ種類でも、通常のコメントで見えている色のままです）。
- 線で描かれた Tabler Icons のアイコンは、「線の太さ」も変えられます。
線
- 「線」を選ぶと、箱の 1 辺（左 / 右 / 上 / 下）に沿った線を置けます。
- 長さは、辺の長さの % と px の補正で決めます。箱の大きさに合わせて伸び縮みします（100% と -24px なら、両端を 12px ずつ空けます）。
- 「線の種類」は、実線・破線・点線・二重線・波線・ジグザグから選べます。「太さ」は、どの種類でも線そのものの太さです。
上から実線・破線・点線・二重線・波線・ジグザグ。どれも太さは同じで、間隔は自動です。
- 破線・点線・波線・ジグザグは、「間隔」で線や点のすき間、波の山の幅を変えられます。空欄なら太さに合わせて自動で決まります。
- 端の形は、丸か四角を選べます（点線には効きません）。
- 色が未設定なら、箱の枠線の色（枠線が無ければ本文の色）になります。枠線に色を付けたスーパーチャットでは、金額帯の色に合います。
- 線は文字を避けないので、「パディング」で文字の側を空けてください。
画像
- 「画像」を選ぶと、ファイルの選択画面が開きます。アップロード済みの画像を選ぶか、新しい画像をアップロードして置けます。
- 位置・回転・左右反転・重ねる側はアイコンと同じです。大きさは「幅」で決め、高さは画像の縦横比に合わせます。
- 「画像を変更」で別の画像に差し替えられます。
- 画像の追加と差し替えは、プロプラン以上の機能です。
補足：ほかの種類への引き継ぎ
- メンバーシップ・スーパーチャット・「オーナー」「モデレーター」「メンバー」は、通常のコメントの装飾を引き継ぎます。
- そこで動かした位置など、触った項目だけがその種類の設定になります。色やアイコンなど触っていない項目は、通常のコメントを変えると一緒に変わります。
- 引き継いだ装飾を削除すると、その種類でだけ表示しなくなります。「表示する」で戻せます。
- 見出しの右端の「通常のコメントの装飾を引き継ぐ」を押すと、その種類で変えた項目も追加した装飾もすべて取り消され、通常のコメントの装飾に戻ります。
テンプレートのグリーンガーデンがアイコン、ネオンサインが線を使った例です。
スーパーチャット・メンバーシップ
メンバーシップとスーパーチャットは、本文とは別のデザインで目立たせられます。「メンバーシップ」「スーパーチャット」も同じ 1 枚の編集パネルで開き、その種類だけの並びと箱・本文・投稿者名を設定できます。
- メンバーシップなら「メンバーシップ」、スーパーチャットなら「金額」も扱えます。
- 「＋ グループ」で入れ物を作り、まとめて動かしたり、塗り・枠線・角丸・パディングを付けたりできます。グループの塗りには、行の箱と同じパターンやグラデーションも使えます。
- 3 つ以上並んでいるときに要素を別の要素の横（縦並びなら左右、横並びなら上下）へ置くと、その 2 つが自動で 1 つのグループになります。
スーパーチャットの「色の付け方」は、「スーパーチャット」を開いた見出しの行にあります。
- 「金額ごとに色分け」を選ぶと、金額帯ごとに色を変えられます。
- 「1色で固定」なら、金額にかかわらず同じ色になります。
「金額ごとに色分け」のときは、その右に「全体」と 1〜7 の選択が出ます。
「全体」ではティア 1〜7 の見本が縦に並び、金額帯ごとの色を見比べながら編集できます。
- 「全体」 — ティア 1〜7 の見本が縦に並び、金額帯ごとの色をひと目で見ながら並び・投稿者名・金額を編集できます。どの行へドラッグしても、並びは 7 行すべてに反映されます。
- ティアの番号 — その見本 1 行だけになり、「ボックス」「本文」の 2 つでそのティアの箱と文字色を設定します。
役割（オーナー・モデレーター・メンバー）
「オーナー」「モデレーター」「メンバー」も、同じ 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の使い方を参考にしてください。
コメントウィジェットが向いている配信シーン
- 配信画面の雰囲気に合わせたデザインでコメントを見せたい
- ゲーム画面や映像を見ながら、視聴者のコメントも追えるようにしたい
- スーパーチャットやメンバーシップを目立たせて感謝を伝えたい
- モデレーターやメンバーの発言を色で見分けられるようにしたい
- 雑談配信や作業配信で、コメントを画面の主役として見せたい
- アーカイブや切り抜きにも、コメントを映像として残したい