【朝起きてからバズるまで】 世界一(?)スマートにVTuberになるシステムをマッハ開発した

こんにちは、イワケンという者です。Unityでコンテンツ作るのが好きで、最近はARとVTuberが好きです。今の目標は3年間でARコンテンツ制作を100本走らせることで現在4本目頑張ってます。

VTuberは実際にやってるわけではないのですが、VTuberになるシステムを作るのは好きで、日々新しい方法を考えてます。

さて、5月4日にこのような投稿をしたところ、2500RT超えとバズってしまいました。この記事ではこのシステムの作るまでの過程を書きたいと思います。

仕組み解説もちょっとだけしますが、この記事を見れば全部わかるという説明になっておらず、何を調べればできるのか、といった程度の説明になっているのでご了承ください。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【世界一(?)スマートにVTuberになるシステム作った】<br>HMDもWebCameraのFaceトラッキングも使わずに、頭の動き、目の動き、瞬き、口の動きをアバターに同期させています。スマートなので外でもできます！<br>昨日から作り始めて1日でできました。JINS MEMEすごい！<a href="https://twitter.com/hashtag/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AB%E3%83%A6%E3%83%BC%E3%83%81%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#バーチャルユーチューバー</a> <a href="https://twitter.com/hashtag/VTuber?src=hash&amp;ref_src=twsrc%5Etfw">#VTuber</a> <a href="https://t.co/EaFPjxwubv">pic.twitter.com/EaFPjxwubv</a></p>&mdash; イワケン@AR好き (@tanaka_lit) <a href="https://twitter.com/tanaka_lit/status/992303479690485760?ref_src=twsrc%5Etfw">2018年5月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 5月3日 夢かと思ったら現実だった JINS MEMEとの出会い

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">うおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお<br><br>夢だと思ったら現実だったあああああああああああああああ</p>&mdash; イワケン@ARクリエイター (@tanaka_lit) <a href="https://twitter.com/tanaka_lit/status/991849768530755586?ref_src=twsrc%5Etfw">2018年5月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


前日布団もかけず寝落ちして、朝寝ぼけながらFacebookを眺めていたらこのような投稿を見ました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/96970/4c5d1701-e12a-7c81-c7cf-cdecc554bcf1.png" width=60%> 
(本人から掲載許可をとっております)


**[JINS MEME](https://jins-meme.com/ja/concept/)?!?! ジンズメメ?!こんなものがあったのか！？**

ほんと夢かと思いました。これで世界初のVTuberシステムつくれるやん！と。
何が良かったかというと、VTuberのシステム作る上でヘッドトラッキングが**スマートにできる**と思った点ですね。今だとヘッドマウントディスプレイ (HMD) が主流ですが、スマートではない。重い、外を歩けない。一般人からはかっこよくないという難点がありました。(僕は好きですけどね！ Oculus Go買います)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96970/f04fce5d-b166-be7e-ee78-e126a71f32b0.png)

他にもカメラでトラッキングする手法があるのですが、先に実装されている方がいて後追いで作ってもなーと

