こんにちは、中川です。

今回は、DialogflowとCloud Functions for Firebaseを使った、
Google Homeアプリ開発を試してみました。

作るもの

まずは簡単なもので試したいと思いますので、
「Google Homeに話しかけた内容を逆にして返答する」というアプリとします。

Googleスプレッドシートを使って会話内容を設定したりもできるようですが、
後々プログラムで柔軟に処理できるように、
今回は Cloud Functions for Firebaseを利用してみたいと思います。

アプリケーション構成

用語

• Google Home
  • グーグル製のスマートスピーカー
• Google アシスタント
  • Googleが開発したAIアシスタント。
    Google Homeや、Android端末などに導入されている。
    iOS端末では「Google アシスタント」アプリとして利用できる。
• Actions on Google
  • Google アシスタント用の開発者プラットフォーム。
    シミュレーターでのテストや、アプリの公開などを行える。
• Dialogflow
  • 自然言語での会話型インターフェイスを開発できるサービス。
    2016年にGoogleに買収されてAPI.AIから改名し現在の形に。
    Google Assistantの他、Amazon Alexa, Facebook Messenger、その他いろいろなプラットフォーム連携を行える。
• Cloud Functions for Firebase
  • Firebaseの機能の一つ。
    Firebaseの各種イベントやHTTPSリクエストによって、バックエンドコードの実行を行える。
    今回は、DialogflowのWebhook機能で呼び出して利用する。

開発

まずは、Actions on Google にログインし、
「Add/import project」からプロジェクトを作成します。

• Project Name: test1
• default language: Japanese
• country: Japan

次に作成したプロジェクトを選択し、プロジェクト内のメニューからActions画面を開き、
「ADD ACTION」から新しいActionを作成します。

「Custom intent」を選択肢、「BUILD」をクリックします。
別タブでDialogflowの画面が開かれますので、ここからはそちらで作業します。

Dialogflowのメニューから「Intents」を開き、「CREATE INTENT」で新しいインテントを作成します。

• Intent Name: test1
• Training phrases: テスト (なんでもOK)
• Action and parameters
  • PARAMETER NAME: any
  • ENTITY: @sys.any
  • VALUE: $any
• Fullfillment: Enable webhook call for this intent: ON

「SAVE」を教えてインテントを保存します。

次に「Fullfillment」メニューを開きいて、Webhookのプログラムを作成します。
今回は「Inline Editor」でブラウザ上で作ってしまいたいと思います。

'use strict';
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });
  function test1(agent) {
    const input = agent.parameters.any;
    const output = input ? input.split('').reverse().join('') : 'Error';
    agent.add(output);
  }
  let intentMap = new Map();
  intentMap.set('test1', test1);
  agent.handleRequest(intentMap);
});

「DEPLOY」ボタンで、Cloud Functions for Firebase にデプロイされて実行することができるようになります。

画面右サイドバーから、動作確認を行うことができます。
右上の入力欄もしくは、マイクアイコンから入力をおこないます。
「あいうえお」と入力して実行すると、
「DEFAULT RESPONSE」に「おえういあ」と返ってきました。成功です！

次にGoogle Assistantと連携を行います。
「Integrations」メニューを開き、「Google Assistant」の「INTEGRATION SETTINGS」を選択します。

• Implicit invocation: test1

「Add Intent」で、先ほど作った「test1」を追加します。

最後に、Google Assistantで動作確認を行います。
上記の画面の「TEST」から、「Actions on Google」の「Simulator」画面を起動できます。

画面下のインプット・マイクから入力を行います。

「かきくけこ」→「こけくきか」
「さしすせそ」→「そせすしさ」

無事、入力した逆の内容が返ってきていますね。

まだまだ細かいところは色々と調整したり設定が必要なところがありそうですが、
今回はいったんこれで完成となります。

おわりに

ちょっと試すだけであれば、特に何かをインストールする必要もなく、
コード編集からシミュレーターでのテストまで、すべてブラウザ上での操作だけで行うことができます。

色々なサービスを組み合わせているのですが、とてもスムーズに連携することができていると感じました。

また他にも色々と試してみたいと思います。