Skip to content

Instantly share code, notes, and snippets.

@music431per

music431per/codelab.md Secret

Last active May 2, 2019 07:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save music431per/de4f7893128746a207701a23d3f74c3c to your computer and use it in GitHub Desktop.
Save music431per/de4f7893128746a207701a23d3f74c3c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
codelab.md

概要

スマートスピーカー、スマートフォン、自動車、テレビ、ヘットフォンなど含む10億以上のデバイスで動いているGoogleの仮想パーソナルアシスタントGoogle Assistant、 Action on GoogleはでそのGoogle Assistantの拡張機能を作ることができる開発者のためのプラットフォームです。
ユーザーは、食品の購入や、乗車の予約など、物事を成し遂げるために会話の中でGoogle Assistantを利用します。
（Google Assistantでできることのリストについてはこちらのサイトを参考にしてください。）

開発者として、Googleのアクションを使用して、ユーザーと自分のサードパーティのフルフィルメントサービスとの間の楽しい効果的な会話体験を簡単に作成および管理できます。
このcodelabはマルチモジュールチュートリアルの一部です。各モジュールでは、特定のソフトウェア要件からアクションを構築する方法、およびコードをテストする方法に関するエンドツーエンドの手順を説明します。

このコードラボでは、Googleのアクションで開発するための初心者レベルの概念について説明します。このコードラボに従うために、プラットフォームに関する以前の経験を持っている必要はありません。

このコードラボでは、簡単な会話型のアクションを構築します。

アクションプロジェクトの作成

まずは、ベースとなるアクションを作っていきます

  1. Actions Consoleを開く
    ※ 一番最初に開かれた時、利用規約についてのダイアログが出るかと思います。
    image

一つ目のチェックボックス、利用規約問題なければ「Yes」を
二つ目のチェックボックス、最新情報など欲しい方は「Yes」をそうでない方は「No」を
三つ目のチェックボックス、アンケートやパイロットに協力していい人は「Yes」をそうでない人は「No」を
選択してAGREE AND CONTINUEを押してください

  1. Add/import projectをクリック

スクリーンショット 2019-04-06 14 12 56

  1. Project nameを「actions-codelab」という名前を入力
    また、言語をjapanese、regionをjapanに今回はすることにしましょう
  2. Create Projectをクリック

スクリーンショット 2019-04-06 14 13 41

  1. 下のMore optionsまでスクロールしてConversationalをクリック

スクリーンショット 2019-04-06 14 15 16

  1. 左側のナビゲーションでBuild > Actionsをクリック

スクリーンショット 2019-04-06 14 16 39

  1. Create Actionダイアログで、Custom Intentを選択してBuildをクリック

スクリーンショット 2019-04-06 14 17 04

Dialogflowエージェントの作成

Action on Googleで使うDialofglowを作成します。

  1. アクションプロジェクトを作成するとDialogflow Consoleが開いてるはず
    ※ もし開かれてなければアクションプロジェクトの作成がうまく行っているか確認してください

もしかしたらこの場でも規約についてのダイアログが出てくるかもしれません。
規約を確認の上、作業を進めていければと思います。 image (1)

また、ログインを求められる可能性があります。 その場合はご自身のアカウントでログインをお願いします。
image (2)

  1. 日本語に設定する
    今回は言語をの日本語に設定してください

  2. Createをクリック
    ※ Dialogflow Agentの名前が自動入力されているか確認

スクリーンショット 2019-04-06 14 29 45

welcome intentの作成

今回作成していく場所がこちらの図なんですがここの最初に送られるここのメッセージを作っていきます。 スクリーンショット 2019-04-21 2 14 09

  1. Dialogflow ConsoleのIntentページでDefault Welcome Intentを選択

スクリーンショット 2019-04-06 14 30 28

  1. Responsesまでスクロールして各回答のゴミ箱ボタンを選択して、選択肢を削除
  2. ResponsesのEnter a text responseをクリックして「こんにちは！お気に入りの色はなんですか？」と入力

スクリーンショット 2019-04-06 14 34 57

  1. saveをクリック
    しばらくすると「Intent saved」というポップアップが表示されます。

スクリーンショット 2019-04-06 14 34 57

welcome intentをテスト

  1. Dialogflow Consoleの左側のナビゲーションのIntegrationsをクリック
  2. 次にGoogle Assistant > Integration Settingsをクリック

スクリーンショット 2019-04-06 16 07 29

  1. TESTをクリック
    ※ 「Check auto-preview setting」ダイアログが表示された場合は、「Auto-preview changes」オプションを有効のままにしてからContinueをクリックします。

スクリーンショット 2019-04-06 16 08 26

  1. シミュレータでアクションをテストするには、inputフィールドに「テスト用アプリにつないで」と入力してEnterキーをクリック

スクリーンショット 2019-04-06 14 35 23

  1. welcome intentの作成で入力した「こんにちは！お気に入りの色はなんですか？」がでればOK
    ※ 違う文言が出てきた場合はwelcome intentの作成の2をチェック

スクリーンショット 2019-04-06 14 35 55

会話型の応答を作成

スクリーンショット 2019-04-21 2 14 09

  1. Dialogflow Consoleの左側のナビゲーションのIntentsをクリック
  2. Create Intentをクリック

