Table Cardを試してみた #io18jp

概要

Google I/O 2018で発表された、 Table Card（Google Assistantのレスポンス）を試してみたので、実装方法を紹介したいと思います。DialogflowのWebコンソールを使用した実装方法（静的）とFulfillmentを使った実装方法（動的）を紹介したいと思います。

注意
Table Cardは現在プレビューバージョンであり、Actions on Google のシミュレーターのみでテストすること出来ます。

Table Card

Table Cardを使用すると、行列の表をレスポンスとしてユーザーに返すことが出来ます（スポーツの順位、選挙結果、フライトなどの情報を綺麗に表示することができそうです）。Table Cardは行列それぞれ最大３つまで定義することができます。

動作環境

Table Cardは以下のSurfacesが含まれていることが必須となります。

actions.capability.SCREEN_OUTPUT

Dialogflowの準備

• Agentの作成
  • DEFAULT LANGUAGE
    • English - en
  • DEFAULT TIME ZONE
    • (GMT-8:00) America/Los_Angeles

DialogflowのWebコンソールでTable Cardを実装

Intentの作成

• Training phrases
  • Show me table card
• Responses > GOOGLE ASSISTANT > ADD RESPONSES > Simple Response
  • Simple Responseは必須なので必ず定義する
  • 私は Here you go!といれました
• Responses > GOOGLE ASSISTANT > ADD RESPONSES > Table Card
  • 行列に好きな文字を入れる

シミュレーターで確認

SurfaceをSmart Displayにしてから、「Show me table card」と入力

表示できた！

Fulfillmentで実装

今回はFirebase functionsを使い実装します。Firebase functionsの使い方はこちらご参照ください。

• プロジェクト準備

$ firebase init

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
? Do you want to install dependencies with npm now? Yes

index.js

'use strict';

const { dialogflow, Table } = require('actions-on-google');
const functions = require('firebase-functions');

const app = dialogflow();

app.intent('TableCard', (conv) => {
  conv.ask('Here you go!');
  conv.ask(new Table({
    dividers: true,
    columns: ['header 1', 'header 2', 'header 3'],
    rows: [
      ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
      ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
    ],
  }));
});

exports.xxxxx = functions.https.onRequest(app);

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "actions-on-google": "^2.1.1",
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "private": true
}

actions-on-googleのバージョンは必ず 2.1.1以上 にしてください。

• デプロイ

$ firebase deploy

Function URL: https://us-central1-flatfishtest.cloudfunctions.net/xxx

dialogflowの操作

• Fulfillment Webhookを有効にし、Function URLをセット
• Intentの準備
  • 名前
    • TableCard
  • Training phrases
    • Show me table card
  • 一番下の Enable Webhookにチェックを入れる
    • Fulfillment > Enable Webhook call for this inetent

シミュレーターで確認

動いた

TableCardをカスタマイズ！

TableCardは画像やボタンなど色々な要素を追加したり、文字を左右中央揃えをすることができます。詳しくはこちらご参照ください。

index.js

'use strict';

const { dialogflow, Table, Image, Button } = require('actions-on-google');
const functions = require('firebase-functions');

const app = dialogflow();

app.intent('TableCard', (conv) => {
  conv.ask('Here you go!');
  conv.ask(new Table({
    title: 'Title',
    subtitle: 'subtitle',
    image: new Image({
      url: 'https://your-server/apple.png',
      alt: 'Apple'
    }),
    dividers: true,
    columns: ['header 1', 'header 2', 'header 3'],
    rows: [
      ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
    ],
    buttons: new Button({
      title: 'GitHub',
      url: 'https://github.com/actions-on-google'
    }),
  }));
});

exports.flatfishtest = functions.https.onRequest(app);

色々カスタマイズできた。

Table Cardの印象

シミュレーターでプレビューした時に、TableCardは横のスクリーンに適している印象を持ちました。Table Cardは今後発売予定のSmart Displayの主力UIになるかもしれません。