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

(本人から掲載許可をとっております)

JINS MEME?!?! ジンズメメ?!こんなものがあったのか！？

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

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

• FaceRig
• Face VTuber

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

iPhoneXがなくてもアニ文字したいんだ！ 【Unity×OpenCV×Dlib】

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

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

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

• 取れるデータは視線方向、まばたき、頭の傾き。加速度など
• iOSとAndroid開発に対応
• 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アカウント登録 (アプリ開発に必要/無料)
2. アプリ作成のボタンからアプリID,Secretを取得&メモ(あとで使います)
3. SDKのダウンロード
4. Unity用PluginのSetup

4.について、githubからダウンロードするだけでなく、READMEを読みながらSetupする必要があるので気をつけてください。

使用Asset

• Unitychan (3Dアバター: だいたいのHumanoid型なら可、表情のモーフが入っているかチェック)
• Final IK (いい感じにアバターの体動かす道具: Animatorの無料のIKやHeadLookControllerでも代替可能だと思います)
• Lipsync (声に合わせて口を動かしてくれます)

JINS SDKの取扱データ

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

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

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

JINS MEME

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);
    }
}

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

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で記述します。

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

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

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

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

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

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

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

バズる

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

一つ意識したことは、マッハ開発することでした。
GOROmanさんのマッハ新書の動きを見て、マッハで作ることは人の心を動かすのではないか、という仮説のもと1日というマッハ開発をしました

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

作った経緯話すと
・5月3日にJINS MEMEの存在を知る
・あ、これ使えるじゃんと気づく
・近くの店舗で即買い(4万)
・unityで開発タイム、3時間くらいでプロトタイプ完成
・動画用にちょっといい感じに修正
・5月4日に一発撮影
・ツイッター投稿、ちょいバズって嬉しい←イマココ

— イワケン@ARクリエイター (@tanaka_lit) 2018年5月4日