Google Homeでサイコロトークアプリを作ってみた

Google Homeでサイコロトーク出来るアプリを作ってみました。
お馴染みの音楽「何が出るかな♪」が流れた後にお題が出されます。
トークは毎回ランダムで設定されます。

※実際にリリースしてないので、遊べませんｗ

#完成動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Google Homeでサイコロトークアプリ作ってみた。<br>Heroku／Node-RED／DialogFlowで簡単に実装出来ますね！<br> <a href="https://twitter.com/hashtag/GoogleHome?src=hash&amp;ref_src=twsrc%5Etfw">#GoogleHome</a> <a href="https://twitter.com/hashtag/%E3%81%94%E3%81%8D%E3%81%92%E3%82%93%E3%82%88%E3%81%86?src=hash&amp;ref_src=twsrc%5Etfw">#ごきげんよう</a> <a href="https://twitter.com/hashtag/%E3%82%B5%E3%82%A4%E3%82%B3%E3%83%AD%E3%83%88%E3%83%BC%E3%82%AF?src=hash&amp;ref_src=twsrc%5Etfw">#サイコロトーク</a> <a href="https://t.co/KPNKZhZc6i">pic.twitter.com/KPNKZhZc6i</a></p>&mdash; がおまる@スマートスピーカー・HoloLens研究者 (@gaomar) <a href="https://twitter.com/gaomar/status/946548357928927232?ref_src=twsrc%5Etfw">2017年12月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#構成図
Dialogflowを使ってWebhookへの導線を設定しています。
Heroku上に展開したNode-REDのAPIにてサイコロトークのお題処理を行っています。

