ニコニコ風オンライン講義環境を作ろう！
こんにちは、VulpeSです！
コロナウイルスの影響でオンライン○○が流行っていますね。
皆さんも、仕事や学校の授業でZoomやTeamsなどを使うことも増えていると思います。
そんな中、バーチャル背景などの機能を活用したり、FaceRigなどの外部サービスを導入し自分の映像を面白おかしくしてみたり、単純にWebカメラではなく、一眼レフカメラを使い高画質な映像にしてみたり様々な試みがなされています。
今回はニコニコ風オンライン講義環境を作ろうということで以下の環境を作っていこうと思います。
1．自分の映像（カメラの映像）とゲームや資料スライドなどの映像を
組み合わせる（OBS）
2．1の映像をZoomやTeamsなどのビデオチャットで使う（Virtual Cam）
3．映像内にニコニコ動画風にコメントが流れるようにする
（Comment Screen）
4．映像だけでなく自分が再生してる動画などの音声も通話に乗せる
（Voice Meeter）
※ 5．自動字幕を付ける（Google音声文字変換）
既出な内容ではありますが、複数の映像や音声を組み合わせ、コメントが流れるような映像にしたものをビデオチャットで流したい人はこれを見れば一通り環境を作れるようになると思います。
また、都度参考になりそうな記事などもリンクを載せておきますので参考にしてください。
1．自分の映像とゲームや資料スライドなどの映像を組み合わせる（OBS）
まずはスライドの資料と自分の映像を組み合わせて表示できるようにOBSという無料ソフトをインストールします。
黄色の〇から自分の使っているPCのOSをクリックするとダウンロードされるので、あとはその.exeファイルを起動して案内に従ってインストールします。
OBSはゲーム実況などで使われるものでゲーム画面と自分の映像や画像を組み合わせてライブ配信をしたりする時に使われています。
ZoomやTeamsなどの機能で画面共有機能があるかもしれませんが、それを使うと発表者の表情がわからないなどの問題をOBSで自分の映像を好きな配置・大きさで組み合わせてビデオチャットで使うことで解決することができます。
さて、インストール後にアプリを起動するとこんな感じの画面が開くと思います。
細かい詳細は下の記事が参考になるので時間のある方は読んでみてください。
ここではスライドと自分の映像をいい感じに配置して表示できるように解説していきたいと思います。
まずはソースという欄のプラスマークを左クリックして、画面キャプチャを追加していきます。（なぜ画面キャプチャなのかは最後に説明します）
ソースを作成というウインドが現れるため新規作成でわかりやすい名前に変更してください。
ここではスライドという名前に変更します。
その後共有したいディスプレイを選択する画面になります。
私は2画面で作業しており、ディスプレイ1を設定の変更や自分用の資料等の表示用にしており、ディスプレイ2を共有用として使っているため画面2を選択します。
また、タブに隠れて見えませんがマウスカーソルを表示するかどうかも選択できるためお好みでチャックボックスの変更をしてください。
そうすると選択した画面のキャプチャがされ、PowerPointなどでスライドを表示することができます。
勿論これだけならZoomなどで画面共有すればいい話で、ここからが本番です。
またソースの追加で今度は映像キャプチャデバイスを選択肢、同じく名前をわかりやすいように変更します。（ここではカメラにしました）
その後カメラデバイスを選択します。（選択肢がたくさんありますが気にしないでくださいｗ）
そうすると見事スライドの上にカメラの映像を載せることができました！
ちなみにですが、ソースの順番で上にあるものが前面に来るようになります。ドラッグして順番は変更できますが、スライドの下にカメラを移動させるとスライドに隠れて見えなくなりますので、この順番は気を付けてください。
さて、スライドとカメラ映像は表示できたもののこれでは重なって見えなくなる部分が出てきてしますのでOBSの表示されてるものをクリックして赤い枠がでたら、後は角の部分をクリックしながら動かしていい感じの大きさにしたり、枠内でクリックしながら動かして配置を調整します。
今回は簡単に下の写真のように右下にカメラ映像が小さく出る感じに調整しました。ここら辺はお好みで調整してください。
さて、以上の設定でひとまず、スライドと自分の映像（カメラ映像）を映す準備はできました！
マイクの設定等もありますが、今回の使用法的に関係ないので（4で詳しく解説します）今回は気にしなくて大丈夫です。
※スライドのキャプチャについて
今回はスライドの共有を画面キャプチャで行いましたが、ウィンドウキャプチャでPowerPointを選択するなどしても可能です。
むしろ、PowerPointを選択するとそれ以外の画面は共有されないため、共有している画面で誤って重要な資料データを開いて見られてしまうなどの事故がなくなります。
しかしウィンドウキャプャでは3のニコニコ動画風のコメントを流すことができないため、ここでは画面キャプチャを使用しています。
2．1の映像をZoomやTeamsなどのビデオチャットで使う（Virtual Cam）
1では自分の映像とスライドの組み合わせることができました。
しかし純正の機能ではZoomやTeamsで使うことはできません。OBSをインストールしただけではキャプチャーした映像や画像の組み合わせをYouTubeなどでライブ配信したり録画したりすることしかできないため、Virtual Camという無料の追加コンテンツのようなものをインストールしなければなりません。
ダウンロードしたらOBSは停止した状態でインストールしてください。
すると、OBSのツールにVirtualCamというものが追加されているはずです。
Target Cameraの部分はOBS-Cameraのままで大丈夫です。
Buffered Framesは0（小さく）にしておくと遅延が減ります。
（もちろん小さくするデメリットもあるのですが、ここでは省きます）
後はStartをクリックして×で閉じてください。
たまたま起動していたのでDiscordで試してみます。
カメラ選択でOBS-Cameraを選択すると（VirtualCamの設定を変更している場合はそれを選択）無事OBSの映像を出力することができました。
（以下の写真ではカメラ映像切ってますがちゃんと映せます）
また、プレビュー画面などでは反転していますが、相手側は正常に見えているようなので、反転していると思ってビデオチャットアプリ側で反転・反転解除すると相手には反転して見えることもあるので、そのあたりは最初に参加者に確認してみるといいかもしれません。
似たような内容ですが、OBS側で反転する必要が出た場合は以下の記事を参考にするといいと思います。
他にもこちらの記事を見るとVirtualCamの別の（詳細な）インストール方法やAndroidやiOSのスマホの画面をキャプチャする方法などがわかります。
さて、以上でカメラの映像とスライドの映像を組み合わせたものをビデオチャットアプリで使えるようになりました！
これで資料と声だけの講義や発表ではなく、話している人の表情も伝えることができます。
3．映像内にニコニコ動画風にコメントが流れるようにする（Comment Screen）
では、ここからがこの記事のメイン所です！
オンラインでの講義では参加者の発言や反応のハードルが高くなってしまうことがあります。その対策として、発言ではなく、チャットの方でコメントするなどの工夫をしている方も多いかと思いますが、さらに一工夫加えて、参加者のコメントをニコニコ動画風に流してみようと思います。
これは稲見さん（Twitterのリンクです）が授業で実践しています。
オンライン講義で奈落に向かって話すのがしんどい教員各位、ぜひComment Screenの導入をご検討ください > RThttps://t.co/Cp8qmAoZ56https://t.co/kXVzA74jsK
— 稲見昌彦⛅INAMI Masahiko (@drinami) May 13, 2020
今回導入するComment Screenについてやその効果をnoteにまとめているのでぜひご覧ください。（こちらが本家みたいなものですｗ）
導入による効果については下手に私が書くより、稲見さんの記事を見ていただきたいのでここでは環境構築の方法だけ書いていきたいと思います。
ニコニコ動画風にするために導入するのはComment Screenというものです。
ページ右上からダウンロードしてインストールしてください。
インストール後起動したら上部の＃以降を好きに変更してください。
今回は#testOSにしました。
下に入力し送信したコメントが自分の画面に流れます。
また、顔のマークからグッドボタンなどを押すと下から生えてきます。
しかし、これはあくまで配信している側なので、参加者にもこの掲示板を使えるようにしなければなりません。
最も簡単な方法としてQRコードのアイコンからQRコードを表示し、それをあらかじめ参加者に配布すると掲示板にアクセスできます。
もしくはComment Screenのサイトからハッシュタグを入力することで掲示板にアクセスすることもできます。（QRコード読みこむとこのページに飛ぶだけなのでどちらでも変わりはありません）
参加者は講義や発表をPCで受けていると想定し、ノートPCなど画面が一枚でであることを考えると、掲示板の方はスマホで利用してもらう形になるかと思います。
講義・発表の初めにOBSのソースで画像を追加しQRコードを表示しておくことで、参加者がQRコードをPC越しにスマホで読み取り掲示板に参加するという流れでもいいかと思います。（もちろん意図せず写真に写っているように共有している画面にQRコードを出していれば問題ありません）
ということで参加者のコメントや反応をリアルタイムで映像に流せるようになりました。ニコニコ動画の楽しさ総取りですね！
1の最後にも書きましたが、スライドを画面キャプチャではなく、ウィンドウキャプチャにしているとコメントなどはキャプチャされず、また、ウィンドウキャプチャでこのコメントが流れているものをキャプチャすることもできないので、この機能を使う場合は不必要な情報が画面に入る事故に気を付けながら画面共有しましょう！
また、ハッシュタグを知っていると掲示板に入りコメントできるため、取り扱いには注意し、荒らされたりしないよう気を付けましょう！
これで題名のニコニコ風オンライン講義環境の構築はできました！
以下は他にも必要だと思う内容（4）や人によってあったら便利な内容（5）も書いていきます。
4．映像だけでなく自分が再生してる動画などの音声も通話に乗せる（Voice Meeter）
さて、3までで題名の内容は回収したものの、3までの内容はあくまでビデオチャットで使用する映像部分のお話です。
ビデオチャットではもちろん音声部分も重要ですね。
OBSで画面共有をしてVirtual Camで出力できるのは映像であって音声ではありません。画面を共有しているからと動画を流しても参加者は動画は見れますが、音声は聞こえないため発表者がアテレコする羽目になります...
そこで今回はPCの音もボイスチャットに載せられるようにしていこうと思います！
何を使うかというとマイクからの音とPCの音を混ぜるミキサーのアプリで、今回はVoice Meeter Bananaというものを導入していきます。
詳細な設定などはこちらの記事がわかりやすいので躓くことがあったら参考にしてください。
Downloadからだとzipファイル（圧縮ファイル）なので解凍してインストールして下さい。
Installからだとexeファイルなのでそのまま起動してインストールして下さい。
インストール後起動する時Voice Meeterというものもあるかもしれませんが、機能が少ないやつなのでVoice Meeter Bananaの方を起動してください。
具体的な解説に入る前に確認してほしいことがあります。
以下の写真を参考にコントロールパネルを開き、オーディオデバイスを管理をクリックしてください。
再生タブと録音タブのVoiceMeeter Input/Outputを既定のデバイス。
VoiceMeeter Aux Input/Aux Outputを既定の通信デバイスに設定してください。（もしかしたらすでになってるかもしれません）
以上の準備ができたらVoice Meeter Bananaの基本的な解説をしていきます。
黄色で囲ったHARDWARE INPUTというのがマイクです。最大3つのマイクを同時使用できます。
その隣のVIRTUAL INPUTSというのが左がPCから出力される音（動画などの音）で右が通信から出力される音（通話相手の音声など）です。
その隣が出力先です。ここで自分が聞くためにスピーカーやイヤホンへ出力します。
さて、設定ですが、私の場合、今回はHARDWARE INPUTは1のAG03のみを選択しています。ここにあるA1～A3というのは出力先の選択です。
私はA1をFiiO Q1（イヤホン）、A2をROG Strix HS BT（ヘッドホン）、A3 をAG03（ライン）になってます。
とりあえずA1出力がイヤホンということをわかってもらえればいいです。
私のマイクはA1とB1を選択しているのでイヤホンに音を出力する設定になっています。（なのでいま自分の声が聞こえる状態です。）
ではB1とB2 はなにかというと、通信に使う出力先です。
Discordの音声設定で見てみましょう！
入力デバイスにVoiceMeeter Outputというものがあります。これがB1です。
下にあるVoiceMeeter Aux OutputというのがB2です。
ビデオチャットアプリ側の音声入力をマイク（私の場合はAG03）ではなく、VoiceMeeter Outputを指定することでVoiceMeeterで設定し混ぜ合わせた音を通話で使うことができます。
つまり、いままでは「マイク→通話」だったものを「マイク→VoiceMeeter→通話」にした感じです。
結局どんな設定にすればいいかというと、下の写真のような感じです
（HARDWARE INPUT）
・HARDWARE INPUT1に使うマイクを設定し、B1に出力します。
自分の声を聴きたい場合はA1にもチェックを入れてください。
（マイクはmonoにチェックを入れてください）
・他はややこしいのでMuteにします。
（VIRTUAL INPUTS）
・左のPCの音はA1（イヤホン）とB1通話に出力します。
・右は自分の聞くA1のみ。（B1にいれると通話相手の声が通話相手にも出力されます）
これでイヤホンでPCと通信相手の音を聞き（いつも通りです）、B1のVoicemeeter Outputをビデオチャットアプリ側の音声入力に設定することで自分の声と自分のPCの動画などの音を流せることができるようになりました。
以上でオンライン授業で動画などを流してもその音を通話に載せることができるようになりました！
ちなみに以下の記事では別のミキサーであるvirtual audio capture deviceを導入した場合が書いてあります。
5．自動字幕を付ける（Google音声文字変換）※おまけ
これは落合陽一さんがやっているGoogleの音声文字変換を映像に載せリアルタイム字幕を付けるというものです。
詳細をあらーとさんから教えて頂いたので自分も試してみました。
落合陽一さんのツイートをみて自分でもやってみました！
— あらーと∞@加速モード (@194_alert) May 14, 2020
配信でのノイズ等で聞き取れないことも多々あるので，遠隔会議などをする際にはこれをぜひとも導入していただきたいですね😉
（ある程度のマシンスペックが必要なのが玉に瑕かも？）https://t.co/VZz8TkKWsT pic.twitter.com/jRCqoLBSkO
一番な簡単なやり方で行きます！
まずGoogleドキュメントで新規ファイルを作成します。
ファイルタブからページ設定を開き以下のようにします。
文字の設定もいい感じに変えていきます。
その後Ctrl + Shift + Sを押すと音声文字変換が使えるます。
ではOBSのウインドウキャプチャで追加していきます
追加したらソース上で右クリックからフィルタを選択します。
その後クロマキーを追加し、緑でいい感じに抜いていきます。
また、クロップ/パッドで必要な部分だけに調整します。
あとは配置や文字の大きさなどを調整すればリアルタイム字幕の完成です！
この方法はこちらの記事に詳細載ってます。
【蛇足】
別な方法でもできます。（あらーとさんに教えてもらった方です）
まず家のどこかに生えている野生のAndroidスマホを用意します。
（自分はiPhoneを使っているので昔使っていたスマホを使います）
そしてAndroidスマホにVysorというアプリをインストールして、スマホの画面をPCに出力できるようにします。
Vysorの詳しい使い方はこちらを参考にしてください。
上の記事にやり方は書いてありますが、Vysorを使うときUSBデバッグ機能をONにしてください。
PCの方にもVysorを追加します。
さて、ここからが本番です。
音声を文字に起こしてくれる「音声文字変換」をインストールします。
これで準備は整いました！
Vysorの記事を見ながらVysorを起動しスマホの画面をPCで見れるようにします。
あとは音声文字変換を起動し、先ほどと同じような感じでクロマキーで背景を抜いて文字だけ残し映像に重ねるだけです。
6．その他
WebカメラをWindowsで使った場合1つのアプリケーション上でしか動作しません。そのため、OBSでWebカメラを利用した状態では通話でWebカメラを利用することができなくなります。（もちろんOBSのVirtualCamをStopすれば大丈夫ですが）
そこでWebカメラを複数のアプリケーションで利用できるようにする記事があるのでそちらも共有しておきます。
最後に
いかがだったでしょうか！（インチキブログ風）
大体の内容は既出で調べれば出てきますが、一つにまとまったものはなかったので、オンラインで授業やプレゼンをする人がこの記事（とリンク）をみて環境構築ができるようにまとめたつもりです。
皆さんのオンラインライフがより楽しくなるよう、参考にしていただければ幸いです。
お付き合いいただきありがとうございました！！
この記事が気に入ったらサポートをしてみませんか？