node-red
GoogleAssistant
GoogleHome
actionsongoogle
dialogflow

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

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

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

完成動画

構成図

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

仕組み.001.png

手順

1.HerokuにNode-REDを入れる

HerokuにNode-REDを入れていきます。導入方法はこの方の記事を参考にしてください。
お好みでBASIC認証の設定をしておきましょう。
※Herokuは15分でサーバーが休止してしまいます。試す際は接続し直すなどしてサーバーを稼働状態にしておきましょう。

2.ノードの配置

2-1.httpノードを設置する

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

スクリーンショット 2018-01-10 14.20.34.png

2-2.functionノードを設置する

同じように機能にあるfunctionノードをフローにドラッグアンドドロップしましょう。

スクリーンショット 2018-01-10 14.21.04.png

2-3.http responseノードを設置する

最後にhttp responseノードをフローにドラッグアンドドロップします。

スクリーンショット 2018-01-10 14.21.35.png

2-4.配置例

最終的にこのような配置にすればOKです。

スクリーンショット 2018-01-10 14.22.32.png

3.ノードを編集する

3-1.httpノードを編集する

httpノードをダブルクリックしてノードを編集しましょう。

スクリーンショット 2018-01-10 14.22.33.png

スクリーンショット 2018-01-10 14.23.01.png

3-2.functionノードを編集する

続いてfunctionノードをダブルクリックしてノードを編集します。

スクリーンショット 2018-01-10 14.22.34.png

スクリーンショット 2018-01-10 14.32.20.png

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

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

スクリーンショット 2018-01-10 14.33.09.png

5.デプロイする

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

スクリーンショット 2018-01-10 14.33.21.png

6.Dialogflowに新しいAgentを作成する

Create new agentをクリックして新しいAgentを作りましょう。

スクリーンショット 2018-01-10 16.34.19.png

スクリーンショット 2018-01-10 14.53.07.png

6-1.Fulfillmentを設定する

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

スクリーンショット 2018-01-10 14.36.50.png

6-2.サイコロ処理を行うIntentを作成する

Intentsのプラスマークをクリックして新規Intentを作成します。
好きなIntent名にして、一番下にあるFulfillmentのUse webhookのチェックを入れます。

スクリーンショット 2018-01-10 14.45.40.png

スクリーンショット 2018-01-10 14.46.18.png

6-3.結果を返すIntentを作成する

新規Intentを作成して各種項目を埋めていきます。

スクリーンショット 2018-01-10 14.47.03.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

7-2.初回起動させるIntentを指定する

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

スクリーンショット 2018-01-10 14.49.19.png

8. Actions on Googleの設定

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

8-1.Overviewの設定

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

スクリーンショット 2018-01-10 14.38.14.png

スクリーンショット 2018-01-10 14.39.23.png

8-2.アプリの詳細

リリースする際はここはきっちりと入力しましょう。
今回は私的に利用するため適当に埋めています。

スクリーンショット 2018-01-10 14.39.49.png

8-3.TEST DRAFTをする

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

スクリーンショット 2018-01-10 14.40.35.png

スクリーンショット 2018-01-10 14.40.54.png

8-4.テストを行う

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

スクリーンショット 2018-01-10 14.44.18.png

8-5.Google Homeでテストする

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

android.png

まとめ

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