Google Homeにプレゼンさせてみた。

こんにちは。楽楽精算開発チームの岡本です。

会社で購入したGoogleHomeで自由に遊べる権利を頂いたので、色々と遊ばせてもらいました。
先日その内容を社内でプレゼンする機会があったのですが、せっかくなのでGoogleHome自身にプレゼンしてもらいました。

今回は、その際に実施した設定を説明しようと思います。
※設定方法についてはwest-cさんが既に書かれているので、設定した内容だけ書いていきます。

今回やりたいこと

スマートフォンでプレゼン開始を指示する。
ディスプレイにスライドが表示される。
GoogleHomeがスライドの内容を喋り始める。
スライドの内容を喋り終えると、次のスライドに切り替わる。
スライドが終了するまで２～４を繰り返す。

準備するもの

Wan側

Action on Google
- Googleアシスタント内で呼出し可能なチャットアプリ
  *1を構築できるサービスです。
- 構築したチャットアプリ
  から更に別のWebサービスを呼び出すこともできるので、この仕組を用いればGoogleアシスタントから直接Webサービスを呼び出せます。
- 今回はDialogflowを呼び出すように構築しています。
Dialogflow
- 自然言語の解析エンジンです。受取った音声データを解析してテキストに変換してくれます。
- また、Firebaseのホスティングを用いたスクリプト実行も可能なので、変換したテキストを他のWebサービスに連携させたりもできます。
Firebase
- いわゆるBaasです。
- 今回はホスティング機能とDB機能を使用します。

Lan側

RaspberryPi
- 超小型のコンピューターです。
- 今回は以下の機能を実装しています。
- - ディスプレイへのスライド切替え通知
  - GoogleHomeへのメッセージ通知
GoogleHome
- いわゆるスマートスピーカー。今回は喋らせるだけなのでスマートな機能は使いません。

ざっくりとした処理の流れ

スマートフォンのGoogleアシスタントからAction on Googleで構築したチャットアプリ
を呼び出す。
チャットアプリ
で入力した音声データをDialogflowに連携する。
Dialogflowの解析結果テキストをFirebaseのDBに保存する。
保存したテキストをRaspberryPiに通知する。
（通知されたテキストがプレゼン開始キーワードの場合は、プレゼンを開始する。）
スライドの表示/切り替えをディスプレイに通知する。
喋らせるメッセージをGoogleHomeに通知する。

Action on Googleの設定

Action on Googleで新規プロジェクトを作成しAction
とApp information
を設定します。

Action

ADD ACTIONS
からDialogflowを選択します。

App information

重要なのはAssistant app name
の項目だけです。
Assistant app name
で設定した名前でGoogleアシスタントでチャットアプリ
を呼び出すことになります。
今回は「発表アプリ」にしたので、スマホに「OK Google 発表アプリにつないで」と話しかけるとチャットアプリが起動します。
それ以外の項目については適当に設定してしまって問題ないです。

以上でAction on Googleの設定は完了です。

Dialogflowの設定

Action on GoogleのAction
設定から、Dialogflow画面に遷移できるので、新規プロジェクトを作成しIntents
とFulfillment
を設定します。

Intentsの設定

チャットアプリで入力した音声データに対して、どのように振舞うのかを設定します。今回は以下の2つを設定します。

Default Welcome Intent
チャットアプリ
が起動した時の振舞いを設定します。
今回は、アプリ起動時にチャットアプリ
が「発表アプリを起動しました。」と応答するようにText response
を設定しました。

プレゼン開始
チャットアプリ
にプレゼン開始を指示した時の振舞いを設定します。今回は以下のような振舞いを想定しています。

「プレゼン開始」の音声入力でsaveData
というアクションが実行されるように設定します。
saveDataの内容についてはFulfillmentで設定します。

アクション実行後、チャットアプリ
が「プレゼンを開始しました。」と応答するように設定します。

Fulfillmentの設定

Inline EditorをENABLEDに変更し、index.jsとpackage.jsonを以下のように設定します。

/** index.js **/

'use strict';

const firebase = require("firebase");
const functions = require("firebase-functions");
const DialogflowApp = require("actions-on-google").DialogflowApp;

// Firebaseへの接続情報
var config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(config);

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
    var app = new DialogflowApp({request, response});
    let actionMap = new Map();
    // saveDataアクションを登録
    actionMap.set("saveData", function(app) {
        // Firebaseにキーワードを保存する
        firebase.database().ref("/googlehome").set({word:"プレゼンを開始します"});
    });
    app.handleRequest(actionMap);
});

Firebaseへの接続情報はFirebaseの画面でウェブアプリに Firebase を追加をクリックして表示されるコードを使用します。

/** package.json **/
{
  "name": "dialogflowFirebaseFulfillment",
  "description": "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase",
  "version": "0.0.1",
  "private": true,
  "license": "Apache Version 2.0",
  "author": "Google Inc.",
  "engines": {
    "node": "~6.0"
  },
  "scripts": {
    "start": "firebase serve --only functions:dialogflowFirebaseFulfillment",
    "deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment"
  },
  "dependencies": {
    "actions-on-google": "^1.5.x",
    "firebase": "^4.8.0",
    "firebase-admin": "^4.2.1",
    "firebase-functions": "^0.5.7",
    "apiai": "^4.0.3"
  }
}

設定後、DEPLOYをクリックしFirebaseへスクリプトをデプロイします。

以上でDialogflowの設定は完了です。