スマートスピーカーで、サイゼリヤ1000円ガチャを作ってみた

次の記事に触発されて「サイゼリヤ1000円ガチャ」をスマートスピーカーで作成してみました。
[サイゼリヤ1000円ガチャをつくってみた(Heroku + Flask + LINEbot)](https://qiita.com/marusho_summers/items/a2d3681fac863734ec8a)

使用したツールは、[Voiceflow](https://www.voiceflow.com/) です。Amazon AlexaとGoogle Home版の2種類が作成できるので、おすすめです。

##### 概要
実際の動きは、twitterに動画を上げましたので、参照ください。
<img width="299" alt="v3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/6b4f33e6-959f-935f-be05-9d5a6cb5db59.png">
[Amazon Alexa](https://twitter.com/allforbigfire/status/1132542522650005505)

<img width="285" alt="v4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/3d460f9b-0236-fe64-110b-f147666c9755.png">

[Google Home](https://twitter.com/allforbigfire/status/1132541959833210881)

##### 処理の流れ
<img width="817" alt="v2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/a34cd8f5-72ae-e075-e7c1-daa4a84f46dc.png">

- Code Block 1つ目

115品目あるメニュー表から、データを引用するために乱数を発生させます。

```
var maxNo = 115 ;
//Random number generator for values 1 through var maxNo
no = Math.floor((Math.random() * maxNo) + 1);
```

- Integrations Block

Voiceflowの特色の一つとして、難しいコードを書かずに、Googleスプレッドシートを扱える事があります。手軽にデータベースが使えるのは、非常に便利です。


@marusho_summers 様が[GitHubで公開されているデータ](https://github.com/marushosummers/Saizeriya_1000yen)をSQLiteを開けるフリーソフトで開いて、Excelに貼りつけ。整えて、Googleスプレッドシートにアップロードしました。

<img width="583" alt="saizeriya.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/b9fd4957-74fd-8c62-10c4-80f05e0f8b27.png">

Voiceflowの設定は、次の画像の通りです。

<img width="255" alt="v5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/0b4e5932-2c48-4a3a-a7b8-e49470aa2212.png">
<img width="257" alt="v6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/e120922b-48ff-029a-34f2-8373681f40f9.png">


※　たまに、googleスプレッドシートの認証が上手くいかない時があります。
「User is Request failed with status code 500 」と表示されたら、ハードリフレッシュのためにCtrl+Shift+R(Winクローム)を実行してください。
それでも改善しない場合は、[Googleアカウント>アカウントにアクセスできるアプリ](https://myaccount.google.com/permissions)から、「Voiceflow Creator Tool」を選択して、アクセス権の削除を実行すると、認証からやり直す事が出来ます。

- Code Block 2つ目

```
hantei = Number(sum_budget) + Number(budget);
```

##### AlexaかGoogle Homeか判定

Speak Block だけだと、文字が表示されないのでCard Blockも使いました。
しかし、Googleアシスタントだと文字が2重に出力されるので、プラットホームを判定して、処理を分けました。(変更前は、概要の画像のようになってました)

<img width="390" alt="v7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/19284eaa-c266-87f6-bba3-8ff6aa9019e6.png">


##### 乱数にならない
再生マークみたいなボタンは、Quick Testです。
<img width="519" alt="v10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/a722b8ec-6f02-8245-e322-b8dfd20345e9.png">

PROJECT TESTINGと表示されるので、Debug Modeをオンにします。
<img width="537" alt="v12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/59034685-26b5-c2d9-cb9f-7ad95ecdcfb7.png">

ここでは、押すたびに結果が変わるのですが・・・。
<img width="539" alt="v13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155894/5340d615-38b1-7124-487f-9f931355d6b2.png">

paiza.ioで乱数を発生させる場所をテストしてみたのですが、問題ありませんでした。
今後の課題とします。

#### 本記事で伝えたい事

短い時間でサービスを作るハッカソンなど、動くことを実感したい場面に、Voiceflowをお勧めします。

**Voiceflowはいいぞ！**