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

Voiceflowではじめる音声アプリ・チャットボット開発〜2022年版〜 / Introduction to Developing Voice Apps & Chatbots with Voiceflow

Voiceflowではじめる音声アプリ・チャットボット開発〜2022年版〜 / Introduction to Developing Voice Apps & Chatbots with Voiceflow

以前以下のイベントで発表した資料を2022年の内容で更新しました。

https://vuidesigner.connpass.com/event/177473/

5caee8d2ccdb42a940545c47c6c01373?s=128

Kuniaki Shimizu

May 31, 2022
Tweet

More Decks by Kuniaki Shimizu

Other Decks in Programming

Transcript

  1.      ではじめる 音声アプリ/チャットボット開発 〜2022年版〜 #voiceflow #vfjug

  2. 自己紹介 @VoiceflowHQ | #VFJUG

  3. 自己紹介 @VoiceflowHQ | #VFJUG Kuniaki Shimizu (@kun432) • インフラエンジニア •

    AWS認定Alexaスキルビルダー • #VFJUG/#AAJUG/#VoiceLunchJP • Voiceflow Global Ambassador • Voiceflow Growth Award 2019
  4. 公開中の音声アプリ @VoiceflowHQ | #VFJUG • Alexa(JP) • Alexa(US) • Google

    • Clova
  5. 免責事項 @VoiceflowHQ | #VFJUG

  6. @VoiceflowHQ | #VFJUG 免責事項 • 本資料は、2022/05/29に作成されたものです。将来的に 諸所変更されている可能性があります。 • 本資料内で紹介している画面イメージ等は古い可能性が あります。

    • 本資料は、Voiceflowを触ったことがない方に気軽に始め てもらうということを目的に、作成者の所感に基づいて 記載されています。個人によっては感じ方・捉え方は異 なる場合があります。 • 本資料を参照されたことによるいかなる不利益・損害に ついて責任を負いかねます。
  7. とは? @VoiceflowHQ | #VFJUG

  8. とは? @VoiceflowHQ | #VFJUG • ノンコーディングで音声アプリが作成できるサービス ◦ Alexaスキル ◦ Googleアクション※1

    • ブラウザだけで音声アプリ開発が可能 • ノンコーディングとしては機能が非常に豊富 • 基本無料ではじめれる • コミュニティがとても活発 ※1 Alexaに比べると、現時点ではいろいろ機能が限定的です
  9. @VoiceflowHQ | #VFJUG • 独自の音声アシスタント・チャットボット開発も可能 ◦ 「カスタムアシスタント」 ◦ Alexa/Google向けと同じインタフェースで会話フロー を作る

    ◦ Dialog Management APIを使って、フロントエンド から会話フローにつなぎこむ ▪ SNS (LINE / Slack / FB Messenger /MS Teams等) ▪ IVR (Twilio等) ▪ スマホアプリ/Webアプリ ◦ コーディング知識が必要 ◦ フロントエンド部分は開発者側で用意する必要あり さらに     とは? 2022年版!!
  10. @VoiceflowHQ | #VFJUG • デザイナー向けにどんどん便利になるプロトタイピング ◦ プロトタイピングの共有 ◦ キャンバスマークアップ ◦

    コメントシステム ◦ プロトタイプ結果の記録 ◦ ユーザーペルソナ設定 さらに     とは? 2022年版!!
  11. での 音声アプリ開発の流れ (Alexaスキルの場合) @VoiceflowHQ | #VFJUG

  12. @VoiceflowHQ | #VFJUG 画面構成

  13. @VoiceflowHQ | #VFJUG 作成開始 スタート地点

  14. @VoiceflowHQ | #VFJUG 1. ブロックを選んで置く

  15. @VoiceflowHQ | #VFJUG 2. ブロックの設定

  16. @VoiceflowHQ | #VFJUG 3. 線でつなぐ

  17. @VoiceflowHQ | #VFJUG 4. これを繰り返していく

  18. @VoiceflowHQ | #VFJUG 5. ユーザの発話をもとに分岐

  19. @VoiceflowHQ | #VFJUG できたものがこちらになります

  20. ブロックを並べて線でつなぐこと で会話フローを作ります @VoiceflowHQ | #VFJUG

  21. 会話フローが視覚的・直感的に! VUIデザインが捗る! @VoiceflowHQ | #VFJUG

  22. @VoiceflowHQ | #VFJUG いろいろなブロック(一部だけご紹介) Alexaに発話させる ユーザの発話を受け取って 会話フローを分岐する ユーザの発話の一部 を変数にして条件判定 したり分岐したり等

    プログラミング的な 処理もできます。 Alexaに特化した機能 のブロックもあります。
  23. @VoiceflowHQ | #VFJUG 効果音や音楽を流したり MP3ファイルを アップロードするだけ ※音声ファイルは4分以内に抑える必要あり ※4分以上の音声ファイルはSteamブロック  を使って、音声ファイルを外部で公開する  必要があります。

  24. @VoiceflowHQ | #VFJUG 画面付きデバイスに対応したり 画像ファイルを アップロードするだけ ※凝ったことをする場合はAPLを使う必要があります  APLのjsonファイルをアップロードも可

  25. @VoiceflowHQ | #VFJUG スキルのアップロード ※初回はAlexa開発者アカウントとの紐付け設定が必要です。 ※実際には1分ぐらいかかります。 アップロードボタンを クリックするだけで Alexa開発者コンソール にアップロードされます

  26. @VoiceflowHQ | #VFJUG スキルのテスト アップロード完了後、 リンクからテスト! ※Voiceflow側にもテストツールもありますが、Alexa開発者  コンソールや実機とは微妙に動きが異なるので、常にAlexa  開発者コンソールでテストすることをオススメします

  27. @VoiceflowHQ | #VFJUG スキルの申請・公開 スキルのアイコンや スキルの説明など 必要事項入力後に Submitボタンを クリックするだけ!

  28. • インテント/スロット • 変数やロジック • 永続セッション • JavaScript • ワンショット発話※1

    • SSML※1,2 • Polly※1 • APL(画面対応)※1 • ストリーミング • ダイアログモデル※1 • API連携 • サービス連携(Googleスプ レッドシート、Zapier) • リマインダー※1 • ユーザプロファイル※1 • 所在地情報※1 • 位置情報(GPS)※1 • パーソナライズ※1 • スキル内課金※1 • アカウントリンク※1 @VoiceflowHQ | #VFJUG 豊富な機能の数々! ※1 Alexa向け ※2 Google向け
  29. 便利なプロトタイピング ※一部は有償機能のみ @VoiceflowHQ | #VFJUG

  30. プロトタイピング @VoiceflowHQ | #VFJUG 作成した会話フローを その場ですぐテスト可能 ※カスタムアシスタント向け ※Alexa/Googleはプラットフォーム側でテスト

  31. カスタムアシスタント向けNLP/NLU @VoiceflowHQ | #VFJUG カスタムアシスタント向けには NLU/NLPをVoiceflow側で用意

  32. キャンバスマークアップ @VoiceflowHQ | #VFJUG 会話フローの挙動には関係ない、 テキストや画像でキャンバスを装飾可能 → 仕様書や提案書として活用 マークアップしたキャンバス をPDF/画像でエクスポート可

  33. プロジェクトの共有 @VoiceflowHQ | #VFJUG Aさんのアカウントで作った スキルの、ダウンロード用 リンクを発行

  34. プロジェクトの共有 @VoiceflowHQ | #VFJUG Bさんがリンクを開くと 自分のアカウントに コピーされます

  35. テストだけの共有が可能 @VoiceflowHQ | #VFJUG Aさんのアカウントで作った スキルの、テスト用リンクを 発行

  36. テストだけの共有が可能 @VoiceflowHQ | #VFJUG リンクを共有すれば 誰でもテスト可能 &パスワード認証も

  37. エクスポート @VoiceflowHQ | #VFJUG 各プラットフォーム向けに 対話モデルのみエクスポート可能 Voiceflow独自のJSON形式での エクスポート可能 ※インポートすれば再現が可能 ※コード管理などに流用も

  38. コラボレーション機能 @VoiceflowHQ | #VFJUG メンバーを登録して複数人で同時開発可能 参照のみ・編集可などの権限設定も可能

  39. リアルタイムコラボレーション @VoiceflowHQ | #VFJUG リアルタイムで複数人で編集が可能

  40. コメントシステム @VoiceflowHQ | #VFJUG コラボレーションしている メンバー間でキャンバスにコメント →タスク管理などに使用可能

  41. Transcript @VoiceflowHQ | #VFJUG 共有したプロトタイプのテスト結果 を記録して後でチェックできる

  42. Transcript @VoiceflowHQ | #VFJUG テスト結果からその場で 会話モデルを修正可能

  43. ユーザーペルソナ @VoiceflowHQ | #VFJUG プロトタイプ時のユーザ属性 を設定・保存して、テスト時に 呼び出してテスト可能

  44. カスタムアシスタント& Dialog Management API @VoiceflowHQ | #VFJUG

  45. @VoiceflowHQ | #VFJUG • 独自の音声アシスタント・チャットボット開発も可能 ◦ Voiceflowで会話のフローを作る ◦ Dialog Management

    APIを使って、フロントエンド から会話フローにつなぎこむ ▪ SNS (LINE / Slack / FB Messenger /MS Teams等) ▪ IVR (Twilio等) ▪ スマホアプリ/Webアプリ ◦ コーディング知識が必要 ◦ フロントエンド部分は開発者側で用意する必要あり さらに     とは? 2022年版!! 再掲
  46. @VoiceflowHQ | #VFJUG Alexa/Googleでの通常の開発 Alexa/Googleクラウド バックエンド(Lambda 等) 対話モデル バックエンド 処理

    ユーザー 発話 応答 開発者 作成 プログラ ミング
  47. @VoiceflowHQ | #VFJUG VoiceflowでAlexa/Google向け開発 Alexa/Googleクラウド Voiceflowバックエンド 対話モデル バックエンド 処理 ユーザー

    開発者 / デザイナー 反映 作成 発話 応答 プロジェクト
  48. @VoiceflowHQ | #VFJUG Voiceflowでカスタムアシスタント開発 ユーザー フロントエンド Voiceflow 対話モデル バック エンド

    処理 カスタム アシスタン トプロジェ クト A P I 開発者 / デザイナー 作成 反映 アプリ(SNS等) Web チャットボット フロントエンド 独自アシスタント 作成 開発者
  49. @VoiceflowHQ | #VFJUG Voiceflowでカスタムアシスタント開発 ユーザー 作成 アプリ(SNS等) Web チャットボット フロントエンド

    Voiceflow 対話モデル バック エンド 処理 カスタム アシスタン トプロジェ クト A P I 開発者 開発者 / デザイナー 作成 反映 入力/ASR+STT NLU・NLP/バックエンド処理 応答/TTS 独自アシスタント
  50. @VoiceflowHQ | #VFJUG • AlexaやGoogle等プラットフォームに依存せず、フロント エンドを自由に選べる ◦ API経由でつなぎこむだけ • 開発者・デザイナーそれぞれが使いやすいやり方で

    分業が可能、それぞれのやるべきことに集中 ◦ 開発者は使い慣れたツールとコードで ◦ デザイナーは直感的なGUIで • バージョン管理が可能 ◦ バージョンの切り戻しなどもワンクリックで可能 ◦ 現行バージョンに直接変更を行い即反映も可能 カスタムアシスタントのメリット
  51. @VoiceflowHQ | #VFJUG • コーディング知識と実行環境が必要になる • バックエンドのNLU/NLPは、Microsoft LUISと推測される ため、日本語で使う場合にはMS LUISの日本語対応状況に

    依存する • Alexaが独自で提供しているような機能は当然ながら存在 しない。同等のものを実現する場合は独自実装が必要 カスタムアシスタントのデメリット
  52. @VoiceflowHQ | #VFJUG • フロントエンドからのリクエスト(ユーザの入力・発話) とVoiceflowの会話フローをつなぐためのAPI • プロジェクトごとにアクセストークンが発行される • 2つのAPIが存在する

    ◦ State API ▪ 必要なのはユーザIDのみ、会話の「状態」管理は Voiceflowに任せる ▪ IDだけなげてやり取りすれば応答が変わる ◦ Stateless API ▪ 会話の「状態」管理を自前で行う ▪ 同じステート情報を投げた場合、基本的に同じ回答 Dialog Management API
  53. @VoiceflowHQ | #VFJUG • 前提として、Voiceflow側で会話の「状態」データを開発者 側で管理できるような機能は現時点で提供されていない。 • State API ◦

    SNS等、ユーザIDの管理機能が提供されている場合 ◦ 会話の「状態」データがセンシティブでない場合 • Stateless API ◦ ユーザIDの管理機能が提供されていない場合 ▪ 誰でも使えるWebチャットボット等(セッションID 等で管理する必要が出てくる) ◦ 会話の「状態」データがセンシティブな場合 State/Stateless APIのユースケース
  54. @VoiceflowHQ | #VFJUG 構成例① SNS連携(Slack等) ユーザー SNS アプリ SNSプラットフォーム Voiceflow

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

    Voiceflow 対話モデル バック エンド 処理 A P I NLU・NLP/バックエンド処理 API 繋ぎこみ PaaS ASR+STT TTS
  56. @VoiceflowHQ | #VFJUG 構成例③ Webチャットボット連携 ユーザー Webサイト Voiceflow 対話モデル バック

    エンド 処理 A P I API 繋ぎこみ PaaS 入力 応答 Web チャットボット Ajax クライアント 状態 データ NLU・NLP/バックエンド処理
  57. まとめ

  58. まとめ • ノンコーディングでかんたん、音声アプリ開発への 第一歩として、初心者におすすめ! • 会話フローがより直感的・視覚的に!今後もデザイナー 向け機能が充実予定!VUIデザイナーにおすすめ! • カスタムアシスタント/Dialog Management

    APIにより 独自アシスタントの構築やより凝ったことが実現可能 エンジニアにもおすすめ! @VoiceflowHQ | #VFJUG
  59. Starter Team Enterprise 月額 / 月額(年契約) $0 $40 / $50

    要問い合わせ スキル数 2 無制限 無制限 コラボレータ数(編集可) 5人 5人 無制限 コラボレータ数(参照のみ) ✕ ◦ ◦ ワークスペース数 1 1 無制限? リアルタイム同時編集 ◦ ◦ ◦ その他 • シングルサインオン • カスタムNLU • 詳細なユーザ権限管理 • プライベートホスティング • 専有アカウント管理 価格 @VoiceflowHQ | #VFJUG まずは 始めてみたい 方にオススメ! 業務で使いたい方はこちら も。必要に応じて Enterpriseへ 詳細は https://www.voiceflow.com/pricing をご確認ください
  60.      で 気軽に音声アプリ開発を はじめてみよう! @VoiceflowHQ | #VFJUG

  61. おまけ @VoiceflowHQ | #VFJUG

  62. https://community.voiceflow.com/ 公式コミュニティ @VoiceflowHQ | #VFJUG

  63. https://www.facebook.com/groups/vfjug/ 日本語コミュニティあります @VoiceflowHQ | #VFJUG

  64. https://kun432.hatenablog.com/archive/category/Voiceflow Voiceflowについて色々書いてます @VoiceflowHQ | #VFJUG

  65. Thanks! #voiceflow #vfjug