コメジェネでOBS配信にコメントを映す方法|ダウンロードから連携方法まで

最終更新 2024-07-23
コメジェネでOBSにコメントを映す

目次

HTML5コメントジェネレーター(コメジェネ)で配信にコメントを映す

HTML5コメントジェネレーター(コメジェネ)というソフトを利用することで、OBSの配信画面上にコメントを映すことができ、配信に華やかさを加えることができるのをご存じでしょうか?デザインを変えることで、自分の配信の世界観に合わせた表示にすることも可能になります。本記事では、コメジェネのダウンロードから実際にコメントを表示する方法までを詳しく解説させていただきます。是非参考にしていただき、配信をレベルアップさせましょう。

OBSにコメントを表示させる方法|YouTube/Twitchの配信でコメント欄を画面に表示

①必要なソフトのダウンロード

HTML5コメントジェネレーター(コメジェネ)のダウンロード

まず公式サイトからコメジェネをダウンロードします。最新の「hcg_0_0_8b.zip」をクリックしてください。
コメジェネダウンロードページ
1-コメジェネダウンロードページ
zipファイルを展開し、そのフォルダを任意の場所に保存してください。

OBS Studioのダウンロード

この記事にたどり着いた時点でOBS Studioを既に利用中、またはインストール済みの方も多いと思いますが、OBS Studioのダウンロード方法も確認しましょう。

公式サイトにアクセスしていただき、PCのOSを選択してダウンロードしてください。

OBS Studio公式サイト

2-OBS公式サイト

ダウンロードしたファイルを開くとインストーラーが起動しますので、指示に従って進めていけばインストールが完了します。

【OBS Studioの使い方】初めてOBSを使う方にも!OBSの初期設定から配信・録画を行う方法を解説

マルチコメントビューア(マルチコメビュ)のダウンロード

次に、マルチコメントビューアというソフトをダウンロードします。

まず公式サイトからマルチコメビュをダウンロードします。
マルチコメビュダウンロードページ
3-マルチコメビュダウンロードページ
zipファイルを展開し、そのフォルダを任意の場所に保存してください。

このソフトは、コメントのデータをコメジェネに受け渡しする役割のものですので、コメントを配信画面に表示するには必須のソフトになります。他にも同じ役割を果たせるソフトはありますが、マルチコメビュは沢山の配信サイトに対応していますので、こだわりが無ければマルチコメビュを利用しましょう。

②各ソフトを連携

HTML5コメントジェネレーター(コメジェネ)

zipファイルを展開した中にある「CommentGenerator0.0.8b」フォルダの中の「hcg_setting.exe」をダブルクリックして起動してください。
4-コメジェネ設定ファイルの場所

開いたウィンドウの参照ボタンをクリックし、「CommentGenerator0.0.8b」フォルダを指定してOKをクリックします。
5-コメジェネ設定パネル1

参照ボタンの下に、指定したフォルダの場所が表示されていれば成功です。
6-コメジェネ設定パネル2

OBS Studio

次にOBS側の設定を行ないます。

ソースパネルの「+」をクリックし、「ブラウザ」を選択してください。
7-OBSソースパネル

「コメジェネ」など分かりやすい名前をつけて、OKをクリックしましょう。
8-ソース作成画面

開いたプロパティパネル内の「ローカルファイル」にチェックを入れて、「参照」ボタンをクリックし、先ほど保存した「CommentGenerator0.0.8b」フォルダ内の「CommentGenerator.html」を選択してください。幅と高さをそれぞれ「520」「150」に変更してください。
9-ソースプロパティ

最後にOKをクリックし、プロパティパネルを閉じてください。

マルチコメントビューア(マルチコメビュ)

マルチコメビュ側の設定をしていきます。

マルチコメビュの項で保存したフォルダの中にある「MultiCommentViewer.exe」を起動してください。上部メニューの「プラグイン」から「コメジェネ連携」を選択しましょう。
10-マルチコメビュ連携1

開いたパネルの「HTML5コメジェネと連携」にチェックを入れ、パネルを閉じてください。
11-マルチコメビュ連携2

③コメントが映っているかのテスト

以上で設定は完了ですので、実際の配信画面にコメントが表示されるか確認しましょう。

自分が配信外でも、他人の配信を使ってのテストが可能です。コメントが多い大手の配信がテストしやすいでしょう。

マルチコメビュの「サイト」「ブラウザ」を選択し、テストする配信のURLを「URL,放送ID等」の欄に貼り付けてください。「接続」をクリックしてテスト開始です。
12-コメントテスト1

少し待って、マルチコメビュと配信画面にコメントが表示されれば成功です。
13-コメントテスト2

画像はコメントの背景に色を付ける設定をした後のものになります。

「ロード失敗」というエラー表示が出た場合

コメジェネのバージョンによっては「ロード失敗」というエラー表示が出てコメントの読み込みが止まる場合があります。「0.0.8a」で発生が確認されているようです。

その場合は、まずマルチコメビュのフォルダ内の「CommentGenerator.html」を、windows純正の「メモ帳」で開いてください(右クリック > プログラムから開く > メモ帳)。

この時、表示された文章を変更してしまうとうまく動作しなくなる恐れがありますので、手順に書いた作業以外は行なわないように気を付けましょう。

メモ帳の「編集」から「置換」を選択していただき、検索する欄に「alert("ロード失敗");」、置換欄に「//alert("ロード失敗");」と入力してください。記事の文章をそのままコピペするのがオススメです。そのあと「置換」ボタンをクリックし、ファイルを保存して閉じてください。

14-ロードエラー修正1

