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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 @VoiceﬂowHQ | #VFJUG

Slide 3

Slide 3 text

自己紹介 @VoiceflowHQ | #VFJUG Kuniaki Shimizu (@kun432) ● インフラエンジニア ● AWS認定Alexaスキルビルダー ● #VFJUG/#AAJUG/#VoiceLunchJP ● Voiceflow Global Ambassador ● Voiceflow Growth Award 2019

Slide 4

Slide 4 text

公開中の音声アプリ @VoiceﬂowHQ | #VFJUG ● Alexa（JP） ● Alexa（US） ● Google ● Clova

Slide 5

Slide 5 text

免責事項 @VoiceﬂowHQ | #VFJUG

Slide 6

Slide 6 text

@VoiceﬂowHQ | #VFJUG 免責事項 ● 本資料は、2022/05/29に作成されたものです。将来的に諸所変更されている可能性があります。 ● 本資料内で紹介している画面イメージ等は古い可能性があります。 ● 本資料は、Voiceﬂowを触ったことがない方に気軽に始めてもらうということを目的に、作成者の所感に基づいて記載されています。個人によっては感じ方・捉え方は異なる場合があります。 ● 本資料を参照されたことによるいかなる不利益・損害について責任を負いかねます。

Slide 7

Slide 7 text

とは？ @VoiceﬂowHQ | #VFJUG

Slide 8

Slide 8 text

とは？ @VoiceﬂowHQ | #VFJUG ● ノンコーディングで音声アプリが作成できるサービス ○ Alexaスキル ○ Googleアクション※1 ● ブラウザだけで音声アプリ開発が可能 ● ノンコーディングとしては機能が非常に豊富 ● 基本無料ではじめれる ● コミュニティがとても活発 ※1 Alexaに比べると、現時点ではいろいろ機能が限定的です

Slide 9

Slide 9 text

@VoiceﬂowHQ | #VFJUG ● 独自の音声アシスタント・チャットボット開発も可能 ○ 「カスタムアシスタント」 ○ Alexa/Google向けと同じインタフェースで会話フローを作る ○ Dialog Management APIを使って、フロントエンドから会話フローにつなぎこむ ■ SNS (LINE / Slack / FB Messenger /MS Teams等) ■ IVR (Twilio等) ■ スマホアプリ/Webアプリ ○ コーディング知識が必要 ○ フロントエンド部分は開発者側で用意する必要ありさらに　　　　とは？ 2022年版!!

Slide 10

Slide 10 text

@VoiceﬂowHQ | #VFJUG ● デザイナー向けにどんどん便利になるプロトタイピング ○ プロトタイピングの共有 ○ キャンバスマークアップ ○ コメントシステム ○ プロトタイプ結果の記録 ○ ユーザーペルソナ設定さらに　　　　とは？ 2022年版!!

Slide 11

Slide 11 text

での音声アプリ開発の流れ (Alexaスキルの場合) @VoiceﬂowHQ | #VFJUG

Slide 12

Slide 12 text

@VoiceﬂowHQ | #VFJUG 画面構成

Slide 13

Slide 13 text

@VoiceﬂowHQ | #VFJUG 作成開始スタート地点

Slide 14

Slide 14 text

@VoiceﬂowHQ | #VFJUG 1. ブロックを選んで置く

Slide 15

Slide 15 text

@VoiceﬂowHQ | #VFJUG 2. ブロックの設定

Slide 16

Slide 16 text

@VoiceﬂowHQ | #VFJUG 3. 線でつなぐ

Slide 17

Slide 17 text

@VoiceﬂowHQ | #VFJUG 4. これを繰り返していく

Slide 18

Slide 18 text

@VoiceﬂowHQ | #VFJUG 5. ユーザの発話をもとに分岐

Slide 19

Slide 19 text

@VoiceﬂowHQ | #VFJUG できたものがこちらになります

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

会話フローが視覚的・直感的に！ VUIデザインが捗る！ @VoiceﬂowHQ | #VFJUG

