透過ディスプレイとAmazon Echoの自作スキルを組み合わせれば自作Gateboxみたいなもの作れるんじゃねと思った話（途中）

## [GateBox](https://www.gatebox.ai/ "GateBox")とは
対話を行うことの出来る3Dキャラクターを召喚することのできる装置です。

### きっかけ
[アケードPさんの透過ディスプレイの動画](https://www.nicovideo.jp/watch/sm33086157)を見てこれ自分でも作ってみたいなと思い、自分でも作ってみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">透過ディスプレイできたー<br>中にいれるものなくて、とりあえずホチキスの針いれといた笑 <a href="https://t.co/KTfzR5PmVc">pic.twitter.com/KTfzR5PmVc</a></p>&mdash; A.h (@Ah92082778) <a href="https://twitter.com/Ah92082778/status/1137547460149039104?ref_src=twsrc%5Etfw">June 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
これだけを作って思ったことは使い道がわからない....
どうしよう...と少し困っていました。

そして、作った後に[他のアケードPさんの動画](https://www.nicovideo.jp/watch/sm33174770)を見ました。
9分5秒あたりから登場するAIアシストPCこれを見たときにこれは天才だと思いました。すなわち、高性能のAmazonEchoに音声側の処理を任せることによってGateboxと同様に会話をすることが出来るようになります。
ここで自分はこう考えました、**「これスキル自作すればより良いものが出来るんじゃないか？、なんなら好きなキャラクターで出来るのではないか」**

### 今回作るものの概要
まず、今回作成するものは三つからなります。
1. 透過ディスプレイ
2. Alexaスキル
3. 透過ディスプレイで流す用の動画
これら三つを組み合わせることによってより良いものができると考えています。３Dキャラクターの表示を行い、そのキャラクターのボイスを利用することによって会話も行うことが出来るようになるのではないかと考えました。
（3Dモデルや音声などの権利を侵害しないように注意してください）

概要図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/a70ca20f-7a78-1cff-ce54-7042f6530542.png)



### 透過ディスプレイの作成方法について
ここで透過ディスプレイの作成方法について書いてしまうと記事がとても長くなってしまうと考えたため、また記事だと説明が難しい点も存在していると考えたため、とても参考になる動画等のリンクをはることによって済まさせていただきます。（作業する際は十分に気を付けて行ってください。）
https://www.youtube.com/watch?v=fYu13EBRGH4
https://www.youtube.com/watch?v=c_oKKDwsp0Y

### なぜわざわざAlexaスキルの作成をするのか、その利点は何か
まず、なぜAlexaスキルの作成を行うのかという説明を行います。理由としては、今回作成する際に音声データや3Dのキャラクターデータがあれば任意のキャラクターを表示することが出来てかつ、内容は少なくなりますが会話を行うことが出来るようにしたかったためです。すなわち音声データをクラウドストレージに保存をしておき、ユーザーから受け取った発話内容から音声データを出力することによって任意のキャラクターの声を出力することが出来ます。これによって任意の3Dキャラクターとの会話を行うことができるようになると考えました。

### Alexaスキルの作成方法について
Alexaスキルにかんしては以下のサイトを参考にして作成しました。
https://dotstud.io/blog/nodejs-alexa-skill-mp3/
その際にAWS S3にキャラクターの音声の保存を行います。（音声データの権利などには注意してください）そしてこんにちはやこんばんは等ごとにIntentの作成をしていき、受け取った言葉ごとに返答してほしい音声データのS3のURLの指定を行います。
例）ユーザーがありがとうといった際のIntent
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/8b2f93dc-2b50-b9e2-1612-6cae503350eb.png)
このようなIntentを増やしていき以下のようなコードをAWS lambdaにおいて実装します。

```
 'thanksIntent': function () {
        let speechOut = "<audio src='S3のURL'/>";
        speechOut += "<break time ='1s' />";
		this.emit(':tell', speechOut)
    },

```
これらを複数作成することによって音声データを用いた会話を行うことが出来るようになります。ここでの音声データの例としては「どういたしまして」などの音声データを入れておくことで会話が成り立つと考えました。

### 透過液晶を用いて流す動画の作成方法
これについては今回はこの二つの方法について説明を行っていきたいと思います。3Dキャラクターが存在している物を用いる場合か、自分で一から作成を行う場合で分けています。

1. MMDを用いる方法
2. Vtuberを動かすアプリケーションを用いる方法

まずMMDをもちいる方法について説明をします。
[MMD](https://dic.nicovideo.jp/a/mmd)とは3DCG制作ソフト「MikuMikuDance」の略称です。
これを用いることによって3Dキャラクターを動かして動画の作成を行うことが出来ます。
MMDの場合ですと、3Dモデルに関しても多くの作品が存在しているため規約等に気をつければ比較的簡単に動画の作成を行うことが出来ます。わかりやすく動画の作成方法を説明しているサイトも多数存在しているため、今回は動画自体の作成方法については割愛させていただきます。
動画については、ダンスや少し動いている動画を想定しています。

動画を作る際には背景は白のままで作成を行うと透過ディスプレイは背景を白を想定しているため、その方が存在感が増すと考えられます。（これについては自分が白しか試せていないため、今後調査の余地はあると考えています。また、キャラクターの衣装などが白い場合少し見づらくなってしまうという難点も存在しています。）

次にVtuberを動かすアプリケーションを用いる方法について
ここで想定をしているのは[3tene](https://3tene.com/)などのアプリケーションを想定しています。
なぜここでMMDと分けて説明を行うかというと、自身で簡単に3Dキャラクターを作成することの出来る[Vroid](https://vroid.com/)などを利用して、簡単に3teneを用いることでwebカメラなどから簡単にモーションを付けて動画を作成することが出来るためです。
こちらの場合は自分で好きなキャラクターを作成して、自分で好きな動きを追加することが出来るようになります。

### まとめ
今回は透過ディスプレイとAmazonEchoスキルと動画を用いることによって自作Gateboxの作り方について説明を行いました。本来完成している動画を載せるべきなのですが、現状スキル及び動画を自身も作成を行っている途中のため完成次第載せたいと考えています。自身も作成段階なのでここをもっとこうしたらよくなりそうなどがあれば、コメント等をしていただけると幸いです。また、3Dキャラクターや音声の権利に十分注意して作成してください。