15-ロードエラー修正2

④コメントのデザインの変え方

テスト表示の画像のように、コメントの装飾をすることが可能です。

コメジェネの場所を設定した時と同じように、フォルダ「CommentGenerator0.0.8b」内にある「hcg_setting.exe」を開いてください。

文字の色、文字の縁取りの色、背景の色などが変更でき、背景に用意されているスキンを適用することもできます。スキンについては、「CommentGenerator0.0.8b」内にある「skins」フォルダ内から選べます。

16-コメントデザイン設定

テストしながら「適用」をクリックすると、リアルタイムで表示を確認できますので、確定したらOKをクリックして設定を閉じましょう。

もっと手軽にコメントをOBSに表示させる方法

YouTubeやTwitchで視聴者やコメントを管理できるCastCraftにも、OBSへのコメント表示機能が搭載されております。
こちらはデザインやエフェクト設定を非常に簡単に行えますので、設定方法をご紹介します。

触れるコメビュ

1. CastCraftをインストールし、CastCraft ScreenをOBS等に追加

  1. CastCraftをダウンロードし、インストールを実行した後、デスクトップの右上からログイン

CastCraftのダウンロードページ

  1. CastCraftデスクトップアプリ内の「Screen」タブからダウンロードボタンを押し、ダウンロードしたファイルを実行
  2. OBS等にて「映像キャプチャデバイス」(もしくは「ビデオキャプチャデバイス」)ソース を追加し、デバイス選択で「CastCraft Screen」を選択(下図)

OBS_video_capture_device
映像キャプチャデバイスに「CastCraft Screen」の表示がされない方はこちらをご確認ください。

2. Screenを起動

CastCraftのアプリ内で「Screen」タブをクリックし、Screenを起動します。
(※初回の起動には時間がかかります。)

3. キャストモードで試運転

上部のバーを「キャストモード」にします。

キャストモード

「デモメッセージを流す」と言うトグルをONにしてみてください。配信中のコメントが画面上にどのように表示されるかが見られます。

デモメッセージを流す   

流れているコメントをScreen上でクリックしてみましょう。そのコメントが画面上の別の場所にピックアップ表示されます。  

4. 配信中の操作

  • 「デモメッセージを流す」をOFFにして、配信で実際に使ってみましょう。
  • 利用時は 「キャストモード」 にしておく必要があります。
  • CastCraftを配信に接続すれば、Screenにもコメントが反映されます

CastCraftのLiveDashboardで配信に接続する方法

  • 話題にしたいコメントをクリックしたり、固定したり、ドラッグで動かして視聴者との会話を楽しみましょう

5. クラフトモードでウィジェットのカスタマイズ

上部のバーを「クラフトモード」にすれば、「チャットボックス」「ピックアップ」ウィジェットの大きさや位置、デザインのカスタマイズができます。

クラフトモード

  • 「チャットボックス」はコメントが流れる場所を示します
  • 「ピックアップ出現エリア」はチャットボックス内でコメントをクリックしたときに、そのコメントが固定表示される場所を示します

プレビュー表示の緑色の囲い枠を使って、各ウィジェットの位置と大きさを調整します。

ウィジェットの位置と大きさ   

6. ウィジェットのデザイン

「ウィジェット設定」タブを選択します。

ウイジェット設定

各ウィジェットの「設定」ボタンを押すとデザインが詳細に設定できます。

ウィジェット一覧‗設定   

自分で一からデザインすることもできますし、「プリセット選択」というドロップダウンメニューを押すと既存のいくつかのデザインを選択することも可能です。

プリセット選択

「チャットボックス」ウィジェットの「チャットアイテム設定」をカスタマイズするときは、「デモメッセージを流す」をONにしておくとデザインを反映させながら設定を作れます

チャットアイテム設定

左側のプレビューを見ながら設定をカスタマイズし、自分なりのデザインが完成したら、新しいプリセットとして保存できます。

プリセット保存

以上の設定でコメント表示が可能で、デザインの設定もプリセットで簡単に、または自分で詳細な設定も行えます。

加えて画像を表示したりアンケートを取る機能から、視聴者さんにメモを追加して忘れないようにする機能など、一つのアプリで沢山の機能を利用することが可能ですので、是非一度インストールしてみてください。

CastCraft公式サイト

コメントで配信画面を彩ろう!

コメントを配信画面に表示することは、設定の手間を差し引いても大きなメリットがあります。視聴者に「配信に参加している」という印象を与え、配信者との距離が縮まりますし、後で切り抜きの動画を作成する場合にも有効です。デザインにこだわることで配信を個性的にすることもできます。最初の設定に多少手間取ることがあっても、一度表示してしまえば毎回細かい設定を行う必要もなくなります。是非本記事を参考に、コメントを配信画面に表示し、配信画面を彩りましょう。

配信をより面白くするために

配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。

大きく分けて、  

  • 視聴者を覚えるYouTube/Twitchコメビュ
  • 配信画面演出のScreen
  • 収益化のための機能

の三つの機能があり、それぞれ下記のような目的があります。

機能 目的
YouTube/Twitchコメビュ 視聴者が配信に馴染めるようなやり取りをサポート
Screen 視聴者とのやり取りを視覚的に楽しくする
収益化 視聴者を大事にする形で収益化する

CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
CRM候補1

特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
ペンライト

さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
収益管理

CastCraftは上記のような機能により、配信者(ゲーム配信者やVtuber)が視聴者との関係を深めることを手助けします。

導入している配信者さんの事例としては、

等がいらっしゃいます。

導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。

CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。

CastCraftのダウンロードページ(利用無料)