ガンダムの名言を毎日聞きたいので、名言を言ってくれるハロを作った！

## ガンダムの名言を聞きたい

私は父親がガンダム好きということで、ほぼ全てのガンダムシリーズを見てきました(~~見せられた~~)。

個人的にガンダムは哲学ちっくな名言が多いと思っていて、**たまに聞くと人生を少し考えさせられます。**

そんなとき、Voiceflowというものに出会いました。

https://www.voiceflow.com/

::: note
Voiceflow：ノーコードでAmazon AlexaやGoogleアシスタント用の音声アプリを作成できるVoiceflowというサービスです。
:::

これを見たとき、
**「これ使えば、ガンダムに出てくるハロ作れるじゃん！」**
と思い、そのハロを通じて **ガンダムの名言を言わせたらいいじゃね？** と思い至りました！

https://twitter.com/yoyoyoshiki_911/status/1588004513490735106

## やりたいこと

今回つくるものは **「ガンダムの名言を言うハロ」** です！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/f3fe8c9b-f03a-e70f-87c8-601c947e80fa.png" width="80%">


### システム構成

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/9d19e4ed-2e8a-1c16-d9df-b68ab34e55c4.png" width="80%">

 - 朝起きてハロが誰の名言を言ってほしいか聞いてくる
 - ユーザーはガンダムの登場人物を答える
 - その人物の名言から一つ、ハロが答えてくれる
 - ユーザーは、その名言を復唱し、ハロが認めてくれたら晴れて合格となる

今回は、**ユーザー側に名言を復唱させることにしました。**
理由としては、名言を聞くだけだとつまらないし、**そもそも名言って自分でも言いたくないですか？**
だから、復唱した名言が正しくハロに認識されれば、ハロがその人物であると認めてくれ、一日その人物として生活することを許してくれる仕様としました！

これであなたもガンダムの登場人物になりきれます！


**対応している人物**

- シャア・アズナブル
- アムロ・レイ
- ブライト・ノア
- ギレン・ザビ

(名言を言って終わり。復唱処理なし)
- ガルバ・ザビ
- セイラ・マス

> ガルマとセイラは、個人的に聞きたいだけだったの復唱処理はなしです


## 作り方

### Voiceflowを使用する

Voiceflowの基本的な使い方はこちらを参照しました。

https://zenn.dev/kun432/books/f6e1b45fb930118d6524


**フロー全体図**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/dabc803d-cdd5-29b7-7127-fe285adc277b.png" width="80%">

**参考にしたガンダム名言のサイト**

https://www.gundam-c.com/other/wise-remark/



<details><summary><font color="Red">********** 詳細設定はこちらから **********</font ></summary><div>


### Speakブロックで音声出力する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/bb897a53-477c-87b8-9ae9-bc307e12331a.png" width="30%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/5503fa20-2d8e-cab6-ec09-6ae8bc3ee1fd.png" width="32%">

Voiceflow側から音声を出力する際に使用します。
```{変数}```とすることで、変数も使用することができます。
また、音声のタイプを変更したり、スピードなども調整することができます。

::: note warn
出力させる文言に漢字を使用する場合、意図通りに発音してくれない場合があるので、その場合はひらがなを使いましょう
:::

### Captureブロックでユーザーの音声を変数に格納する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/6ea85090-db62-c6d0-4451-5ebcd0a575b4.png" width="32%">

ユーザーの音声を指定した変数に格納することができます。
こちらで指定する変数は作成することができ、以後他のブロックで使用することができます。

### Audioブロックで効果音を出力する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/df00b701-f75c-6033-2319-b06a2faf5fcc.png" width="32%">

音楽やBGM、効果音などを指定することで流すことができます。
ローカルのデータをアップロードすることで音声の指定ができます。

### Randomブロックでランダム分岐する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/12ffb4b6-aa84-fe00-196f-d4e1af2a4108.png" width="32%">

Pathsを増やしていくことで、分岐数を増やしていくことができます。
今回は登場人物ごとの名言を最大で3つ用意したので、こちらを使って、そのうちから一つ名言が出力される処理としました。

### Choiceブロックで音声入力値を判定する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/afb4bb62-7312-88dc-f3ba-9fb3f478a828.png" width="32%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/b692f773-611c-d802-da32-dfc939a1198f.png" width="32%">

