Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DialogflowとCloud Functions で作る Google アシスタント アクション

flatfisher
September 01, 2018

DialogflowとCloud Functions で作る Google アシスタント アクション

こちらのスライドは GDG DevFest Tokyo 2018の「DialogflowとCloud Functions で作る Google アシスタント アクション」のスライドです

flatfisher

September 01, 2018
Tweet

More Decks by flatfisher

Other Decks in Programming

Transcript

  1. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 今日話すこと • Google アシスタントについて • DialogflowとCloud Functions をアクションの開発 • Tips
  2. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 今日話すこと • Google アシスタントについて • DialogflowとCloud Functions をアクションの開発 • Tips
  3. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 今日話すこと • Google アシスタントについて • DialogflowとCloud Functions をアクションの開発 • Tips
  4. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 今日話さないこと • 最新動向 • Transactions API や細かいSDKの話 • テンプレートを使ったアクションの開発
  5. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem アクション? アプリではなくアクションと表記
  6. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 作成したアクションの紹介
  7. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 土用の丑の日にはうなぎリクエストが殺到
  8. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem コミュニティプログラムでマイルストーンの獲得
  9. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem アクションを開発する3つの方法 • Actions SDKを利用する ◦ 自然言語処理などを含め全て自分で作成したい人向け • Dialogflowを利用する ◦ 自然言語処理はGoogleの技術に任せたい人向け ◦ 機能の中心部分に集中して開発することができる • テンプレートを利用する ◦ クイズアクションを作成したい人向け
  10. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem • 自然言語処理を提供しているサービス • Botサービスと簡単連携 ◦ Slack, LINE, Facebook Messenger など Dialogflow
  11. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Dialogflowのすごいところ • コードを書かずに自然言語処理の実装ができる • 対応言語が豊富 • あらゆるチャットボットサービスに対応 • SDKが豊富 • アナリティクス機能(設定不要)
  12. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem できること&できないこと(BMIを計算するBOTの例) • ユーザーの発言から特定の文字を取得する ◦ 身長や体重を取得したい • ユーザーが身長と体重を答えるまで聞き返す • 取得した身長と体重からBMIを計算する
  13. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem できること&できないこと(BMIを計算するBOTの例) • ユーザーの発言から特定の文字を取得する ◦ 身長や体重を取得したい できる • ユーザーが身長と体重を答えるまで聞き返す できる • 取得した身長と体重からBMIを計算する できない
  14. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Dialogflowは必要な値を取得するところまで、計算処理などはサーバーで! BMIを知りたい 身長は? 182cmです 体重は? 79kgです 身長と体重を送信 BMIは23です BMIは23です
  15. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem できること&できないこと まとめ • 会話の分析や静的な処理ができる ◦ 発言からユーザーが何をしたいのかを分析 ▪ ユーザーは挨拶をしたいのか ▪ ユーザーは航空券を検索したいのか ▪ ユーザーは音楽を聞きたいのか ◦ ユーザーの発言にどんなパラメータが入っているか分析 ▪ メールアドレス、身長、体重、日時、通貨... ◦ BOTに必須パラメータがあれば発言するまで聞き返す ▪ BMIを計算するBOTの場合、身長と体重を言うまで聞き返す ◦ 答えが決まっている会話 ▪ 「こんにちは」と言われたら「こんにちは」と返す • 動的な処理ができない ◦ BMIの計算 ◦ 航空券の検索や予約
  16. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem はじめる前に必要なもの • GCPアカウント ◦ クレジットカードを登録されていることが望ましい ◦ G Suiteアカウントではないものが望ましい
  17. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Google Assistantと連携する
  18. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem アクションが起動すれば成功です
  19. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 3つの基本機能を理解する • Intent • Entity • Fulfillment
  20. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Intent -会話の設計を行う- • 会話を開始する文(トリガー)を決める ◦ 「こんにちは!」 ◦ 「BMIを知りたい」 ◦ 「肉とじゃがいもで作れる料理は?」 • 会話を成立させるための条件を決める ◦ 身長と体重を必須にする • レスポンス ◦ 答えが既に決まっている場合 ▪ 「こんにちは」と返す ◦ 答えが決まっていない場合 ▪ BMIの計算やレシピ取得はサーバーにお願いする
  21. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 1つの目的につき、1つのIntentを作成 • 挨拶をするIntent • BMIを計算するIntent • レシピを検索するIntent 挨拶 BMI レシピ
  22. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 発言に応じて適切なIntentに案内してくれる 挨拶 BMI レシピ BMIを知りたい 身長と体重は?
  23. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem シミュレーション画面に戻ります
  24. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem こんにちは以外にも反応させたい
  25. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 設定していない言葉も「こんにちは」と理解できるようになる
  26. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem レスポンスのバリエーションを増やす
  27. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem ランダムに返答してくれます
  28. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Google アシスタントのUI
  29. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 作成した覚えのない謎のIntent
  30. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem ピザを注文するIntentを作成
  31. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 注文時刻を尋ねる設定をする
  32. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 聞き出した後のレスポンスを設定
  33. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem シミュレーション画面でテスト
  34. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem IntentにPizza EntityとSize Entityをセット
  35. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem IntentにPizzaEntityとSize Entityをセット
  36. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem シミュレーション画面でテスト
  37. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Fulfillment に送信されるJSONの例
  38. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem actions-on-google-nodejs ライブラリ
  39. 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 でライブラリのインストール
  40. 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-...
  41. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem シミュレーション画面でテスト
  42. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 受け取った情報をLINEに送信
  43. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem ピザの注文があるとLINEに通知が来る
  44. 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サポートによるサポート
  45. 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公式アカウント
  46. 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
  47. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem リリース申請に必要なもの • アクションの情報 ◦ 説明 ◦ カテゴリ ◦ ロケーション ◦ 言語 • アクションを呼び出すトリガーと名前 ◦ 早いものがちです! • アクションの画像 ◦ 大きいイメージと小さいイメージが必要 ◦ エンジニアにとっては1番苦労するかも ◦ 大きなこだわりがない場合は いらすとや の画像を使う • 開発者情報 • プライバシーポリシーを明記したページ ◦ Google サイトや Google Docsで作成したものを公開すればOK ◦ 各内容に詰まった場合は既にリリースされているページを参考にする
  48. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem 申請に落ちてしまう例 • プライバシーポリシーが無効 ◦ URLと公文が正しいか確認する • 申請された文言でアクションが起動しない ◦ お手持ちのスマートフォンかスピーカーなどで再度確認する • ユーザーを混乱させてしまうような会話になる ◦ 会話設計を見直そう • 日本語の会話のはずなのに英語が混じった ◦ 英語が混じらないか確認する、特にINTENTのレスポンス • ユーザーが何をしていいか分からない ◦ 会話開始時に使い方を明記しよう • 会話の終了方法が分からない ◦ 会話を終了するトリガーインテントを用意する • アクションの名前が不適切 ◦ ユニークかつ呼びやすい名前に変更する https://qiita.com/flatfisher/items/f6afa2a9055e5ee3cf87
  49. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem TypeScriptで開発したい方へ https://github.com/flatfisher/cloud-functions-typescript-template
  50. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem おさらい • Dialogflowの基本的な使い方 ◦ Intentの作成 ◦ Entityの作成 ◦ Fulfillmentの設定 • Google Cloud Functions を使ったバックエンド処理 ◦ 外部APIとの接続ができたので結構なんでも作れます • 開発 Tips