+ FaceRig
+ [Face VTuber](https://facevtuber.com/)

あと、自分自身も12月にWebCameraでVTuberになる記事も書いてました。

[iPhoneXがなくてもアニ文字したいんだ！ 【Unity×OpenCV×Dlib】](https://qiita.com/kenta71/items/f18c0092b14e74a1e6aa)

つまりこういうのは思いつきやすいのです(実装大変だけど)。それに対し、JINS MEMEでVTuberシステムを作れるというのは盲点でした。僕が調べた時点で誰も作ってなかった。つまり世界初です。であれば早く作らなければ！

# 5月3日 13時 JINSへ直行 購入の意思決定まで

この時点で8割方購入を検討したのですが、もうちょっと情報を集めようと思いました。調べた結果次のことがわかりました。

+ 取れるデータは視線方向、まばたき、頭の傾き。加速度など
+ iOSとAndroid開発に対応
+ Unity用の[Plugin](https://github.com/SystemFriend/JINS-MEME-Unity-Plugin)が存在する(ここで購入決定)。
+ UnityのEditorにはデータを直接送れない 
+ 値段は4万円

>
JINS MEMEの開発者用WEBページ
https://jins-meme.com/ja/developers/

調べたらUnity用のPluginがあることがわかり、なんとかなると思いました　(システムフレンドの前本さんありがとうございます！)
UnityのEditorまで直接データを受け取れないのですが、WebSocketでiOSから送るなど、頑張ればできそうです。VTuberやるならUnityのEditorで実装したいですよね。

値段については「買わない理由が値段なら買いなさい」という格言に従い、**自己投資**だと思って買いました。

僕「ジンスメメ　ってこの店舗にありますか?」

店員さん「ジンズ**ミーム**ですね。ございますよ。」

というやりとりをした時は恥ずかしかったです。みなさんも気をつけてください。

# 5月3日 15時 Unityで開発スタート

全部丁寧に解説すると大変なので、使った技術と参考にした記事について紹介します。

## 開発環境

+ MacOS High Sierra 10.13.4 Macbook Pro
+ Unity2017.4.2
+ Xcode9.3

## システムの全体像

JINS MEMEで得たトラッキングデータをiOSアプリに送り、アプリではそのデータを元にUnityちゃんの顔を動かしています。

そのiOSアプリをUnityというソフトを作って開発しました。

## JINS MEME関連の作業手順

1. [JINSアカウント登録](https://www.jins.com/jp/st/member/) (アプリ開発に必要/無料)
2. [アプリ作成](https://developers.jins.com/ja/apps/)のボタンから**アプリID,Secretを取得&メモ**(あとで使います) 
2. [SDKのダウンロード](https://developers.jins.com/ja/sdks/ios/)
3. [Unity用Plugin](https://github.com/SystemFriend/JINS-MEME-Unity-Plugin)のSetup

4.について、[github](https://github.com/SystemFriend/JINS-MEME-Unity-Plugin)からダウンロードするだけでなく、READMEを読みながらSetupする必要があるので気をつけてください。

## 使用Asset

+ [Unitychan](http://unity-chan.com/download/releaseNote.php?id=UnityChan) (3Dアバター: だいたいのHumanoid型なら可、表情のモーフが入っているかチェック)
+ [Final IK](https://www.assetstore.unity3d.com/jp/#!/content/14290) (いい感じにアバターの体動かす道具: Animatorの無料のIKやHeadLookControllerでも代替可能だと思います)
+ [Lipsync](http://tips.hecomi.com/entry/2014/07/21/125319) (声に合わせて口を動かしてくれます)

## JINS SDKの取扱データ

https://jins-meme.github.io/sdkdoc/ios/data-and-event.html

ここに載ってるデータは取ってくることができます。

## データを受け取ってSubscribeする仕組みを作る

Unirxでデータが来たら表情に反映する、という仕組みを作りたいと思います。
MyAppMEMEProxy.csというScriptを作るのですが、これはJINS MEMEのUnity用PluginのGithubに入っている、AppMEMEProxy.csを参考にしました。

JINS MEME

```csharp:MyAppMEMEProxy.cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UniRx;

public class MyAppMEMEProxy : MEMEProxy
{
	// 自分のAppのIDとSecretを入力
    private const string appClientId = "---Your App Id---";
    private const string appClientSecret = "---Your App Secret---";

    public static MyAppMEMEProxy Instance = null;

    public Subject<MEMERealtimeData> dataStream = new Subject<MEMERealtimeData>();
    public MEMERealtimeData Data { get; private set; }

	private void Awake()
	{
        if(Instance == null){
            Instance = this;
            DontDestroyOnLoad(this.gameObject);
        }else{
            Destroy(this.gameObject);
        }
	}
	void OnEnable()
	{
		MEMEProxy.StartSession(MyAppMEMEProxy.appClientId, MyAppMEMEProxy.appClientSecret);
	}
    void OnDisable()
    {
        MEMEProxy.EndSession();
    }
	public override void Start()
	{
		base.Start();
	}
	void Update() 
	{
        Data = MEMEProxy.GetSensorValues(); //ここでデータを受け取る
		if (!Data.isValid)
		{
			return;
		}
        dataStream.OnNext(Data);
	}
}
```

データをストリームに流すことができたので、あとは表情や頭の動きに反映させていきます。
例えば、

```csharp:BlinkController.cs
using UnityEngine;
using UniRx;

public class BlinkController : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
        // dataが来たら
        DataRecieveManager.Instance.dataStream.Subscribe(data =>
        {
            // 瞬きの強さが60以上だったら
            if (data.blinkStrength >= 60)
            {
                // まばたきをblinkSpeedミリ秒だけする
                PlayBlink((int)data.blinkSpeed);
            }
        }).AddTo(this);
    }

    // 中略

    void PlayBlink(int time)
    {
        // timeミリ秒瞬きさせるScriptを書く
    }
}
```

こんな感じでUnirxで記述します。

表情とか瞬きとかどうやって実装するの?というのは以下のサイトやコードを参考にしました。

|動かした箇所|参考にしたWebサイト|
|---|---|
|まばたき|Unitychanのunitypackageに入ってるAutoBlink.csというScriptを参考|
|目玉の動き|[ユニティちゃんの視線を動かす](http://mi-zmix.hatenablog.com/entry/2014/11/08/171030)|
|頭の動き|[【Unity】Unityちゃんの注視方向をIKで変化させる](http://nn-hokuson.hatenablog.com/entry/2017/07/11/205245),[Final IK](https://www.assetstore.unity3d.com/jp/#!/content/14290)|
|口の動き|[ユニティちゃんが声に合わせて口パクしてくれるリップシンクアセットを作ってみた](http://tips.hecomi.com/entry/2014/07/21/125319)|

# 夜ご飯、友達に見せてみる

もう夜ご飯食べる前には、ほぼ完成してました。

ここで友達にあう時に「このメガネが仕込んでるメガネか気づくかどうか」試しました。結果バレなかったので、このメガネのスマートさが証明されたと勝手に思いました。おしゃれグッズとしても機能しそうです。

そこでアプリのフィードバックももらい、ちょっと改良しました。
具体的には、首からしたを見えなくしました。なぜなら、顔しか動かないのに、動かない下半身が見えていると不自然だからです。

# 次の朝、動画撮影してお昼にTwitterに投稿

動画撮影はPCのWebカメラで撮影しました。撮り直しは3回ほど。iOSの画面が光を反射して見えづらくなるためちょっと難しかったです。

# バズる

バズってしまった...
というわけで朝起きてからバズるまででした。

一つ意識したことは、マッハ開発することでした。
[GOROman](https://twitter.com/goroman)さんの[マッハ新書](https://booth.pm/topics/mach_digital_paperback)の動きを見て、マッハで作ることは人の心を動かすのではないか、という仮説のもと1日というマッハ開発をしました

その仮説を実証できるかわかりませんが、例のツイートのあとにこのようなツイートをしてそこそこ反響がありました。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">作った経緯話すと<br>・5月3日にJINS MEMEの存在を知る<br>・あ、これ使えるじゃんと気づく<br>・近くの店舗で即買い(4万)<br>・unityで開発タイム、3時間くらいでプロトタイプ完成<br>・動画用にちょっといい感じに修正<br>・5月4日に一発撮影<br>・ツイッター投稿、ちょいバズって嬉しい←イマココ</p>&mdash; イワケン@ARクリエイター (@tanaka_lit) <a href="https://twitter.com/tanaka_lit/status/992328700547948549?ref_src=twsrc%5Etfw">2018年5月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 今後について

現在、LeapMotionで手の動きをつけたり、WebSocketでEditorでキャラが動くようにしたり、拡張していきたいと思います。

できれば、ニコニコ超会議だったり、昨日始まったVTuberによる番組[VRoadCaster](https://www.youtube.com/channel/UC4NiGZqQQvpvNvwcJsm_EAg)にクリエイター枠で出演できるようにしたいです。

また、JINS MEMEだけでなく、新しいデバイスとUnityの組み合わせで面白いコンテンツ作れるよう頑張っていきたいと思います(Oculus Go届くの楽しみ！)