![仕組み.001.png](https://qiita-image-store.s3.amazonaws.com/0/154355/8f35e25c-10e5-08fb-b3f3-4fd82ad43fcd.png)

#手順

##1.HerokuにNode-REDを入れる
[Heroku](https://www.heroku.com/)にNode-REDを入れていきます。導入方法は[この方の記事](https://qiita.com/chidakiyo/items/ccbd0b42f8b808f9f510)を参考にしてください。
お好みでBASIC認証の設定をしておきましょう。
※Herokuは15分でサーバーが休止してしまいます。試す際は接続し直すなどしてサーバーを稼働状態にしておきましょう。

##2.ノードの配置

###2-1.httpノードを設置する
Node-REDにログインして、アクセスするAPIのURLを設定します。
入力にある`httpノード`をフローにドラッグアンドドロップしましょう。

![スクリーンショット 2018-01-10 14.20.34.png](https://qiita-image-store.s3.amazonaws.com/0/154355/2c0eba76-a59d-dce0-44e5-d0519c400a62.png)

###2-2.functionノードを設置する
同じように機能にある`functionノード`をフローにドラッグアンドドロップしましょう。

![スクリーンショット 2018-01-10 14.21.04.png](https://qiita-image-store.s3.amazonaws.com/0/154355/655a9445-ec81-3e48-7414-ccfdf28f8f5e.png)

###2-3.http responseノードを設置する
最後に`http responseノード`をフローにドラッグアンドドロップします。

![スクリーンショット 2018-01-10 14.21.35.png](https://qiita-image-store.s3.amazonaws.com/0/154355/e11b37a8-5e89-ebb1-c4a4-a6dd5e532094.png)

###2-4.配置例
最終的にこのような配置にすればOKです。

![スクリーンショット 2018-01-10 14.22.32.png](https://qiita-image-store.s3.amazonaws.com/0/154355/7515d796-898c-8ac8-238e-fed065234b86.png)

##3.ノードを編集する

###3-1.httpノードを編集する
httpノードをダブルクリックしてノードを編集しましょう。

![スクリーンショット 2018-01-10 14.22.33.png](https://qiita-image-store.s3.amazonaws.com/0/154355/fb8b7aeb-297b-d6d2-831d-04f01cbdb70a.png)

![スクリーンショット 2018-01-10 14.23.01.png](https://qiita-image-store.s3.amazonaws.com/0/154355/4c4f3f91-100b-c3ef-5231-b32ae978253a.png)

###3-2.functionノードを編集する
続いてfunctionノードをダブルクリックしてノードを編集します。

![スクリーンショット 2018-01-10 14.22.34.png](https://qiita-image-store.s3.amazonaws.com/0/154355/b089eee3-2ed9-c1b6-2da5-74d23af61c47.png)

![スクリーンショット 2018-01-10 14.32.20.png](https://qiita-image-store.s3.amazonaws.com/0/154355/91145b26-bee0-be16-0dc8-10163a9df149.png)

音楽が流れた後に1秒待ってから、お題を言います。
再生したい音楽のURLを指定しましょう。

```javascript:functionノード
const url = `https://好きな音楽のURLを指定しましょう.mp3`;

const wadai = ['情けない話。略して「なさばな」', 
                '初めてまるまるした話。略して「はじまる」',
                '信じられない話。「アンビリバボー！」',
                '旬な話。「フレッシュ！」',
                'シャレにならない話。略して「しゃればな」',
                '今日の当たり目！。「おめでとー！おめでとー！」'];

// お題をランダムで選択します。
const wadaiIndex = Math.floor(Math.random() * wadai.length);
const gWadai = wadai[wadaiIndex];

// 指定したURLの音楽を再生して1秒待ってからお題をいいます。
// 途中にある「。」はこれを入れると音楽がブチッと切れて変な声になるのを防ぐ役割をしています。
const speak = `<speak><audio src="${url}"/><break time="1s"/>。${gWadai}</speak>`;

const wk = {  
   "followupEvent":{  
      "name":"LOCAL_WEBHOOK_RESULT",   // LOCAL_WEBHOOK_RESULTというイベント名を生成しています
      "data":{  
         "ret":speak
      }
   }
}
msg.payload=wk;
return msg;
```

###3-3.http responseは何もしません
http responseノードは何も編集しません。

##4.ノードを繋げる
Node-REDの一番重要な作業です。各種ノードを線で繋げていきます。

![スクリーンショット 2018-01-10 14.32.49.png](https://qiita-image-store.s3.amazonaws.com/0/154355/fffa4ed3-fe7f-3222-37ba-b0693ff95851.png)

![スクリーンショット 2018-01-10 14.33.09.png](https://qiita-image-store.s3.amazonaws.com/0/154355/6cddf130-76cf-a68f-924e-4acf52868fab.png)


##5.デプロイする
画面右上にある赤いデプロイボタンをクリックしてデプロイしましょう。

![スクリーンショット 2018-01-10 14.33.21.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d3afbf77-f7ba-dcc4-0dd3-5b9654250d6a.png)

##6.Dialogflowに新しいAgentを作成する
Create new agentをクリックして新しいAgentを作りましょう。

![スクリーンショット 2018-01-10 16.34.19.png](https://qiita-image-store.s3.amazonaws.com/0/154355/f46d3bca-4e4d-a980-e4c3-2cc1a2b9551e.png)

![スクリーンショット 2018-01-10 14.53.07.png](https://qiita-image-store.s3.amazonaws.com/0/154355/ca84ce3f-3af7-b9c2-8094-834822652321.png)

###6-1.Fulfillmentを設定する
作成したAPIにアクセスするためのURLを指定します。
これでDialogflowとNode-REDが繋がりました。

![スクリーンショット 2018-01-10 14.36.50.png](https://qiita-image-store.s3.amazonaws.com/0/154355/20b90c3c-001a-d781-f5c2-8569e5dbec99.png)

###6-2.サイコロ処理を行うIntentを作成する
Intentsのプラスマークをクリックして新規Intentを作成します。
好きなIntent名にして、一番下にあるFulfillmentの`Use webhook`のチェックを入れます。

![スクリーンショット 2018-01-10 14.45.40.png](https://qiita-image-store.s3.amazonaws.com/0/154355/64851e77-3ed9-b7c8-8baa-9d91b06cd0ca.png)

![スクリーンショット 2018-01-10 14.46.18.png](https://qiita-image-store.s3.amazonaws.com/0/154355/aba96262-ab87-c515-0ee6-c7183bcb385f.png)

###6-3.結果を返すIntentを作成する
新規Intentを作成して各種項目を埋めていきます。

![スクリーンショット 2018-01-10 14.47.03.png](https://qiita-image-store.s3.amazonaws.com/0/154355/95652656-c875-6e43-1bfa-2db615631665.png)

※End Conversationの項目は7の設定を行った後に出てきます。

Action

| 項目       | 設定値 |
|:----------|:---|
| PARAMETER NAME   | ret|
| ENTITY   | @sys.any|
| VALUE   | #LOCAL_WEBHOOK_RESULT.ret|



##7.Actions on Googleに繋げる
Google HomeのアプリはActions on Google上で動きます。
その為、DialogflowとActions on Googleを結びつける必要があります。

###7-1.Integrationsを開いてActions on Googleと結びつける
![スクリーンショット 2018-01-10 16.40.46.png](https://qiita-image-store.s3.amazonaws.com/0/154355/bbd22e54-73e2-ae46-960f-0d1ade79131c.png)

###7-2.初回起動させるIntentを指定する
「OK! グーグル！」と言った後に最初に反応するIntent名を指定します。
今回の場合だと`「dice」`を指定します。
設定が終わればTESTボタンをクリックします。クリックするとActions on Googleへ飛びます。

![スクリーンショット 2018-01-10 14.49.19.png](https://qiita-image-store.s3.amazonaws.com/0/154355/23b5560b-c2bd-10b6-fb63-85f305653cdd.png)

##8. Actions on Googleの設定
ここからはActions on Googleの設定を行います。
アプリ名の設定や実際にシミュレーションすることが出来ます。

###8-1.Overviewの設定
ここでアプリ名の設定を行います。「OK! グーグル！ ◯◯につないで」の部分ですね。

![スクリーンショット 2018-01-10 14.38.14.png](https://qiita-image-store.s3.amazonaws.com/0/154355/89cea99f-f1c4-e8e0-bf36-77d90e46487e.png)

![スクリーンショット 2018-01-10 14.39.23.png](https://qiita-image-store.s3.amazonaws.com/0/154355/1d812225-0ece-ace1-eb2b-b0e2d31c32b4.png)

###8-2.アプリの詳細
リリースする際はここはきっちりと入力しましょう。
今回は私的に利用するため適当に埋めています。

![スクリーンショット 2018-01-10 14.39.49.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d52f42fb-d0dc-14b8-cf6a-4d4924295f81.png)

###8-3.TEST DRAFTをする
ドラフト版を作成します。下にあるボタンをクリックするだけでOKです。
クリックするとシミュレーション画面に遷移します。

![スクリーンショット 2018-01-10 14.40.35.png](https://qiita-image-store.s3.amazonaws.com/0/154355/2a35690e-b1d6-4c63-df19-d002ace01f9d.png)

![スクリーンショット 2018-01-10 14.40.54.png](https://qiita-image-store.s3.amazonaws.com/0/154355/bbc1adc7-e12e-9f24-1871-a51f89f157ec.png)

###8-4.テストを行う
「サイコロにつないで」と文字を入力してエンターを押すとチャットが開始されます。
するとサイコロトークの処理が実際に動き始めると思います。

![スクリーンショット 2018-01-10 14.44.18.png](https://qiita-image-store.s3.amazonaws.com/0/154355/82d5b0de-ba68-e01e-a014-226974109fd9.png)

###8-5.Google Homeでテストする
Google Homeに向かって「OK! グーグル！ サイコロにつないで」と言うと
例の音楽が流れてお題を最後に言ってくれると思います。
Google Homeのアプリからショートカットを設定して「サイコロふって」でも反応させておくと良いかもしれませんね。

![android.png](https://qiita-image-store.s3.amazonaws.com/0/154355/a9e4ecd2-8f57-b037-52b2-13baf777fc93.png)

#まとめ
簡単にGoogle Homeのアプリが作れるので良いですね^^
まだまだアプリが少ないのでアイデア次第で面白いものが出来ると思います。
是非アプリを作ってリリースしてみてください！