ニコニコ動画やニコニコ生放送のようにコメントを右から左に流したい！
残念ながらYouTubeやTwitchにはコメントを流す機能がありません。
しかしコメントビューアを応用してYouTubeやTwitchでもニコ生風にコメントを流す方法を見つけましたので、このブログを見てくださっている皆様に共有いたします。
ニコ生化のおおまかな流れ
細かい導入の説明の前にYouTubeコメントをニコ生風に流す際のおおまかな流れを書いておきます。
まずYouTubeのコメントをコメントビューアで取得します。そして取得したコメントをHTML5コメントジェネレーターを通して、NiCommentGeneratorのファイルに出力します。
役割としては
- マルチコメントビューアがコメントを読み込む
- HTML5コメントジェネレーターがコメントを映し出す
- NiCommentGeneratorがニコ生風に映し出すようにする
だと思っています。私は勝手にそう思っています。
ニコ生風コメントの導入手順
導入に当たってはツール間の連携が必要なので、その点も含めて私がニコ生風コメントの導入の際に行った手順を以下に記します。
HTML5コメントジェネレーターとNiCommentGeneratorを連携する
上の図とは順番が違ってしまうのですが、まずHTML5コメントジェネレーターとNiCommentGeneratorを連携してコメントをニコ生風に出力できるようにします。
HTML5コメントジェネレーターをDL
HTML5コメントジェネレーターをダウンロードします。以下「コメジェネ」と略します。
作者：kilinさん（Twitter）
ダウンロードしたら解凍します。
NiCommentGeneratorをDL
次にNiCommentGeneratorをダウンロードします。
作者：totorajさん（Twitter）
ダウンロードしたら解凍します。
コメジェネとNiCommentGeneratorを連携
先ほどダウンロード・解凍したコメジェネのフォルダ（CommentGenerator0.0.8b）に、同じく解凍したNiCommentGeneratorのフォルダ（NiCommentGenerator-master）をまるごと移動します。
これでコメジェネとNiCommentGeneratorを連携することができました。
コメントビューアとHTML5コメントジェネレーターを連携する
次にマルチコメントビュアーとコメジェネを連携して、YouTubeなどのコメントを取り込んで出力できるようにします。
マルチコメントビューアのDL
マルチコメントビューアをダウンロードします。以下「コメビュ」と略します。
作者：Ryuさん（Twitter）
ダウンロードしたら解凍します。
コメビュとコメジェネを連携
解凍したら、フォルダ内のMultiCommentViewer.exeを起動します。
起動したら「プラグイン」の「コメジェネ連携」をクリックします。そして「HTML5コメジェネと連携」のチェックボックスにチェックを入れます。
設定ファイルの場所は通常は変更しなくていいようですが、私の場合はデスクトップを整理した際に場所を変えてしまったので、設定しなおしました。もし自動で認識されなかった場合はコメジェネのフォルダの「setting.xml」を選択してください。
OBSの設定・コメントの取得
各ツールの連携は完了です。あとはコメントを取得して、出力されたものをOBS Studioなどで映せばニコ生風の配信を行うことができます。
OBSの設定
今回はOBS Studioでの設定を例にして説明します。
ソースの「+」ボタンをクリックして、ブラウザを選択します。
「ローカルファイル」にチェックマークを入れて、「参照」をクリックします。
（幅と高さについてはご自身の配信のサイズにあわせるのがおすすめです）
参照先はコメジェネのフォルダ内に入れた、NiCommentGeneratorのフォルダ（NiCommentGenerator-master）内の「NiCommentGenerator.html」です。
コメントを取得する
最後にコメビュでコメントを取得します。MultiCommentViewer.exeを起動します。
「接続を追加」をクリックすると、すぐ下に配信を設定する行が追加されます。「URL, 放送ID等」に自分の配信ページのURLを入力し「接続」をクリックします。
これでコメントを取得することができます。
このコメントを取得するだけ、配信毎に行う必要があると思います。現在、私は配信前にコメビュを起動して、URLを入力して接続しております。
文字の大きさなどを変える
これでOBSでニコ生風にコメントを映すことはできるのですが、なんとなく文字の大きさが気に入らなかったり、表示する文字数を増やしたかったりするかもしれません。
その場合はNiCommentGeneratorのフォルダ（NiCommentGenerator-master）内の「options.js」を編集します。
ファイル内の説明で大体編集方法はわかるとは思いますが、文字の大きさだけ少しわかりづらかったのでここに書いておきます。
「options.js」の最初の項目
// コメントの行数
lineNum: 10,
この「10」を大きくすると文字は小さくなり、小さくすると文字は大きくなります。
14に設定するとニコニコ風になるとのことです。
まとめ
工事中
