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は行列それぞれ最大3つまで定義することができます。
動作環境
Table Cardは以下のSurfacesが含まれていることが必須となります。
actions.capability.SCREEN_OUTPUT
Dialogflowの準備
- Agentの作成
- DEFAULT LANGUAGE
- English - en
- DEFAULT TIME ZONE
- (GMT-8:00) America/Los_Angeles
- DEFAULT LANGUAGE
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
'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);
{
"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は画像やボタンなど色々な要素を追加したり、文字を左右中央揃えをすることができます。詳しくはこちらご参照ください。
'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になるかもしれません。
Author And Source
この問題について(Table Cardを試してみた #io18jp), 我々は、より多くの情報をここで見つけました https://qiita.com/flatfisher/items/06ea64dfb9063f2f7460著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .