GoogleHomeから自作Webサービスを呼び出す

この記事では、GoogleHomeに独自の機能を追加する方法の１つとして、自作のWebサービスを呼び出す方法を書きたいと思います。今まで、IFTTTを使用した方法を紹介していましたが、それに比べるとかなり難易度が上がります。開発者向けの記事になります。

目標の機能
必要なものと構成
自作Webサービスの準備
Actions on Googleの設定（前半）
DialogFlowの設定
Actions on Googleの設定（中盤）
Actions on Googleの設定（後半）
まとめ

目標の機能

今回、追加したかった機能は、以下の機能です。

私）OK、Google。開始！
GoogleHome）時間を計測します。
(数秒経過後)
私）終了！
GoogleHome）時間は、〇分〇秒です。

でも、ここまで行けませんでした…
（T-T)
いま作れている機能は、チャットボットならぬ、音声ボットですね。開始時間を覚えておくための機構がまだ作り込めませんでした。

必要なものと構成

今回の構成は次のものです。

GoogleHome、または、Androidスマホ（Google Assistant)
Actions on Google
DialogFlow
Google Cloud platformのGoogle Cloud Function

構成は次のような感じです。

自作Webサービスの準備

まずは、本気を出すと一番時間のかかる自作Webサービスの準備からします。今回は、GoogleCloudPlatformのCloudFunctionを使用します。ここは、作るものによっては、自作サーバでもAWSでもレンタルサーバでもなんで良いと思います。ストップウォッチならなら簡単に作れるっしょと思って、CloudFunctionを選択しています。(CloudFunctionの本体は、Node.jsです)作成の雰囲気は、次のとおりです。

exports.test = function test(req, res) {
 let mes;
 if(!req.body.result.parameters.stopwatch){
  mes = "リクエストがないよ。";

 } else if(req.body.result.parameters.stopwatch == "test"){
  mes = "CloudFunctionとDialogflowの疎通OK";
   
 } else if(req.body.result.parameters.stopwatch == "start"){
  mes = "スタート。" + req.body.timestamp;   

 } else if(req.body.result.parameters.stopwatch == "end"){
  mes = "終わり。まだ時間は答えられないの。"+ req.body.timestamp;
 }
 res.setHeader('Content-Type', 'application/json');
 res.send(JSON.stringify({"speech": mes, "displayText": mes}));
};

{
  "name": "sample-http",
  "version": "0.0.1"
}

Actions on Googleの設定（前半）

次に、「Actions on Google」の設定に移ります。Googleで「Actions on Google」と検索したページにアクセスして、右上の「Actions Console」ボタンをクリックします。初めてアクセスされる方はプロジェクトが何もないと思いますので、「Add/import project」を選択します。

※設定の過程で、何度かGoogleAcountへの認証が求められますが、全てOKしましょう。

プロジェクトは、３つまでしか追加できません。ここに、ProjectNameに書いてもいいです。既にGCPのProjectがある場合は、自動で表示されますので、CloudFunctionを作成たGCPプロジェクトを選択しましょう。
※ログインしているGoogleアカウントが同一のものしか表示されません。

プロジェクトを作成すると、どんな種類のアプリケーションを作るか選択します。今回は、「Dialogflow」を使用します。Dialoflow以外にも選択肢がいくつかありますね。

DialogFlowを選択すると次の画面が出てきます。この中で、「CREATE ACTIONS ON DIALOGFLOW」を選択すると、「Actions On Google」のプロジェクトと紐づいた、「Dialog Flow」のプロジェクトを作成できます。

(Actions On Googleの設定は、一旦ここまでで、あとでまた設定します。)

DialogFlowの設定

最初の画面で、「DESCRIPTION」（概要）、「DEFAULT LANGUAGE」（言語）だけ設定しましょう。

DialogFlowで設定する項目は、次の画像のとおり３つです。

Intents
Entities
Fulfillment

まず、「Fulfillment」ですが、Webhookの設定を記載します。Enableにすることと、GCPのCloudFunctionのところで出てきた、HTTPトリガーのURLを設定します。

次に「Entity」の設定です。「stopwatch」というentityを作成します。これは、CloudFunctionの「req.body.result.parameters.stopwatch」に該当する変数を格納するものです。

「Intents」の１つ目の設定です。これは、IFTTTの設定に似ていますね。「User Says」は、GoogleHomeに話しかける言葉を書きます。日本語の場合は、「テスト」と入力すると、「test」ではなく「テスト」と捉えられるので、日本語の方がよいかなと思います。どうしてもという場合は、何個も登録しましょう。

Actionという欄には、POSTする際のパラメータを設定できます。先程作ったentityに対して、固定で「test」と入れています。この指定をすることで、CloudFunctionのjsで書いた次のIF文の中に入ることができます。「if(req.body.result.parameters.stopwatch == “test”)」

webhookを利用する場合は、Responseの設定は不要です。

Fulfillmentで、「Use Webhook」にチェックします。

「Intents」の２つ目の設定です。今度は、Webhookを使用しない例です。

１つ目の「Intents」と違うのは、「Response」の設定をすることと、「GoogleAssistant」の「End Conversation」にチェックを入れます。「End Conversation」については、あとで設定する理由を書きます。

今までの設定をテストできます。「テスト」と「終了」と音声入力があった場合のDialogflowの振る舞いを確認することができます。「DEFAULT RESPONSE」のところを確認すると、「テスト」と入力した際は、webhookで飛ばした先のCloudFunctionで指定した値。「終了」と入力した際は、Dialogflowで設定した値がレスポンスに表示されていることが確認できます。詳細なやりとりは、「Show JSON」をクリックすることで確認することができます。

最後に、Dialogflowで設定してきた内容をGoogleAssistantにIntegration連携します。

Actions on Googleの設定（中盤）

色々経由してきたのですが、「Actions on Google」のDialogFlowの設定（Actions)が終わったので、そのほかの情報を設定していきます。

Action on Googleの「Simulator」でテストを行います。個人で楽しむレベルでも「App information」のところが必要です。それ以外の部分は、アプリを公開する際に必要なものです。大事な部分は、赤い四角のところです。そのほか必要に迫られたら設定してきましょう。

Actions on Googleの設定（後半）

最後に、今まで設定してきたことをテストします。「Simulator」の「CHANGE VERSION」を選択し、テストモードを起動します。

Dialogflowでやった時のように、実際に入力する音声をテキストベースで入力していきます。

実際に入寮すると、次のように返答がかえってきます。

ここまで、来ると、GoogleHomeやスマホに同じことをしゃべると同じことを音声で知らせてくれるようになります。「テストバージョンの」と言われるところは、リリースするとなくなるのかな？と思います。まだリリースできていないので、簡単なバージョンにしてリリースしてみたいと思います。

あとで説明すると書いていた、Dialogflowの「End Conversation」の設定ですが、実機（GoogleHome）で試したところ、「終了」という呪文を唱えないとずーーっとGoogleHomeが音声入力待ち状態になってしまいます。それを終了させるための設定でした。色々試している中で、CloudFunction上の処理で、処理例外が発生した場合は、待ち状態が解除される模様です。

まとめ

GoogleHomeから自作Webサービスを呼び出すアプリの作成過程を書きました。だいぶ雑な感じに書いてしまいました。間違えがありましたら、ご指摘ください。実際に作り終えてみると、割と簡単ですね！Androidアプリみたいにコードをガリガリ書くわけではないので、プログラムをちょっと書いたことのある人ならすぐに作れそうです。ストップウォッチ機能は実現できていないのですが、GoogleHomeで自分の作った機能が動くと感動しますね★今後は、次のことを考えています。