LANG SELRCT

コードを書く場所

2019年5月19日日曜日

codelabsのactions-1を手順通りにやってみる


Build Actions for the Google Assistant (Level 1)
https://codelabs.developers.google.com/codelabs/actions-1/index.html?hl=ja#0

上記のアクションを手元でキャプチャを残しながらやっていきます。

ここではcodelabの通り言語は英語の設定でやっていきます。
日本語の場合は現在対応していない機能があるためです。
まず一通り英語でやってから日本語の設定でも別の記事でやってみようと思います。

コンテンツ
  1. 事前確認
  2. PROJECTを作成してACTIONを追加します
  3. AGENTを作成して起動時の質問を設定します
  4. INTENTを作成します
  5. WEBHOOKを作成します


このアクションがやること

要約
ユーザから好きな色を聞いて色に応じた数字を返す

必要なステップ
  1. ユーザに好きな色を聞く
  2. 入力された色に応じて数字を返す
  3. 色が入力されない場合は何度も聞く
  4. ユーザはいつでも会話をやめられる


事前確認

アクティビティ管理ページで以下が有効になっていることを確認します
https://myaccount.google.com/activitycontrols
  1. ウェブとアプリのアクティビティ
  2. デバイス情報
  3. 音声アクティビティ


PROJECTを作成してACTIONを追加します

Actions on Googleコンソールを開きます
https://console.actions.google.com/


Terms of ServiceでYesをチェックしてAGREE AND CONTINUEをクリックします


Project Nameを決めてCREATE PROJECTをクリックします


Conversationalをクリックします


BuildのActionsでADD YOUR FIRST ACTIONをクリックします


BUILDをクリックします



AGENTを作成してWelcome Intentを設定します

Dialogflowが起動した後AGENT作成画面が開きます
DEFAULT LANGUAGEとTIME ZONEを設定してCREATEをクリックします


Default Welcome Intentをクリックして開きます


Responsesの中の「Hi! How are you doing?」の右端にマウスを置くと
ゴミ箱アイコンが表示されるのでクリックして削除します
その他のtextも同じようにすべて削除します


「Welcome! What is your favorite color?」を入力してSAVEします


テスト環境で確認してみます
IntegrationsからINTEGRATION SETTINGSをクリックします



Auto-preview changesを有効にしてTESTをクリックします



Simulatorが起動するので、「Talk to my test app」と入力して確定します



このように、設定した「何色が好きですか?」と聞いてくれます


REQUESTやRESPONSEのJSONもここで見ることができます


TEST画面を閉じてCLOSEをクリックしてINTEGRATION SETTINGSも閉じておきます


INTENTSを作成します

DialogflowのIntentsを開いてCREATE INTENTをクリックします


Intent nameに「favorite color」と入力してSAVE後
Training phrasesのADD TRAINING PHRASESをクリックします


Training phrasesは「favorite color」をユーザが答える時のパターンで
考えられるいくつかのパターンを登録していくと
「色」の名前の単語が自動でハイライトされます(日本語だとハイライトされない)

Action and parametersのMANAGE PARAMETERS AND ACTIONをクリックします

PARAMETER NAME:color
ENTITY:@sys.color
ENTITYは自然言語入力からパラメータの値を抽出するために使用されるもので

  • 今回の場合はフレーズ内の「色」を抽出するためのcolorが自動検出されている
  • ENTITYはPHRASEに含まれる要素でcolorやdateやnumberなどのカテゴリがある
  • colorやdateなどはDialogflowにデフォルトで備わっている
  • 備わっていないものも新規で定義できる(現在日本語は対応していない)
  • 今回の場合は「color」というカテゴリーの中に「yellow」や「Pink」などが予め登録されていて「i love yellow」の中では「yellow」が「color」だと識別される

と理解しています


色が入力されたら数字を返す処理を実現するためにはWebhookを利用します
FulfillmentのENABLE FULFILLMENTをクリックします


 Enable webhook call for this intentを有効にしてSAVEします


WEBHOOKを実装します

左のメニューからFulfillmentを開いてInline EditorをENABLEDにします

index,jsを以下のコードで上書きします
(意訳はほぼ元のコードにあったコメントをGoogle翻訳したものです)


index.js
'use strict';

const {dialogflow} = require('actions-on-google');
const functions = require('firebase-functions');
const app = dialogflow({debug: true});

app.intent('favorite color', (conv, {color}) => {
    const luckyNumber = color.length;
    conv.close('Your lucky number is ' + luckyNumber);
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
意訳
strictモード

GoogleクライアントライブラリのアクションからDialogflowモジュールをインポートします
デプロイ用にfirebase-functionsパッケージをインポートします
Dialogflowクライアントをインスタンス化します

「favorite color」という名前のインテントを処理して 'color'という名前のパラメータを収集します
colorのパラメータの文字数を取得してラッキーナンバーに入れます
ラッキーナンバーを返して会話を終了します


HTTPS POSTリクエストを処理するようにDialogflowAppオブジェクトを設定します



DEPLOYをクリックします

Simulatorを起動して確認します
https://console.actions.google.com/を開いてプロジェクトを選択して


左のメニューからSimulatorをクリックして
Inputに「Talk to my test app」を入力して確定します


「What is your favorite color?」と聞かれ
「red」と答えると
「Your lucky number is 3」とindex.jsの処理結果を返してくれました。


参考

Build Actions for the Google Assistant (Level 1)
https://codelabs.developers.google.com/codelabs/actions-1/index.html?hl=ja#0

Dialogflow Overview
https://dialogflow.com/

Dialogflow Docs
https://dialogflow.com/docs

Youtube
Intents
https://www.youtube.com/watch?v=9aHusGxntPw

Entities
https://www.youtube.com/watch?v=kzdL6GxJ_WY

Dialog control
https://www.youtube.com/watch?v=-tOamKtmxdY

Actions on Google Documentation
https://developers.google.com/actions/overview