Slide 1

Slide 1 text

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 アクションを開発する3つの方法 ● 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 3つの基本機能を理解する ● 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 リリース申請に必要なもの ● アクションの情報 ○ 説明 ○ カテゴリ ○ ロケーション ○ 言語 ● アクションを呼び出すトリガーと名前 ○ 早いものがちです! ● アクションの画像 ○ 大きいイメージと小さいイメージが必要 ○ エンジニアにとっては1番苦労するかも ○ 大きなこだわりがない場合は いらすとや の画像を使う ● 開発者情報 ● プライバシーポリシーを明記したページ ○ 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