スクリーンショット 2019-04-14 1 53 35

  1. インテント名に「favorite color」と入力しSaveをクリック

スクリーンショット 2019-04-14 1 54 12

  1. Training phrasesの下に次のようなフレーズを入力して、ユーザの表現を追加する
  • 緑色が私のお気に入りです
  • 黒色が私のお気に入りの色です
  • ピンク色が好き
  • オレンジ
  • お気に入りの色は黄色です

スクリーンショット 2019-04-14 2 01 26

  1. Action and parametersの下のParameter Nameに「color」と入力し、ENTITYに「@sys.color」と入力する

スクリーンショット 2019-04-14 2 04 26

  1. REQUIREDのチェックボックスをクリック

スクリーンショット 2019-04-14 2 03 15

  1. Define promptsをクリックして、「好きな色は？」と入力して、Closeをクリック

スクリーンショット 2019-04-14 2 04 42

  1. 色の部分を選択して「@sys.color」を選択する

スクリーンショット 2019-04-14 2 04 42

  1. 下にスクロールしたところにあるFulfillmentのEnable Fulfillmentを有効にする
    ※ 左側のナビゲーションにあるFulfillmentではないので注意

スクリーンショット 2019-04-14 2 17 33

  1. ** Enable webhook call for this intent.**をオンにする

スクリーンショット 2019-04-14 2 19 06

  1. saveをクリックする

スクリーンショット 2019-04-14 2 17 51

webhookを実装

スクリーンショット 2019-04-21 2 14 09

  1. 左側のナビゲーションのFulfillmentをクリック
  2. Inline Editorのトグルボタンを有効にする

スクリーンショット 2019-04-06 14 54 21

  1. index.jsの内容を以下変更する
'use strict';

// Import the Dialogflow module from the Actions on Google client library.
const {dialogflow} = require('actions-on-google');

// Import the firebase-functions package for deployment.
const functions = require('firebase-functions');

// Instantiate the Dialogflow client.
const app = dialogflow({debug: true});

// Handle the Dialogflow intent named 'favorite color'.
// The intent collects a parameter named 'color'.
app.intent('favorite color', (conv, {color}) => {
    const luckyNumber = color.length;
    // Respond with the user's lucky number and end the conversation.
    conv.close('あなたのラッキーナンバーは' + luckyNumber);
});

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
  1. Deployをクリック
    ※ デプロイが完了するまで時間がかかります。完了すると「Last deployed」と表示されます。

スクリーンショット 2019-04-06 14 54 21

コードの内容

WebhookのコードはJavaScriptで実装されています。 Dialogflowのインラインエディタを使用すると、Cloud Functions for Firebaseを使用してクラウド内の管理対象環境にWebフックコードをデプロイします。

Webhookコードは、Google Node.jsクライアントライブラリのアクションを使用して、アシスタントがWebhookに送信するHTTPリクエストに応答します。 このライブラリを使用すると、Dialogflow APIのラッパーとして機能するDialogflowAppオブジェクトを作成できます。

この場合、DialogflowAppオブジェクト型のapp変数が作成されます。 `app.intent（）``関数は、「お気に入りの色」の意図を処理するためのコールバックを宣言するために使用されます。

コールバックは2つの重要な引数を受け取ります。

  • DialogflowConversation object これはダイアログの状態をクライアントライブラリで抽象化したもので、現在アクティブなDialogflowコンテキスト、ユーザーデバイスのサーフェス機能など、Webフックへの着信要求の値を表すプロパティが含まれています。
  • Dialogflow Parameters object これは、関連する目的で収集されたパラメータ値のJavaScriptオブジェクト表現です。

Dialogflowコンソールでパラメータ名を変更した場合は、コード内の変数名も必ず更新してください。

コールバックは、色のために単語の長さを決定することによってユーザーのラッキーナンバーを生成します

その後、Conversationオブジェクトパラメータのcloseメソッドを使用してユーザーに応答し、会話を終了します。

4b4c7097b4067c95

上の図は、webhook実装の21行目の変数colorがDialogflowコンソールで以前に定義したパラメータ名をどのように使用するかを示しています。 たとえば、ユーザーが「私のお気に入りの色は緑色です」と言った場合、21行目の可変色の値は「緑色」になります。

アクションをテスト

  1. Actions Consoleを開き、このコードラボ用のアクションプロジェクトを選択
  2. 左側のナビゲーションでSimulatorを選択
  3. inputフィールドに「テスト用アプリにつないで」と入力してEnterキーをクリック
  4. 「お気に入りの色は？」と聞かれるので、「黄緑色」と入力する
  5. ラッキーナンバーが帰ってきていることを確認

スクリーンショット 2019-04-06 14 59 01

これにてアプリケーションの完成です！！

今回ベースとしてコードラボについてはこちらです
https://codelabs.developers.google.com/codelabs/iwd-actions-1/index.html

続きであるコードラボをされたい方はこちらを参考に試されてみてください
https://codelabs.developers.google.com/iwd2019/

早く終わった方は続きのコードラボを試すか、コードを書き換えて違う文言が帰ってくるようにするなどコードをいじってみましょう！

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment