アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Google Homeアプリ開発を試してみました

こんにちは、中川です。

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

作るもの

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

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

アプリケーション構成

f:id:nakagawayoshiki:20180901211217p:plain

用語

開発

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

f:id:nakagawayoshiki:20180901211227p:plain

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

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

f:id:nakagawayoshiki:20180901211230p:plain

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

f:id:nakagawayoshiki:20180901211233p:plain

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」を教えてインテントを保存します。

f:id:nakagawayoshiki:20180901211236p:plain

次に「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」に「おえういあ」と返ってきました。成功です!

f:id:nakagawayoshiki:20180901211239p:plain

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

f:id:nakagawayoshiki:20180901211242p:plain

  • Implicit invocation: test1

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

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

f:id:nakagawayoshiki:20180901211247p:plain

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

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

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

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

おわりに

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

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

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