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
    - 行列に好きな文字を入れる

<img width="644" alt="Screen Shot 0030-05-12 at 15.25.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/7fa3dfe2-49b7-4708-9620-8e9a51198be0.png">

### シミュレーターで確認
SurfaceをSmart Displayにしてから、「Show me table card」と入力

<img width="604" alt="Screen Shot 0030-05-12 at 15.32.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/f510f9b2-1824-f73b-c5dc-214a238a7bc0.png">

**表示できた！**

## Fulfillmentで実装
今回はFirebase functionsを使い実装します。Firebase functionsの使い方は[こちら](https://firebase.google.com/docs/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
```

```javascript: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);
```

```json: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

### シミュレーターで確認
動いた

<img width="604" alt="Screen Shot 0030-05-12 at 15.32.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/7c209836-39c5-f1e0-e472-be15200bd34e.png">

## TableCardをカスタマイズ！
TableCardは画像やボタンなど色々な要素を追加したり、文字を左右中央揃えをすることができます。詳しくは[こちら](https://developers.google.com/actions/assistant/responses#customize_table_card_elements)ご参照ください。

```javascript: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);
```

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

<img width="558" alt="Screen Shot 0030-05-12 at 18.12.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/114922/65822e67-d70b-ae2b-6c6b-43b11eb63584.png">

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