OBS+マルチコメントビューアーでYouTubeとTwitchのコメントを分けて表示する方法についての備忘録

あとで絶対忘れるので、備忘録ついでに書いておきます

この記事では、OBSでマルチコメントビューアーを使ってコメジェネ連携でコメント表示する際にYouTubeとTwitchのコメントを別々に表示したい場合のやり方についてお話していきます

YouTubeとTwitchで同時配信をしていて、OBS+マルチコメントビューアーで配信をしている方にはもしかしたらお役に立てるかもしれません

前提として用意するもの

用意するものというよりは、この環境の方はこうやるといいよという感じの内容です

筆者の環境はこうだったのでこうやったっていう備忘録なので、他のツールの方がもっと良いやり方があるかもしれませんがそこはご了承ください

必要なものは３つ

このうち普段の配信で起動する必要があるのはOBSとマルチコメントビューアーの２つだけ（とVOICEVOXなどの読み上げソフト）です

HTML5コメントジェネレーターはアプリとして別途起動する必要はありません

コメントを配信画面に映す基本的な方法について

最初のステップとしてコメントをまず配信に映す方法からやっていきます

ざっくりとした手順は以下

これらの手順については検索などしたらたくさんやり方が出てくると思うので割愛します

筆者は↓こちらの記事を参考にしました

外部リンク（新・VIPで初心者がゲーム実況するには.様）
>>【2026年7月最新】マルチコメントビューアの使い方と、コメント読み上げ方法

まずはここまでの段階が出来たら次へ進んでいきましょう

このままのやり方では１つの配信プラットフォームでやる分には良いのですが、YouTubeとTwitchのコメントが混ざった状態で表示されてしまいます

次の段階でYouTubeとTwitchのコメントを別々に表示する設定をしていきます

YouTubeとTwitchのコメントを別々に表示する設定について

①OBSで読み込むブラウザソースを２つ作る

すでに作ってあるコメント表示のブラウザソースと同じような形のものをもう１個作りましょう

この時「既存を追加」ではなく「新規作成」で作るようにしましょう

そうしないと既存のものと同期してしまうので、別々のローカルファイルを読み込んでももう１つのブラウザソースも上書きされて同じものを読み込んでしまうためです

２つ目のブラウザソースの幅と高さ（いじってあればカスタムCSSも）を元あるコメント表示と同じかお好きなように変えたら一旦そのままにして、読み込むローカルファイルを作る作業に移りましょう

②HTML5コメジェネのYouTube用とTwitch用のローカルファイルを用意する

ここからはちょっと面倒なことをやります

まずHTML5コメントジェネレーターのなんかいろんなファイルが入っているフォルダ（hcg_0_0_8b → CommentGenerator0.0.8b）を開きます

置いてある場所がわからない場合、すでに動作しているコメント表示のブラウザソースがあるならプロパティ→ローカルファイルを確認すれば場所がなんとなくわかるかと思います

見つけたら「CommentGenerator_multi」HTMLドキュメントをコピーし、どこでも良いので貼り付けて複製を２つ作ります

この複製をYouTube用、Twitch用のOBSで読み込むローカルファイルに設定するので、名前を自分がわかるように例えば

といったように変えておきます

元からあった「CommentGenerator_multi」HTMLドキュメントは、設定をミスった時や元に戻したい時のリカバリー用にそのまま残しておきましょう

③YouTube用とTwitch用のHTMLドキュメントの中身をちょっといじる

今のままだとローカルファイルで読み込んでも両方YouTubeとTwitchのコメントが混ざったものが表示されてしまうので、それぞれのHTMLドキュメントにYouTubeのみ、Twitchのみを読み込む設定をしていきます

まずYouTube用に作ったHTMLドキュメント、例えば前項目の名前で言えば「CommentGenerator_multi - YT」を、新規作成したメモ帳にドラッグアンドドロップします

するとこのような感じになります

メモ帳でなくともコード編集出来るならなんでも良いです

「Ctrl+Fキー」を押すと検索が出来るので「//ここから」と入力して書いてある箇所を探します

