VTuberでライブコーディングをやっていく

# 動機

- 気楽にライブコーディング配信とかしたい
- でも素顔に生声はちょっと生々しい
- VTuber化しよう

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">（VTuberライブコーディング紹介用動画） <a href="https://t.co/LkteYpOoDd">pic.twitter.com/LkteYpOoDd</a></p>&mdash; みやおか (@miyaoka) <a href="https://twitter.com/miyaoka/status/985552654523772928?ref_src=twsrc%5Etfw">April 15, 2018</a></blockquote>

はい。というわけでやってみました（可愛くないキャラですが…）。

- フル版
 - [Nuxt v2 + Storybook v4をやっていくバーチャルライブコーディング配信 - YouTube](https://www.youtube.com/watch?v=yyXzb7gTam4)
 - [VuePressをやっていくバーチャルライブコーディング配信 - YouTube](https://www.youtube.com/watch?v=GilAFdu4LJE)

ライブコーディングってその人なりの環境や手癖を晒していくので、動画でないと分からない面白さや発見がありますし、その場でコメント貰ったりする体験性も楽しいと思います。ただ、それをネットでやっていくってなるとけっこういろいろな面でハードルはあります。

よく巷で言われる心理的安全性などを求めると、顔や声を変えてVTuber化するってのはわりとアリなんじゃないかなーと思ったわけなんですが、単に日頃からVTuberばっかり見ているから自分もVTuberやってみたいってだけかもしれません。

というわけで、動画配信の解説自体はググれば既にいろいろありますしアバター使うのも今更かもしれませんが、こんな感じにできるよと紹介してみることでライブコーディングやってみようって人が増えたら面白いので、一通り手順を書いていきます。

# 全体フロー

![flow.png](https://qiita-image-store.s3.amazonaws.com/0/117743/a62306ab-ff33-4ff5-ff32-8ac3af06a2c2.png)

全体の構成はこんな感じです。
以下、各部について説明していきます。

# FaceRig（キャラなりきりソフト）

http://store.steampowered.com/app/274920/FaceRig/

- フェイストラッキングしたモーションをアバターに反映させるソフトです
- 残念ながらMacは非対応です…。
- 有料です。1500円くらい。買いましょう。
- アバターはデフォルトで50体くらい入ってます。でもいわゆる洋テイストです
- かわいいキャラは別途 [FaceRig Live2D Module](http://store.steampowered.com/app/420680/FaceRig_Live2D_Module/) というDLCを買うと使えます。400円くらいです。
- 細かい操作はググってください

# WebCam（フェイストラッキングソース）

- フェイストラッキング用。画質もそんな必要ではないし、1500円くらいで買えると思います。
- ノートPCなら元からカメラついてるのでそれで大丈夫です。
- WebCamが無い場合は、iPhoneとアプリで代用することもできます。
- EpocCam や iVCam というものが無料で使えますが広告が出ます。特にiVCamは撮影画面の上に文字が横切ってしまってフェイストラッキング無効になる場合があるので EpocCam のほうがいいと思います。

![facerig.png](https://qiita-image-store.s3.amazonaws.com/0/117743/a9e7a337-ad08-f769-64db-700e0f093a27.png)

- WebCamとFaceRigを合わせるとこんな感じになります。
- ここの映像を上のメニューからbroadcastオンにして配信ソフトに流し込みます。
- フェイストラッキングするだけなので頭しか動きませんが、アバターによってはマウスで手を動かしたりできます。

# OBS Studio（配信ソフト）

https://obsproject.com/

- フリーの配信ソフトです
- 配信設定は昔は面倒だったんですが、いまは自動的にセットアップしてくれるのであんまり悩まないと思います。

## シーン設定

どういう画面を流すかをシーン設定を作って構成できます。

### 共用シーン

![obs1.png](https://qiita-image-store.s3.amazonaws.com/0/117743/1aaedfb0-04f6-7fe2-ff5b-98251ef9aba1.png)

まずはこんなシーンを作りました。

### コーディングシーン

![obs2.png](https://qiita-image-store.s3.amazonaws.com/0/117743/df938662-2a9e-be7d-753e-9f235e7a8baf.png)

そして、エディタの上にさっきのシーンを載せるとこんな感じになります。

## ソース設定

### FaceRig

![obs3.png](https://qiita-image-store.s3.amazonaws.com/0/117743/5a9bd15b-3880-2039-5734-1db7dc5253c9.png)

- FaceRigはソース欄の +ボタンから「映像キャプチャデバイス」を選んで追加します
- プロパティのデバイスから「FaceRig Virtual Camera」を選びましょう

![obs4.png](https://qiita-image-store.s3.amazonaws.com/0/117743/b1177bcd-63b6-a608-c5b2-20a4ca04dabd.png)

- 背景透過して合成するためには右クリックからフィルタを開き、クロマキーを追加します。
- 基本グリーンカラー等で背景を抜きますが、この画像の子の場合は胸元にグリーンが入っているため透過されてしまっています。適宜アバターに含まれない色を背景に設定して選択しましょう。

### エディタ、ブラウザ

- ソースから「ウィンドウキャプチャ」を選んで追加します。
- 実行ファイル名やタイトルでキャプチャ対象のウィンドウを判別するので適宜選択しましょう。

### YouTubeコメント欄

- ライブ配信の場合、コメントの表示と読み上げはあったほうが断然コミュニケーションしやすいです（無いとコメントに気づかない！）
- コメントを追加するにはソースから「ブラウザ」を選び、配信時のコメントURLを設定します。
- 詳しくはググってください
- 透過して載せるためにはカスタムCSSの設定も必要になります。
- CSS設定は「Chat v2.0 Style Generator」というサイトで生成できるのですが、自分が見たときにはサイトが死んでました。でもキャッシュで取得できました。

# YoutubeLiveCommentViewer + 棒読みちゃん（コメント取得+読み上げ）

https://ryu-s.github.io/app/youtubelivecommentviewer

- YouTubeLiveのコメントを取得します

http://chi.usamimi.info/Program/Application/BouyomiChan/

- YoutubeLiveCommentViewerの設定で「棒読みちゃん」を連携させることでテキストを読み上げます

# マイク

- 必要ですね
- 音質をちゃんと高めるには、[rebuild.fm](http://rebuild.fm/) をやっている Miyagawa さんによる解説記事などを読むと最高になります。
- [Podcasting Guide 2017 – Tatsuhiko Miyagawa’s Blog](https://weblog.bulknews.net/podcasting-guide-2017-2e88531a367d)

# MorphVOX Jr（ボイスチェンジャー）

http://screamingbee.com/product/MorphVOXJunior.aspx

- マイク入力にエフェクトかまして配信ソフトに入力します
- 生声でもいいんですけど、あると面白い
- 解説：[水おいしいです＾o＾: MorphVOX Juniorの使い方と設定。生放送。無料のボイスチェンジャー。](http://vad.seesaa.net/article/147186484.html)
- MorphVOX Jrで選べるのは3種類しかないし探せばいろいろあると思うのでいいのあったら教えてください。

# ヘッドホン（イヤホン）

- ある方がいいですね

# BGM

- ライブだと接続の生死確認用のためになんか音が流れてるほうが良いと思います
- YouTubeで「24/7 Livestream」とか検索すると流しっぱなしにするチャンネルがあるのでそういうのを開いておくのもいいんじゃないかと思います

# 配信前確認

- OBSでいったんローカルに録画することでボイスとBGM音量など確認できます

# サブPC

- 配信時の確認用にほしいですね

# 気をつけること

- 顔や声を隠しても、PC環境は見られるので大丈夫なようにしましょう
- 本名NGな人なのに、ファイルパスのユーザーディレクトリに名前が見えてしまうとかあります
- ブラウザの履歴とかも
- 配信用には日常使いしてないマシンがいいかもしれません