Proprietary + Confidential
DialogflowとCloud Functions で作る
Google アシスタント アクション
flatfisher
Slide 2
Slide 2 text
Proprietary + Confidential
Kyohei Tsuda
@canoefishing
Google Developer Groups Ishinomaki
Call me fish!
Slide 3
Slide 3 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
今日話すこと
● Google アシスタントについて
● DialogflowとCloud Functions をアクションの開発
● Tips
Slide 4
Slide 4 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
今日話すこと
● Google アシスタントについて
● DialogflowとCloud Functions をアクションの開発
● Tips
Slide 5
Slide 5 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
今日話すこと
● Google アシスタントについて
● DialogflowとCloud Functions をアクションの開発
● Tips
Slide 6
Slide 6 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
今日話さないこと
● 最新動向
● Transactions API や細かいSDKの話
● テンプレートを使ったアクションの開発
Slide 7
Slide 7 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
アクション？ アプリではなくアクションと表記
Slide 8
Slide 8 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
作成したアクションの紹介
Slide 9
Slide 9 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
土用の丑の日にはうなぎリクエストが殺到
Slide 10
Slide 10 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
コミュニティプログラムでマイルストーンの獲得
Slide 11
Slide 11 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
アクションを開発する３つの方法
● Actions SDKを利用する
○ 自然言語処理などを含め全て自分で作成したい人向け
● Dialogflowを利用する
○ 自然言語処理はGoogleの技術に任せたい人向け
○ 機能の中心部分に集中して開発することができる
● テンプレートを利用する
○ クイズアクションを作成したい人向け
Slide 12
Slide 12 text
Dialogflow
Slide 13
Slide 13 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
● 自然言語処理を提供しているサービス
● Botサービスと簡単連携
○ Slack, LINE, Facebook Messenger など
Dialogflow
Slide 14
Slide 14 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Dialogflowのすごいところ
● コードを書かずに自然言語処理の実装ができる
● 対応言語が豊富
● あらゆるチャットボットサービスに対応
● SDKが豊富
● アナリティクス機能（設定不要）
Slide 15
Slide 15 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
できること&できないこと（BMIを計算するBOTの例）
● ユーザーの発言から特定の文字を取得する
○ 身長や体重を取得したい
● ユーザーが身長と体重を答えるまで聞き返す
● 取得した身長と体重からBMIを計算する
Slide 16
Slide 16 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
できること&できないこと（BMIを計算するBOTの例）
● ユーザーの発言から特定の文字を取得する
○ 身長や体重を取得したい
できる
● ユーザーが身長と体重を答えるまで聞き返す
できる
● 取得した身長と体重からBMIを計算する
できない
Slide 17
Slide 17 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Dialogflowは必要な値を取得するところまで、計算処理などはサーバーで！
BMIを知りたい
身長は？
182cmです
体重は？
79kgです
身長と体重を送信
BMIは23です
BMIは23です
Slide 18
Slide 18 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
できること&できないこと まとめ
● 会話の分析や静的な処理ができる
○ 発言からユーザーが何をしたいのかを分析
■ ユーザーは挨拶をしたいのか
■ ユーザーは航空券を検索したいのか
■ ユーザーは音楽を聞きたいのか
○ ユーザーの発言にどんなパラメータが入っているか分析
■ メールアドレス、身長、体重、日時、通貨...
○ BOTに必須パラメータがあれば発言するまで聞き返す
■ BMIを計算するBOTの場合、身長と体重を言うまで聞き返す
○ 答えが決まっている会話
■ 「こんにちは」と言われたら「こんにちは」と返す
● 動的な処理ができない
○ BMIの計算
○ 航空券の検索や予約
Slide 19
Slide 19 text
Dialogflowを使ったアクションの作り方
Slide 20
Slide 20 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
はじめる前に必要なもの
● GCPアカウント
○ クレジットカードを登録されていることが望ましい
○ G Suiteアカウントではないものが望ましい
Slide 21
Slide 21 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
新規Agentを作成する
Slide 22
Slide 22 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Google Assistantと連携する
Slide 23
Slide 23 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
TESTをクリック
Slide 24
Slide 24 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
アクションが起動すれば成功です
Slide 25
Slide 25 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
３つの基本機能を理解する
● Intent
● Entity
● Fulfillment
Slide 26
Slide 26 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Intent -会話の設計を行う-
● 会話を開始する文（トリガー）を決める
○ 「こんにちは！」
○ 「BMIを知りたい」
○ 「肉とじゃがいもで作れる料理は？」
● 会話を成立させるための条件を決める
○ 身長と体重を必須にする
● レスポンス
○ 答えが既に決まっている場合
■ 「こんにちは」と返す
○ 答えが決まっていない場合
■ BMIの計算やレシピ取得はサーバーにお願いする
Slide 27
Slide 27 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
1つの目的につき、1つのIntentを作成
● 挨拶をするIntent
● BMIを計算するIntent
● レシピを検索するIntent
挨拶 BMI レシピ
Slide 28
Slide 28 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
発言に応じて適切なIntentに案内してくれる
挨拶 BMI レシピ
BMIを知りたい
身長と体重は？
Slide 29
Slide 29 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Intentを作成してみる
Slide 30
Slide 30 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
シミュレーション画面に戻ります
Slide 31
Slide 31 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
こんにちは以外にも反応させたい
Slide 32
Slide 32 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
設定していない言葉も「こんにちは」と理解できるようになる
Slide 33
Slide 33 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
レスポンスのバリエーションを増やす
Slide 34
Slide 34 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
ランダムに返答してくれます
Slide 35
Slide 35 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Google アシスタントのUI
Slide 36
Slide 36 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
作成した覚えのない謎のIntent
Slide 37
Slide 37 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Default Fallback Intent
Slide 38
Slide 38 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Default Welcome Intent
Slide 39
Slide 39 text
ピザを注文するアクションを作成
Slide 40
Slide 40 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
ピザを注文するIntentを作成
Slide 41
Slide 41 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
注文時刻を尋ねる設定をする
Slide 42
Slide 42 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
尋ね方を設定
Slide 43
Slide 43 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
聞き出した後のレスポンスを設定
Slide 44
Slide 44 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
シミュレーション画面でテスト
Slide 45
Slide 45 text
Entity
Slide 46
Slide 46 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
メニューEntityを作成
Slide 47
Slide 47 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Size Entityを作成
Slide 48
Slide 48 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
IntentにPizza EntityとSize Entityをセット
Slide 49
Slide 49 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
IntentにPizzaEntityとSize Entityをセット
Slide 50
Slide 50 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
シミュレーション画面でテスト
Slide 51
Slide 51 text
Fulfillment
Slide 52
Slide 52 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Fulfillment を設定
Slide 53
Slide 53 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Fulfillment を設定
Slide 54
Slide 54 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Fulfillment に送信されるJSONの例
Slide 55
Slide 55 text
ピザの注文を受けたらLINEに通知する
サンプルを作ってみる
Slide 56
Slide 56 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
actions-on-google-nodejs ライブラリ
Slide 57
Slide 57 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
環境準備
● Cloud Functions でHello Worldを返すサンプルを用意
● npm install actions-on-google - - save や yarn add
actions-on-google でライブラリのインストール
Slide 58
Slide 58 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Intentを受け取る
Slide 59
Slide 59 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
デプロイとエンドポイントURLの取得
● コードをデプロイ
○ gcloud functions deploy $name --region=asia-northeast1
--trigger-http --project project
● バックエンドURLの取得
○ httpsTrigger: url: https://asia-northeast1-...
Slide 60
Slide 60 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
シミュレーション画面でテスト
Slide 61
Slide 61 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
受け取った情報をLINEに送信
Slide 62
Slide 62 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
ピザの注文があるとLINEに通知が来る
Slide 63
Slide 63 text
開発 Tips
Slide 64
Slide 64 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
料金プランはあるの？
● Dialogflow Standard Edition
○ 無料
○ APIリクエスト数に制限がある
○ APIリクエストが少ない小規模なプロジェクトや
Dialogflowを試したい人向け
○ コミュニティと電子メールによるサポート
● Dialogflow Enterprise Edition
○ 従量課金制
○ APIリクエスト数に制限が無い
○ 大規模なプロジェクト向け
○ コミュニティ、電子メール、Google Cloudサポートによるサポート
Slide 65
Slide 65 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
新機能をキャッチアップしたい
● Youtube Google Developers チャンネル
● Actions on Google 公式Docs
● Dialogflow 公式 Docs
● Dialogflow ブログ
● Dialogflow リリースノート
● GitHubのソースコード
● Twitter公式アカウント
Slide 66
Slide 66 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Google GroupsやSlackで質問できます
https://groups.google.com/forum/#!forum/assistant-developer-community-japan
Slide 67
Slide 67 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
リリース申請に必要なもの
● アクションの情報
○ 説明
○ カテゴリ
○ ロケーション
○ 言語
● アクションを呼び出すトリガーと名前
○ 早いものがちです！
● アクションの画像
○ 大きいイメージと小さいイメージが必要
○ エンジニアにとっては１番苦労するかも
○ 大きなこだわりがない場合は いらすとや の画像を使う
● 開発者情報
● プライバシーポリシーを明記したページ
○ Google サイトや Google Docsで作成したものを公開すればOK
○ 各内容に詰まった場合は既にリリースされているページを参考にする
Slide 68
Slide 68 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
申請に落ちてしまう例
● プライバシーポリシーが無効
○ URLと公文が正しいか確認する
● 申請された文言でアクションが起動しない
○ お手持ちのスマートフォンかスピーカーなどで再度確認する
● ユーザーを混乱させてしまうような会話になる
○ 会話設計を見直そう
● 日本語の会話のはずなのに英語が混じった
○ 英語が混じらないか確認する、特にINTENTのレスポンス
● ユーザーが何をしていいか分からない
○ 会話開始時に使い方を明記しよう
● 会話の終了方法が分からない
○ 会話を終了するトリガーインテントを用意する
● アクションの名前が不適切
○ ユニークかつ呼びやすい名前に変更する
https://qiita.com/flatfisher/items/f6afa2a9055e5ee3cf87
Slide 69
Slide 69 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
TypeScriptで開発したい方へ
https://github.com/flatfisher/cloud-functions-typescript-template
Slide 70
Slide 70 text
今日学んだことをおさらい
Slide 71
Slide 71 text
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
おさらい
● Dialogflowの基本的な使い方
○ Intentの作成
○ Entityの作成
○ Fulfillmentの設定
● Google Cloud Functions を使ったバックエンド処理
○ 外部APIとの接続ができたので結構なんでも作れます
● 開発 Tips
Slide 72
Slide 72 text
興味がある人は今夜作りましょう！
https://media.giphy.com/media/RRerwvHrb0nxm/giphy.gi
f
Slide 73
Slide 73 text
Proprietary + Confidential
Thank you
Kyohei Tsuda
@canoefishing
Google Developer Groups Ishinomaki