Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ホットペッパーグルメにAoGを使ってローンチしてみた

2,462 views

Published on

https://gcpug-tokyo.connpass.com/event/71279/
で発表した資料です。

Published in: Technology
  • Be the first to comment

ホットペッパーグルメにAoGを使ってローンチしてみた

  1. 1. ホットペッパーグルメにAoGを使ってローンチしてみた 株式会社リクルートライフスタイル KUMA (@kumakumakkk)
  2. 2. 自己紹介 KUMA @kumakumakkk 株式会社リクルートライフスタイル エンジニア 新規事業系の開発、 BPR、海外渉外などを担当 株式会社オートマタ CEO & CTO Golang/nginx/h2o/Redis/MySQL zsh/Ansible/Spinnaker/Ubuntu/Alpine fastly/k8s/GCP/AWS Cisco/Aruba/Ubiquiti Networks とかを使っている
  3. 3. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 無事リリースできました!
  4. 4. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 最初にデモ
  5. 5. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 目次 ・デモ ・ホットペッパーグルメActionの概要 ・デザイン/ペルソナ ・構成 ・気づき ・今後 ・まとめ
  6. 6. Proprietary + Confidential ホットペッパーグルメActionの概要
  7. 7. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem ホットペッパーグルメAction概要 ・エリア、利用用途、日付、ジャンル、予算、時間、人数等を条件にマッチした飲食店を提案 ・より詳しく知りたい場合は、提案された飲食店をクリックすると『ホットペッパーグルメ』のサ イトに遷移し、そのままネット予約することも可能 ・画面ありデバイスと画面なしデバイスでは挙動が全く違う (Conversation branching)
  8. 8. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem ホットペッパーグルメAction概要
  9. 9. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem ホットペッパーグルメAction概要
  10. 10. Proprietary + Confidential デザイン/ペルソナ
  11. 11. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem デザイン/ペルソナ コンシェルジュをイメージ 具体的な使用例を書く
  12. 12. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem デザイン/ペルソナ
  13. 13. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem デザイン/ペルソナ コンシェルジュをイメージ 具体的な使用例を書く アプリから切らない
  14. 14. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem デザイン/ペルソナ コンシェルジュをイメージ 具体的な使用例を書く アプリから切らない 何を認識できたか言い換えて表現する Chat Bubbleを表示してよくある回答例を提示する
  15. 15. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
  16. 16. Proprietary + Confidential 構成・開発体制
  17. 17. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 構成 そのままJSONでやり取りをしている 中はjsではないのでActionsSDKも使ってない… Dialogflow(旧名api.ai)は使用していない WebhookからJSONのやり取りのみをしている GCPを使用 とてもベタな構成
  18. 18. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 構成 ZONE B Content Server Compute Engine Autoscaling ZONE A Content Server Compute Engine Autoscaling Cloud Load Balancing Cloud DNS Redis Server Compute Engine Autoscaling Chat Backend
  19. 19. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 開発体制(AoG部分) 新規事業プロダクト開発 UX、開発系全般 広報連携 ホットペッパーグルメ商品企画担当 UX、文言、ブランド全般
  20. 20. Proprietary + Confidential 気づき
  21. 21. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 気づき STT(Speech to Text)が意図しない言葉を拾ってくる バイアスも何故かかからない 長い文章はとても良く拾ってくれる 例: 「よにん(4人)」→「余人」 「ない」    →「ナイン」、「9」、「できない」、「4」 どうしても仕方ないときは除き、4文字以上の言葉をユーザに発話してもらうようにする
  22. 22. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 気づき TTS(Text to Speech)をちゃんと調教しないといけない 「11月21日(火)ですね」→「じゅういちがつ にじゅういちにち かっこ ひ ですね」 怪しそうな表記をする場合は textToSpeech, displayText両方適切に設定する
  23. 23. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 気づき UIで次のアクションを促すのではなく、対話的に次のアクションを提示する ・あくまでBotとユーザの会話 ・そうしないとレビューが通らない
  24. 24. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem ←もともとなかったが追加
  25. 25. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem ←もともとは  「お店の詳細情報です」  としか書いてなかったが追記
  26. 26. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 気づき ngrok 最強 ローカルのサーバに URLを振ってインターネットからアクセスできるようにする Request, Responseをモニタリング管理ページがある ngrok Rocks!!
  27. 27. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
  28. 28. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 気づき Brand Verificationをする We reserve major brand names as invocation names for developers who prove they're affiliated with that brand. For example, if you want to use the name “Personal Chef,” you must first connect your app with www.personalchef.com and verify your affiliation. 今後どうなるかわからないので “Major brand names”に該当するかはさておき、 Brand Verificationを一応しておく
  29. 29. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 歯車 -> Project settings -> BRAND VERIFICATIONタブ
  30. 30. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 歯車 -> Project settings -> BRAND VERIFICATIONタブ
  31. 31. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 気づき ログ監視を監視する どのように使われているか、どんなクエリが来ているか、何が認識されていて、何がご認識されているか を監視する
  32. 32. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Botとユーザの会話ログ ←チームメンバのコメント Botとユーザの 会話ログ ←管理Botにメンション ←チケット作成完了 すると絵文字で返信
  33. 33. Proprietary + Confidential 今後
  34. 34. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 今後
  35. 35. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 今後 Handoff機能の実装 もしユーザが、画面を持ち、 Assistantが使えるデバイスを持っている場合、    そのデバイスに誘導することができる機能
  36. 36. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 今後
  37. 37. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem というわけでデモ と、言いたいところだが
  38. 38. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem なぜか動かない… 宿題にしたいと思います すみません…
  39. 39. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem まとめ できるだけ具体的に、例文として会話文を書いて考える Actions SDKを使うと、TTS, STT, その他情報をそのまま渡してくれる 多分Dialogflowのfulfillment使っても同等だとは思う 新機能が続々と出てきたり、パラメータが増えたり、頻繁にアップデートが行われている ngrok おすすめ
  40. 40. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem ご清聴ありがとうございました 株式会社リクルートライフスタイル エンジニア 株式会社オートマタ CEO & CTO @kumakumakkk arakawa@r.recruit.co.jp arakawa@automata.life

×