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

VoiceLunchJP#27 Voiceflow Updates 2022

Kuniaki Shimizu
December 14, 2022

VoiceLunchJP#27 Voiceflow Updates 2022

VoiceLunchJP#27で発表したVoiceflowの2022年の新機能・変更点のご紹介です。

https://voicelunchjp.connpass.com/event/268568/

#voicelunchjp #vfjug

Kuniaki Shimizu

December 14, 2022
Tweet

More Decks by Kuniaki Shimizu

Other Decks in Design

Transcript

  1.     
    Updates 2022
    #voicelunchjp #vfjug #voiceflow

    View Slide

  2. 自己紹介
    @VoiceflowHQ | #VFJUG

    View Slide

  3. 自己紹介
    @VoiceflowHQ | #VFJUG
    Kuniaki Shimizu (@kun432)
    ● 神戸在住のインフラエンジニア
    ● Kubernetes/AWS/Terraformなど
    ● 最近フリーランスになりました
    ● Voiceflow歴4年弱ぐらい
    ○ 調べてみたら2019年初から
    ● #VoiceLunchJP / #AAJUG
    ● #VFJUGやってます

    View Slide

  4. https://www.facebook.com/groups/vfjug/
    Voiceflow日本語コミュニティ
    @VoiceflowHQ | #VFJUG

    View Slide

  5. 『Voiceflow & VUI 〜虎の巻〜』
    ● 国内初・Voiceflow同人誌
    ● 入門〜中級・上級、プロトタイピング
    ・VUIデザイン〜IoT/クラウド連携、など
    幅広いトピックをカバー!
    ● 豪華執筆陣とVoiceflow公式による寄稿も!
    紙版+電子版セット
    1,500円(+税抜)
    ※別途送料
    @VoiceflowHQ | #VFJUG
    販売終了しました。
    ありがとうございました。

    View Slide

  6. 今日のお題
    @VoiceflowHQ | #VFJUG

    View Slide

  7. Updates 2022
    @VoiceflowHQ | #VFJUG
    ● Voiceflowの進化は速い!
    ● 2022年にリリースされた主な新機能/変更点の
    一部をご紹介します。

    View Slide

  8. @VoiceflowHQ | #VFJUG
    Disclaimer
    ● 2022年12月初時点の情報です。今後変更される場合が
    あります。
    ● 個人の調査により作成しています。内容の不備等が
    含まれる場合がある点に予めご留意ください。

    View Slide

  9. 2022年の新機能と変更点
    @VoiceflowHQ | #VFJUG

    View Slide

  10. @VoiceflowHQ | #VFJUG
    2022年の主な新機能/変更点
    1. ユーザーインタフェースの刷新
    2. ユーザーペルソナ
    3. Webチャットプロジェクト
    4. カスタムアシスタントのNLUが選択可能
    ※https://www.voiceflow.com/category/product-release などを参考にしています。
    ※大小含めるともっとあります。

    View Slide

  11. @VoiceflowHQ | #VFJUG
    1. ユーザーインタフェースの刷新

    View Slide

  12. @VoiceflowHQ | #VFJUG
    2019

    View Slide

  13. @VoiceflowHQ | #VFJUG
    2020〜2021

    View Slide

  14. @VoiceflowHQ | #VFJUG
    and 2022!

    View Slide

  15. @VoiceflowHQ | #VFJUG
    1. ユーザーインタフェースの刷新
    GUIの課題
    ● たくさんのブロック、たくさんの線…
    ● プロジェクトが大きく/複雑になると管理できない
    ● 似たような処理・同じ処理が複数箇所に

    View Slide

  16. @VoiceflowHQ | #VFJUG
    1. ユーザーインタフェースの刷新

    View Slide

  17. @VoiceflowHQ | #VFJUG
    効率良く管理したい!

    View Slide

  18. @VoiceflowHQ | #VFJUG
    1. ユーザーインタフェースの刷新
    ● デザイナーがさらにデザインしやすいように
    ● 個人的におすすめ
    ○ Actions
    ○ トピック/コンポーネント/ライブラリ
    ● Alexa向けの変更も重要

    View Slide

  19. @VoiceflowHQ | #VFJUG
    Actions
    ● 分岐先でよくやること
    ○ 分岐ごとにコンテキストが変わる
    ○ 分岐ごとに変数をセットする
      などなど
    ● 分岐が増えると線をたくさん引いたり。
    分岐ごとに同じ処理を繰り返したり。
    ● Actionsを使うと↑をブロックの中で指定できてすっきり

    View Slide

  20. @VoiceflowHQ | #VFJUG
    Actions

    View Slide

  21. @VoiceflowHQ | #VFJUG
    トピック/コンポーネント/ライブラリ
    キーワード 意味 ユースケース:銀行アプリの場合
    トピック
    インテントごとにフローを分けて
    それぞれを小さく管理する
    ● メインフローから
    ・残高照会フロー
    ・振り込みフロー
    コンポーネント
    何度も使う処理をパーツ化して、
    再利用が可能
    ※同じものをそのまま繰り返し使う場合
    ● API初期設定
    ● APIリクエスト処理
    ● 処理結果発話フロー
    ライブラリ
    何度も使う処理をテンプレート化して、
    再利用が可能
    ※コピーして少し変えて使う場合
    ● APIリクエストをテンプレート化
    ● 残高照会や振込処理ごとにテンプ
    レートから複製してパラメータだ
    け変更

    View Slide

  22. @VoiceflowHQ | #VFJUG
    例:トピック
    ホーム
    注文
    開店時間
    コンテキスト(インテント)ごとに
    別のフローとして管理できる

    View Slide

  23. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    ● Alexa特有のブロックや設定が廃止
    ○ Purchase/Cancel(ISP)
    ○ Reminder(リマインダー)
    ○ UserInfo(ユーザ情報取得)
    ○ Permissions(権限)
    ○ Account Linking(アカウントリンク)
    ○ スキルイベント
    ○ などなど
    じゃあどうすれば・・・

    View Slide

  24. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    Directive/Eventを使いましょう!

    View Slide

  25. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    ● 以前
    ○ 各機能ごとにAPI/SDKクライアントが用意されていた
    ○ 1機能としては実装しやすい(ブロックにしやすい)
    ○ API以外の部分は自分で実装
    ● 現在
    ○ 「Skill Connections」に統一されつつある様子
    ○ JSONオブジェクトを投げると、スキルの「外」で
    ユーザとのやりとりや必要な処理をやってくれる
    ○ 結果がJSONオブジェクトでスキルに返ってくる

    View Slide

  26. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    ● 以前
    ○ 各機能ごとにAPI/SDKクライアントが用意されていた
    ○ 1機能としては実装しやすい(ブロックにしやすい)
    ○ API以外の部分は自分で実装
    ● 現在
    ○ 「Skill Connections」に統一されつつある様子
    ○ JSONオブジェクトを投げると、スキルの「外」で
    ユーザとのやりとりや必要な処理をやってくれる
    ○ 結果がJSONオブジェクトでスキルに返ってくる
    Directive
    Event

    View Slide

  27. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    ● Directive

    View Slide

  28. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    ● Event

    View Slide

  29. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    難しそう・・・

    View Slide

  30. @VoiceflowHQ | #VFJUG
    Alexa向けの変更
    ● 各機能ごとのチュートリアルがドキュメントにあります。
    https://developer.voiceflow.com/docs

    View Slide

  31. @VoiceflowHQ | #VFJUG
    2. ユーザーペルソナ

    View Slide

  32. @VoiceflowHQ | #VFJUG
    ● パーソナライズされた会話フロー
    ○ 初めて使う/何度も使っている
    ○ 東京に住んでいる/大阪に住んでいる
    ○ 今日が誕生日/それ以外
    ● 違った条件ごとにテストしたい
    特定の条件のユーザペルソナを設定してテストができる!
    2. ユーザーペルソナ

    View Slide

  33. @VoiceflowHQ | #VFJUG
    1回目 2回目以降
    2. ユーザーペルソナ

    View Slide

  34. @VoiceflowHQ | #VFJUG
    2. ユーザーペルソナ

    View Slide

  35. @VoiceflowHQ | #VFJUG
    2. ユーザーペルソナ

    View Slide

  36. @VoiceflowHQ | #VFJUG
    2. ユーザーペルソナ

    View Slide

  37. @VoiceflowHQ | #VFJUG
    3. Webチャットプロジェクト

    View Slide

  38. @VoiceflowHQ | #VFJUG
    3. Webチャットプロジェクト
    ● VoiceflowだけでWebサイト埋め込みチャットボットを
    サクッと作れる!
    ○ プロジェクトを「Webチャット」タイプで作る
    ○ 会話フローを作る
    ○ HTML/JavaScriptが出力されるので、Webサイトに
    ペーストするだけ!
    めっちゃかんたん!

    View Slide

  39. @VoiceflowHQ | #VFJUG
    3. Webチャットプロジェクト

    View Slide

  40. @VoiceflowHQ | #VFJUG
    3. Webチャットプロジェクト

    View Slide

  41. @VoiceflowHQ | #VFJUG
    3. Webチャットプロジェクト

    View Slide

  42. @VoiceflowHQ | #VFJUG
    3. Webチャットプロジェクト

    View Slide

  43. @VoiceflowHQ | #VFJUG
    Transcriptsでチャット履歴が見れる

    View Slide

  44. @VoiceflowHQ | #VFJUG
    今後も期待!

    View Slide

  45. @VoiceflowHQ | #VFJUG
    4. カスタムアシスタントのNLUが
    選択可能

    View Slide

  46. @VoiceflowHQ | #VFJUG
    4. カスタムアシスタントのNLU選択
    Enterpriseプラン限定の機能です!🙇
    ※まだちょっと詳細までは完全に把握できていませんのでご留意ください。

    View Slide

  47. @VoiceflowHQ | #VFJUG
    4. カスタムアシスタントのNLU選択
    ● カスタムアシスタントのNLUを選択できる
    ● Dialogflow ES/CXはデプロイまでできる
    それ以外は対話モデルのインポート/エクスポート
    ○ Voiceflow(デフォルト)
    ○ Dialogflow ES/CX
    ○ IBM Watson
    ○ Microsoft LUIS
    ○ Rasa
    ○ Salesforce Einstein
    ○ Amazon Lex
    ○ Nuance Mix

    View Slide

  48. @VoiceflowHQ | #VFJUG
    4. カスタムアシスタントのNLU選択
    ● 個人的にDIalogflow ES/CX連携はかなり期待
    ○ ワンクリックでデプロイできる
    ○ 他のNLUと比較しても日本語対応が充実
    ■ ビルトインのエンティティが非常に豊富
    ○ Dialogflow IntegrationsでSNS・電話・Webチャットな
    どとの連携を数クリックで設定可能な様子
    ※Dialogflowの機能です
    ○ ただし要GCPアカウントおよびGCP利用料金が発生

    View Slide

  49. @VoiceflowHQ | #VFJUG
    4. カスタムアシスタントのNLU選択

    View Slide

  50. @VoiceflowHQ | #VFJUG
    ご紹介したい機能はほかにもたくさん

    View Slide

  51. @VoiceflowHQ | #VFJUG
    ぜひ試してみてください!

    View Slide

  52. @VoiceflowHQ | #VFJUG
    2023年の新機能にも期待!

    View Slide

  53. Thanks!
    #voicedg #voiceflow #vfjug

    View Slide

  54. @VoiceflowHQ | #VFJUG
    ● Dialog Management API
    ○ カスタムアシスタント向け
    ○ Voiceflowで作った会話フローにAPIアクセスして会話
    のやりとりができる
    ● これを使って、Webサイト埋め込みチャットボットを
    作ることもできる
    ● ただし、色々大変&コードを書く必要がある
    ○ フロントエンドUI(JavaScript/CSSとか)
    ○ バックエンドアプリ
    ○ CORSとかSame-site Cookieとかいろいろ考慮が…
    補足:Dialog Management API

    View Slide

  55. @VoiceflowHQ | #VFJUG
    ● けど、やれることの幅はかなり広がる!
    ○ SNSのボット(Slack/FB Messagener/MS Teams等)
    ○ 電話(Twilio)
    ○ スマホアプリ、Webアプリ
    ○ なんでもVoiceflowにつなげることができる
    ● 特性に合わせて2つのAPIが使える
    ○ State API … お手軽に使える
    ○ Stateless API … センシティブなデータの自前管理可
    興味があれば補足資料をごらんください
    補足:Dialog Management API

    View Slide

  56. @VoiceflowHQ | #VFJUG
    補足資料
    Dialog Management API (2021)

    View Slide

  57. @VoiceflowHQ | #VFJUG
    Dialog Management API
    ● カスタムアシスタント向け
    ● Voiceflowで作った会話フローにAPIアクセスして会話の
    やりとりができる

    View Slide

  58. @VoiceflowHQ | #VFJUG
    Dialog Management API
    ユーザー
    作成
    アプリ(SNS等)
    Web
    チャットボット
    フロントエンド
    Voiceflow
    対話モデル
    バック
    エンド
    処理
    カスタム
    アシスタン
    トプロジェ
    クト
    A
    P
    I
    開発者
    開発者 / デザイナー
    作成
    反映
    入力/ASR+STT NLU・NLP/バックエンド処理
    応答/TTS
    独自アシスタント

    View Slide

  59. @VoiceflowHQ | #VFJUG
    Dialog Management API
    ● フロントエンドを選ばない(APIアクセス部分を作れば)
    ○ SNS: LINE/Slack/Messenger等
    ○ 電話: Twilio
    ○ スマホアプリ・Webアプリ
    ○ 独自スマートスピーカー
    ● 開発者とデザイナーの作業分担ができる
    ● 1つの会話フローで複数のフロントエンド
    ○ 会話フローの修正は1回で済む
    ○ フロントエンドはそれぞれの流儀に合わせて、
    つなぎこむだけのシンプルな処理で済む

    View Slide

  60. @VoiceflowHQ | #VFJUG
    ● State API
    ○ 必要なのはユーザIDのみ、会話の「状態」管理は
    Voiceflowに任せる
    ○ ユーザIDだけなげてやり取りすれば応答が変わる
    ○ シンプルにユーザIDつけてリクエスト送るだけ!
    ● Stateless API
    ○ 会話の「状態」管理を自前で行う
    ○ 同じステート情報を投げた場合、基本的に同じ回答
    ○ センシティブなデータを自前で管理できる!
    Dialog Management APIの2つのAPI

    View Slide

  61. @VoiceflowHQ | #VFJUG
    構成例① SNS連携(Slack等)
    ユーザー SNS
    アプリ
    SNSプラットフォーム
    Voiceflow
    対話モデル
    バック
    エンド
    処理
    A
    P
    I
    入力
    API
    繋ぎこみ
    PaaS
    応答
    NLU・NLP/バックエンド処理
    状態
    データ

    View Slide

  62. 電話+
    音声/テキ
    スト変換
    @VoiceflowHQ | #VFJUG
    構成例② IVR連携(Twilio等)
    ユーザー
    IVRプラットフォーム
    Voiceflow
    対話モデル
    バック
    エンド
    処理
    A
    P
    I
    NLU・NLP/バックエンド処理
    API
    繋ぎこみ
    PaaS
    ASR+STT
    TTS
    状態
    データ

    View Slide

  63. @VoiceflowHQ | #VFJUG
    構成例③ Webチャットボット連携
    ユーザー
    Webサイト
    Voiceflow
    対話モデル
    バック
    エンド
    処理
    A
    P
    I
    API
    繋ぎこみ
    PaaS
    入力
    応答
    Web
    チャットボット
    Ajax
    クライアント
    状態
    データ
    NLU・NLP/バックエンド処理

    View Slide