Slide 22

Slide 22 text

@VoiceﬂowHQ | #VFJUG いろいろなブロック（一部だけご紹介） Alexaに発話させるユーザの発話を受け取って会話フローを分岐するユーザの発話の一部を変数にして条件判定したり分岐したり等プログラミング的な処理もできます。 Alexaに特化した機能のブロックもあります。

Slide 23

Slide 23 text

@VoiceﬂowHQ | #VFJUG 効果音や音楽を流したり MP3ファイルをアップロードするだけ ※音声ファイルは4分以内に抑える必要あり ※4分以上の音声ファイルはSteamブロック　を使って、音声ファイルを外部で公開する　必要があります。

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

● インテント/スロット ● 変数やロジック ● 永続セッション ● JavaScript ● ワンショット発話※1 ● SSML※1,2 ● Polly※1 ● APL（画面対応）※1 ● ストリーミング ● ダイアログモデル※1 ● API連携 ● サービス連携（Googleスプレッドシート、Zapier） ● リマインダー※1 ● ユーザプロファイル※1 ● 所在地情報※1 ● 位置情報(GPS)※1 ● パーソナライズ※1 ● スキル内課金※1 ● アカウントリンク※1 @VoiceﬂowHQ | #VFJUG 豊富な機能の数々！ ※1 Alexa向け ※2 Google向け

Slide 29

Slide 29 text

便利なプロトタイピング ※一部は有償機能のみ @VoiceﬂowHQ | #VFJUG

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

カスタムアシスタント向けNLP/NLU @VoiceﬂowHQ | #VFJUG カスタムアシスタント向けには NLU/NLPをVoiceﬂow側で用意

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

テストだけの共有が可能 @VoiceﬂowHQ | #VFJUG リンクを共有すれば誰でもテスト可能＆パスワード認証も

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

カスタムアシスタント& Dialog Management API @VoiceﬂowHQ | #VFJUG

Slide 45

Slide 45 text

@VoiceﬂowHQ | #VFJUG ● 独自の音声アシスタント・チャットボット開発も可能 ○ Voiceﬂowで会話のフローを作る ○ Dialog Management APIを使って、フロントエンドから会話フローにつなぎこむ ■ SNS (LINE / Slack / FB Messenger /MS Teams等) ■ IVR (Twilio等) ■ スマホアプリ/Webアプリ ○ コーディング知識が必要 ○ フロントエンド部分は開発者側で用意する必要ありさらに　　　　とは？ 2022年版!! 再掲

Slide 46

Slide 46 text

@VoiceﬂowHQ | #VFJUG Alexa/Googleでの通常の開発 Alexa/Googleクラウドバックエンド(Lambda 等) 対話モデルバックエンド処理ユーザー発話応答開発者作成プログラミング

Slide 47

Slide 47 text

@VoiceflowHQ | #VFJUG VoiceflowでAlexa/Google向け開発 Alexa/Googleクラウド Voiceflowバックエンド対話モデルバックエンド処理ユーザー開発者 / デザイナー反映作成発話応答プロジェクト

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

@VoiceﬂowHQ | #VFJUG ● AlexaやGoogle等プラットフォームに依存せず、フロントエンドを自由に選べる ○ API経由でつなぎこむだけ ● 開発者・デザイナーそれぞれが使いやすいやり方で分業が可能、それぞれのやるべきことに集中 ○ 開発者は使い慣れたツールとコードで ○ デザイナーは直感的なGUIで ● バージョン管理が可能 ○ バージョンの切り戻しなどもワンクリックで可能 ○ 現行バージョンに直接変更を行い即反映も可能カスタムアシスタントのメリット

Slide 51

Slide 51 text

@VoiceﬂowHQ | #VFJUG ● コーディング知識と実行環境が必要になる ● バックエンドのNLU/NLPは、Microsoft LUISと推測されるため、日本語で使う場合にはMS LUISの日本語対応状況に依存する ● Alexaが独自で提供しているような機能は当然ながら存在しない。同等のものを実現する場合は独自実装が必要カスタムアシスタントのデメリット