ユーザーの音声入力値を判定するために、```intent```と呼ばれるものを作成し、分岐させることができます。
分岐は、変数の```Entity```を作成することで判定処理をスムーズに実装できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/95012816-4c63-704f-1f9e-a5ed2dd7feae.png" width="25%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/314ed7b3-7878-21d6-ae8a-1e6b7284d2d8.png" width="23%">

上記では、```name```という変数の```Entity```にて登場人物名を追加することで、```intent```にて、音声入力値が用意されている登場人物であるか判定できるようにしています。

### Conditionブロックで音声入力値によって分岐する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/38d95be6-d055-c9e1-d3b6-e6c8b1b22156.png" width="30%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2756612/0d21654c-525b-fede-e0e4-3e6f32f221bf.png" width="47%">

条件分岐を作成することができます。
条件は複数組み合わせることができ、一部一致や、全文一致など用途に合わせて実装できます。
今回は、名言の復唱判定にて使用しました。
```Capture```にて音声入力値を変数に保存し、その変数が名言と一致しているか判定しています。

::: note
工夫した点としては、実際に音声にて入力されたときVoiceflow側で認識される言葉がひらながになったり、漢字になったりと意図とは違う変換をされることがあったので、そこを何回か自分の言葉で確認して変更しました
:::

</div></details>

## トライしたこと

一つトライしたことがありました。
それは**名言だけで会話できないか？**
というもので、今回一応実装してみました。

どういうものかというと、最初の質問に対して「会話」というと、シャアが現れます。
名付けて **「シャアとの名言と会話できるハロ」** です。
彼がとんちんかんなことを言いますので、それに対して反応していくというものです。
結果、シャアが最後攻撃をしてくるのですが、攻撃をされない選択肢がありますので、ぜひ見つけてもらえればと思います！

裏機能的につけているので、一度やってみてもらえればと思います！
ランダムなところもあるので、やるたびに少し変わると思います。

## ハロの完成！！

こちらからご使用いただけます！

https://creator.voiceflow.com/prototype/63675e66ee53a9ce3be7b7df

こちらは名言復唱ハロです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/kuXRjEnhSy8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

こちらはシャアの名言と会話できるハロです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/vkpX8O-QtQ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 職場の人にも使ってもらった

一旦、ここまで作ったところで職場の同僚に試してもらい、フィードバックをもらいました。
ちなみに、ガンダムを詳しくは知らない人です。

反応としては、それなりに対話できるところは楽しんでもらえました。
また、**間違えたときにハロの口調が厳しくなるところは、面白がってもらえました！**

トライにて実装した「シャアの名言と会話」する部分に関しても、一度僕が実施した動画を見てもらってから使ってもらうと、それなりに面白がってもらえました。
最初はガンダムのことを知らない人に使ってもらって、面白がってもらえるか不安ではありましたが、会話できる部分が割とよかったみたいです(単純に技術が面白いことも理由かと)。

そして、以下同僚からの意見です。

- Voiceflow側の会話のテンポが速い気がする
- 名言に合わせたテンポで話させることができたらなお良い
- 「シャアの名言と会話」では、対話の部分に結構制限があるので、もっと柔軟にできたらなお良い
- 最初に、どういうものか説明させても良いのじゃないか？
- 名言が単発すぎるので、背景とかの説明がほしい
- ハロってなに？

会話のテンポに関しては、その通りだと思いました。
エフェクト機能とか使って、そのあたり変更できるので、**意外に作りこもうと思えば本物に近づけることはできるんじゃないかと、期待を持っています。**
他の意見に関しては、音声ユーザーインターフェースの課題だな、と感じています。
柔軟性を持たせることは、もちろんしたいのですが、今回は単純な使い方と、複雑な使い方の二通りの使い方を試した結果、やはり複雑な使い方だと、よりツッコミどころが増えて、しっかりと設計しないとユーザーを混乱させるな、と思いました。
**特に「シャアの名言と会話できるハロ」では、無理やり会話にしているので、返答するタイミングがわからない、、、** 😢
このあたりは、難しい課題だなと思います。

個人的に感じたのは、言葉を発する人によってVoiceflow側で変換する言葉(漢字なのかひらがななのか)が異なっていたので、そこで予期しない反応になることがあったので、判定処理を見直す必要があるな、と思いました(これはこれで面白かったですが、、、)。

## 今後の改善点

- 会話のテンポを、名言に合わせたものにする
- 対話の部分の設計をもう少し考える
- 名言の数を増やす
- 音声入力部分の判定処理を見直す

最後までお読みいただきありがとうございました！！