上の画像の緑枠で囲ってある「//ここから」から「//ここまでを追記しただけ」をまるごと以下に置き換えて「ファイル→保存」で上書き保存します

// YouTube以外のコメントは表示しない
if (xml[i].getAttributeNode("service").value != "youtubelive") {
	continue;
}

//ここから
if(xml[i].getAttributeNode("service").value == "nicolive") {
	handle = "【ニコ生】" + handle;
} else if(xml[i].getAttributeNode("service").value == "youtubelive") {
	handle = "【YouTube】" + handle;
} else if(xml[i].getAttributeNode("service").value == "twitch") {
	handle = "【twitch】" + handle;
} else if(xml[i].getAttributeNode("service").value == "FRESH") {
	handle = "【FRESH!】" + handle;
} else if(xml[i].getAttributeNode("service").value == "AbemaFresh") {
	handle = "【FRESH!】" + handle;
} else if(xml[i].getAttributeNode("service").value == "OPENREC") {
	handle = "【OPENREC】" + handle;
} else if(xml[i].getAttributeNode("service").value == "Mixer") {
	handle = "【Mixer】" + handle;
}
//ここまでを追記しただけ

Twitch用のHTMLドキュメントも同じように「//ここから」から「//ここまでを追記しただけ」をまるごと以下に置き換えて「ファイル→保存」で上書き保存します

// Twitch以外のコメントは表示しない
if (xml[i].getAttributeNode("service").value != "twitch") {
	continue;
}

//ここから
if(xml[i].getAttributeNode("service").value == "nicolive") {
	handle = "【ニコ生】" + handle;
} else if(xml[i].getAttributeNode("service").value == "youtubelive") {
	handle = "【YouTube】" + handle;
} else if(xml[i].getAttributeNode("service").value == "twitch") {
	handle = "【twitch】" + handle;
} else if(xml[i].getAttributeNode("service").value == "FRESH") {
	handle = "【FRESH!】" + handle;
} else if(xml[i].getAttributeNode("service").value == "AbemaFresh") {
	handle = "【FRESH!】" + handle;
} else if(xml[i].getAttributeNode("service").value == "OPENREC") {
	handle = "【OPENREC】" + handle;
} else if(xml[i].getAttributeNode("service").value == "Mixer") {
	handle = "【Mixer】" + handle;
}
//ここまでを追記しただけ

※実際には以下の部分を「//ここから」の前に追加するだけでも動作しますが、操作ミスを防ぐため本記事では該当部分を丸ごと置き換える方法でご説明しています。各自やりやすい方法でお願いします

// YouTube以外のコメントは表示しない
if (xml[i].getAttributeNode("service").value != "youtubelive") {
	continue;
}

// Twitch以外のコメントは表示しない
if (xml[i].getAttributeNode("service").value != "twitch") {
	continue;
}

④OBSでブラウザソースに設定を変更したYouTube用、Twitch用のローカルファイルを設定する

①の段階で作ったOBSのコメント表示用ブラウザソース２つに先程作った２つのHTMLドキュメントをローカルファイルとして設定していきます

それぞれのブラウザソースのプロパティからローカルファイルにチェックを入れて、ローカルファイルの参照から

YouTubeのコメントを表示したいブラウザソースには「CommentGenerator_multi - YT」
Twitchのコメントを表示したいブラウザソースには「CommentGenerator_multi - TW」

を設定しましょう

⑤設定がきちんと反映出来ているかテストする

ここまでやったら一旦OBSとマルチコメントビューアーを閉じてから再度開きます

その後、他人の配信で良いのでコメントが流れている配信のURLをお借りして、YouTube用、Twitch用のブラウザソースできちんと別々のコメントが表示されるかテストしてみましょう

※HTMLを書き換えてもOBS側へすぐ反映されない場合があるため、本記事ではOBSとマルチコメントビューアーを一度閉じて再起動しています

筆者の場合はこれでYouTubeとTwitchのコメントを別々に表示できるようになりました

少しでも参考になると幸いです