Slide 52

Slide 52 text

@VoiceflowHQ | #VFJUG ● フロントエンドからのリクエスト（ユーザの入力・発話）とVoiceflowの会話フローをつなぐためのAPI ● プロジェクトごとにアクセストークンが発行される ● 2つのAPIが存在する ○ State API ■ 必要なのはユーザIDのみ、会話の「状態」管理は Voiceflowに任せる ■ IDだけなげてやり取りすれば応答が変わる ○ Stateless API ■ 会話の「状態」管理を自前で行う ■ 同じステート情報を投げた場合、基本的に同じ回答 Dialog Management API

Slide 53

Slide 53 text

@VoiceﬂowHQ | #VFJUG ● 前提として、Voiceﬂow側で会話の「状態」データを開発者側で管理できるような機能は現時点で提供されていない。 ● State API ○ SNS等、ユーザIDの管理機能が提供されている場合 ○ 会話の「状態」データがセンシティブでない場合 ● Stateless API ○ ユーザIDの管理機能が提供されていない場合 ■ 誰でも使えるWebチャットボット等（セッションID 等で管理する必要が出てくる） ○ 会話の「状態」データがセンシティブな場合 State/Stateless APIのユースケース

Slide 54

Slide 54 text

@VoiceﬂowHQ | #VFJUG 構成例① SNS連携（Slack等）ユーザー SNS アプリ SNSプラットフォーム Voiceﬂow 対話モデルバックエンド処理 A P I 入力 API 繋ぎこみ PaaS 応答 NLU･NLP/バックエンド処理

Slide 55

Slide 55 text

電話＋音声/テキスト変換 @VoiceﬂowHQ | #VFJUG 構成例② IVR連携（Twilio等）ユーザー IVRプラットフォーム Voiceﬂow 対話モデルバックエンド処理 A P I NLU･NLP/バックエンド処理 API 繋ぎこみ PaaS ASR+STT TTS

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

まとめ

Slide 58

Slide 58 text

まとめ ● ノンコーディングでかんたん、音声アプリ開発への第一歩として、初心者におすすめ！ ● 会話フローがより直感的・視覚的に！今後もデザイナー向け機能が充実予定！VUIデザイナーにおすすめ！ ● カスタムアシスタント/Dialog Management APIにより独自アシスタントの構築やより凝ったことが実現可能エンジニアにもおすすめ！ @VoiceﬂowHQ | #VFJUG

Slide 59

Slide 59 text

Starter Team Enterprise 月額 / 月額(年契約) $0 $40 / $50 要問い合わせスキル数 2 無制限無制限コラボレータ数（編集可） 5人 5人無制限コラボレータ数（参照のみ） ✕ ○ ○ ワークスペース数 1 1 無制限？リアルタイム同時編集 ○ ○ ○ その他 ● シングルサインオン ● カスタムNLU ● 詳細なユーザ権限管理 ● プライベートホスティング ● 専有アカウント管理価格 @VoiceﬂowHQ | #VFJUG まずは始めてみたい方にオススメ！業務で使いたい方はこちらも。必要に応じて Enterpriseへ詳細は https://www.voiceﬂow.com/pricing をご確認ください

Slide 60

Slide 60 text

　　　　　で気軽に音声アプリ開発をはじめてみよう！ @VoiceﬂowHQ | #VFJUG

Slide 61

Slide 61 text

おまけ @VoiceﬂowHQ | #VFJUG

Slide 62

Slide 62 text

https://community.voiceflow.com/ 公式コミュニティ @VoiceﬂowHQ | #VFJUG

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

https://kun432.hatenablog.com/archive/category/Voiceflow Voiceﬂowについて色々書いてます @VoiceﬂowHQ | #VFJUG

Slide 65

Slide 65 text

Thanks! #voiceﬂow #vfjug