Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Voiceflowではじめる音声アプリ・チャットボット開発〜2022年版〜 / Introdu...
Search
Kuniaki Shimizu
May 31, 2022
Programming
1
1.2k
Voiceflowではじめる音声アプリ・チャットボット開発〜2022年版〜 / Introduction to Developing Voice Apps & Chatbots with Voiceflow
以前以下のイベントで発表した資料を2022年の内容で更新しました。
https://vuidesigner.connpass.com/event/177473/
Kuniaki Shimizu
May 31, 2022
Tweet
Share
More Decks by Kuniaki Shimizu
See All by Kuniaki Shimizu
RAGのretrievalの評価を “ranx”で行う / Evaluate retrival of RAG using "ranx"
kun432
1
2.2k
VoiceLunchJP#27 Voiceflow Updates 2022 (EN)
kun432
0
120
VoiceLunchJP#27 Voiceflow Updates 2022
kun432
0
130
VoiceLunchJP#3 VoiceflowでAudioPlayerスキルを作ろう!ハンズオン / VoiceLunchJP3 Alexa's Audio Player Hands-on using Voiceflow
kun432
0
170
Skill Connections やってみた / Introduction to Alexa Skill Connections
kun432
1
1.5k
Skill Connectionsやってみた / Introduction to Alexa's Skill Connection
kun432
0
430
ノンコーディングで始めるAlexaスキル開発 / Introduction to Alexa Skill Development with non-conding
kun432
0
260
Alexaでもparタグ使いたい!〜Alexaで発話とサウンドを並列再生する〜 / Speak with Background Music on Alexa
kun432
0
1.7k
Voiceflowで一人Advent Calendarをやってみた話 / Voiceflow TIPS Advent Calender in Japanese
kun432
0
550
Other Decks in Programming
See All in Programming
Kotlin 2.0 and Beyond
antonarhipov
2
130
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
130
全力の跳躍を捉える計測アプリを作る
ogijun2018
0
1k
快適な開発と高セキュリティを実現するCryptoKitを活用したCoreDataのデータ暗号化術
grandbig
1
300
Regular Expressions, REXML, Automata Learning
makenowjust
0
180
null or undefined
susisu
20
4k
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
Ruby Parser progress report 2024
yui_knk
2
180
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
3
580
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
370
TypeScriptとGraphQLを活用した変化に強いプロダクト作り
bicstone
4
550
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
Featured
See All Featured
Become a Pro
speakerdeck
PRO
22
4.8k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
GraphQLとの向き合い方2022年版
quramy
43
13k
Six Lessons from altMBA
skipperchong
26
3.3k
Teambox: Starting and Learning
jrom
131
8.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Thoughts on Productivity
jonyablonski
65
4.2k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Designing for humans not robots
tammielis
248
25k
How STYLIGHT went responsive
nonsquared
93
5.1k
Transcript
ではじめる 音声アプリ/チャットボット開発 〜2022年版〜 #voiceflow #vfjug
自己紹介 @VoiceflowHQ | #VFJUG
自己紹介 @VoiceflowHQ | #VFJUG Kuniaki Shimizu (@kun432) • インフラエンジニア •
AWS認定Alexaスキルビルダー • #VFJUG/#AAJUG/#VoiceLunchJP • Voiceflow Global Ambassador • Voiceflow Growth Award 2019
公開中の音声アプリ @VoiceflowHQ | #VFJUG • Alexa(JP) • Alexa(US) • Google
• Clova
免責事項 @VoiceflowHQ | #VFJUG
@VoiceflowHQ | #VFJUG 免責事項 • 本資料は、2022/05/29に作成されたものです。将来的に 諸所変更されている可能性があります。 • 本資料内で紹介している画面イメージ等は古い可能性が あります。
• 本資料は、Voiceflowを触ったことがない方に気軽に始め てもらうということを目的に、作成者の所感に基づいて 記載されています。個人によっては感じ方・捉え方は異 なる場合があります。 • 本資料を参照されたことによるいかなる不利益・損害に ついて責任を負いかねます。
とは? @VoiceflowHQ | #VFJUG
とは? @VoiceflowHQ | #VFJUG • ノンコーディングで音声アプリが作成できるサービス ◦ Alexaスキル ◦ Googleアクション※1
• ブラウザだけで音声アプリ開発が可能 • ノンコーディングとしては機能が非常に豊富 • 基本無料ではじめれる • コミュニティがとても活発 ※1 Alexaに比べると、現時点ではいろいろ機能が限定的です
@VoiceflowHQ | #VFJUG • 独自の音声アシスタント・チャットボット開発も可能 ◦ 「カスタムアシスタント」 ◦ Alexa/Google向けと同じインタフェースで会話フロー を作る
◦ Dialog Management APIを使って、フロントエンド から会話フローにつなぎこむ ▪ SNS (LINE / Slack / FB Messenger /MS Teams等) ▪ IVR (Twilio等) ▪ スマホアプリ/Webアプリ ◦ コーディング知識が必要 ◦ フロントエンド部分は開発者側で用意する必要あり さらに とは? 2022年版!!
@VoiceflowHQ | #VFJUG • デザイナー向けにどんどん便利になるプロトタイピング ◦ プロトタイピングの共有 ◦ キャンバスマークアップ ◦
コメントシステム ◦ プロトタイプ結果の記録 ◦ ユーザーペルソナ設定 さらに とは? 2022年版!!
での 音声アプリ開発の流れ (Alexaスキルの場合) @VoiceflowHQ | #VFJUG
@VoiceflowHQ | #VFJUG 画面構成
@VoiceflowHQ | #VFJUG 作成開始 スタート地点
@VoiceflowHQ | #VFJUG 1. ブロックを選んで置く
@VoiceflowHQ | #VFJUG 2. ブロックの設定
@VoiceflowHQ | #VFJUG 3. 線でつなぐ
@VoiceflowHQ | #VFJUG 4. これを繰り返していく
@VoiceflowHQ | #VFJUG 5. ユーザの発話をもとに分岐
@VoiceflowHQ | #VFJUG できたものがこちらになります
ブロックを並べて線でつなぐこと で会話フローを作ります @VoiceflowHQ | #VFJUG
会話フローが視覚的・直感的に! VUIデザインが捗る! @VoiceflowHQ | #VFJUG
@VoiceflowHQ | #VFJUG いろいろなブロック(一部だけご紹介) Alexaに発話させる ユーザの発話を受け取って 会話フローを分岐する ユーザの発話の一部 を変数にして条件判定 したり分岐したり等
プログラミング的な 処理もできます。 Alexaに特化した機能 のブロックもあります。
@VoiceflowHQ | #VFJUG 効果音や音楽を流したり MP3ファイルを アップロードするだけ ※音声ファイルは4分以内に抑える必要あり ※4分以上の音声ファイルはSteamブロック を使って、音声ファイルを外部で公開する 必要があります。
@VoiceflowHQ | #VFJUG 画面付きデバイスに対応したり 画像ファイルを アップロードするだけ ※凝ったことをする場合はAPLを使う必要があります APLのjsonファイルをアップロードも可
@VoiceflowHQ | #VFJUG スキルのアップロード ※初回はAlexa開発者アカウントとの紐付け設定が必要です。 ※実際には1分ぐらいかかります。 アップロードボタンを クリックするだけで Alexa開発者コンソール にアップロードされます
@VoiceflowHQ | #VFJUG スキルのテスト アップロード完了後、 リンクからテスト! ※Voiceflow側にもテストツールもありますが、Alexa開発者 コンソールや実機とは微妙に動きが異なるので、常にAlexa 開発者コンソールでテストすることをオススメします
@VoiceflowHQ | #VFJUG スキルの申請・公開 スキルのアイコンや スキルの説明など 必要事項入力後に Submitボタンを クリックするだけ!
• インテント/スロット • 変数やロジック • 永続セッション • 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向け
便利なプロトタイピング ※一部は有償機能のみ @VoiceflowHQ | #VFJUG
プロトタイピング @VoiceflowHQ | #VFJUG 作成した会話フローを その場ですぐテスト可能 ※カスタムアシスタント向け ※Alexa/Googleはプラットフォーム側でテスト
カスタムアシスタント向けNLP/NLU @VoiceflowHQ | #VFJUG カスタムアシスタント向けには NLU/NLPをVoiceflow側で用意
キャンバスマークアップ @VoiceflowHQ | #VFJUG 会話フローの挙動には関係ない、 テキストや画像でキャンバスを装飾可能 → 仕様書や提案書として活用 マークアップしたキャンバス をPDF/画像でエクスポート可
プロジェクトの共有 @VoiceflowHQ | #VFJUG Aさんのアカウントで作った スキルの、ダウンロード用 リンクを発行
プロジェクトの共有 @VoiceflowHQ | #VFJUG Bさんがリンクを開くと 自分のアカウントに コピーされます
テストだけの共有が可能 @VoiceflowHQ | #VFJUG Aさんのアカウントで作った スキルの、テスト用リンクを 発行
テストだけの共有が可能 @VoiceflowHQ | #VFJUG リンクを共有すれば 誰でもテスト可能 &パスワード認証も
エクスポート @VoiceflowHQ | #VFJUG 各プラットフォーム向けに 対話モデルのみエクスポート可能 Voiceflow独自のJSON形式での エクスポート可能 ※インポートすれば再現が可能 ※コード管理などに流用も
コラボレーション機能 @VoiceflowHQ | #VFJUG メンバーを登録して複数人で同時開発可能 参照のみ・編集可などの権限設定も可能
リアルタイムコラボレーション @VoiceflowHQ | #VFJUG リアルタイムで複数人で編集が可能
コメントシステム @VoiceflowHQ | #VFJUG コラボレーションしている メンバー間でキャンバスにコメント →タスク管理などに使用可能
Transcript @VoiceflowHQ | #VFJUG 共有したプロトタイプのテスト結果 を記録して後でチェックできる
Transcript @VoiceflowHQ | #VFJUG テスト結果からその場で 会話モデルを修正可能
ユーザーペルソナ @VoiceflowHQ | #VFJUG プロトタイプ時のユーザ属性 を設定・保存して、テスト時に 呼び出してテスト可能
カスタムアシスタント& Dialog Management API @VoiceflowHQ | #VFJUG
@VoiceflowHQ | #VFJUG • 独自の音声アシスタント・チャットボット開発も可能 ◦ Voiceflowで会話のフローを作る ◦ Dialog Management
APIを使って、フロントエンド から会話フローにつなぎこむ ▪ SNS (LINE / Slack / FB Messenger /MS Teams等) ▪ IVR (Twilio等) ▪ スマホアプリ/Webアプリ ◦ コーディング知識が必要 ◦ フロントエンド部分は開発者側で用意する必要あり さらに とは? 2022年版!! 再掲
@VoiceflowHQ | #VFJUG Alexa/Googleでの通常の開発 Alexa/Googleクラウド バックエンド(Lambda 等) 対話モデル バックエンド 処理
ユーザー 発話 応答 開発者 作成 プログラ ミング
@VoiceflowHQ | #VFJUG VoiceflowでAlexa/Google向け開発 Alexa/Googleクラウド Voiceflowバックエンド 対話モデル バックエンド 処理 ユーザー
開発者 / デザイナー 反映 作成 発話 応答 プロジェクト
@VoiceflowHQ | #VFJUG Voiceflowでカスタムアシスタント開発 ユーザー フロントエンド Voiceflow 対話モデル バック エンド
処理 カスタム アシスタン トプロジェ クト A P I 開発者 / デザイナー 作成 反映 アプリ(SNS等) Web チャットボット フロントエンド 独自アシスタント 作成 開発者
@VoiceflowHQ | #VFJUG Voiceflowでカスタムアシスタント開発 ユーザー 作成 アプリ(SNS等) Web チャットボット フロントエンド
Voiceflow 対話モデル バック エンド 処理 カスタム アシスタン トプロジェ クト A P I 開発者 開発者 / デザイナー 作成 反映 入力/ASR+STT NLU・NLP/バックエンド処理 応答/TTS 独自アシスタント
@VoiceflowHQ | #VFJUG • AlexaやGoogle等プラットフォームに依存せず、フロント エンドを自由に選べる ◦ API経由でつなぎこむだけ • 開発者・デザイナーそれぞれが使いやすいやり方で
分業が可能、それぞれのやるべきことに集中 ◦ 開発者は使い慣れたツールとコードで ◦ デザイナーは直感的なGUIで • バージョン管理が可能 ◦ バージョンの切り戻しなどもワンクリックで可能 ◦ 現行バージョンに直接変更を行い即反映も可能 カスタムアシスタントのメリット
@VoiceflowHQ | #VFJUG • コーディング知識と実行環境が必要になる • バックエンドのNLU/NLPは、Microsoft LUISと推測される ため、日本語で使う場合にはMS LUISの日本語対応状況に
依存する • Alexaが独自で提供しているような機能は当然ながら存在 しない。同等のものを実現する場合は独自実装が必要 カスタムアシスタントのデメリット
@VoiceflowHQ | #VFJUG • フロントエンドからのリクエスト(ユーザの入力・発話) とVoiceflowの会話フローをつなぐためのAPI • プロジェクトごとにアクセストークンが発行される • 2つのAPIが存在する
◦ State API ▪ 必要なのはユーザIDのみ、会話の「状態」管理は Voiceflowに任せる ▪ IDだけなげてやり取りすれば応答が変わる ◦ Stateless API ▪ 会話の「状態」管理を自前で行う ▪ 同じステート情報を投げた場合、基本的に同じ回答 Dialog Management API
@VoiceflowHQ | #VFJUG • 前提として、Voiceflow側で会話の「状態」データを開発者 側で管理できるような機能は現時点で提供されていない。 • State API ◦
SNS等、ユーザIDの管理機能が提供されている場合 ◦ 会話の「状態」データがセンシティブでない場合 • Stateless API ◦ ユーザIDの管理機能が提供されていない場合 ▪ 誰でも使えるWebチャットボット等(セッションID 等で管理する必要が出てくる) ◦ 会話の「状態」データがセンシティブな場合 State/Stateless APIのユースケース
@VoiceflowHQ | #VFJUG 構成例① SNS連携(Slack等) ユーザー SNS アプリ SNSプラットフォーム Voiceflow
対話モデル バック エンド 処理 A P I 入力 API 繋ぎこみ PaaS 応答 NLU・NLP/バックエンド処理
電話+ 音声/テキ スト変換 @VoiceflowHQ | #VFJUG 構成例② IVR連携(Twilio等) ユーザー IVRプラットフォーム
Voiceflow 対話モデル バック エンド 処理 A P I NLU・NLP/バックエンド処理 API 繋ぎこみ PaaS ASR+STT TTS
@VoiceflowHQ | #VFJUG 構成例③ Webチャットボット連携 ユーザー Webサイト Voiceflow 対話モデル バック
エンド 処理 A P I API 繋ぎこみ PaaS 入力 応答 Web チャットボット Ajax クライアント 状態 データ NLU・NLP/バックエンド処理
まとめ
まとめ • ノンコーディングでかんたん、音声アプリ開発への 第一歩として、初心者におすすめ! • 会話フローがより直感的・視覚的に!今後もデザイナー 向け機能が充実予定!VUIデザイナーにおすすめ! • カスタムアシスタント/Dialog Management
APIにより 独自アシスタントの構築やより凝ったことが実現可能 エンジニアにもおすすめ! @VoiceflowHQ | #VFJUG
Starter Team Enterprise 月額 / 月額(年契約) $0 $40 / $50
要問い合わせ スキル数 2 無制限 無制限 コラボレータ数(編集可) 5人 5人 無制限 コラボレータ数(参照のみ) ✕ ◦ ◦ ワークスペース数 1 1 無制限? リアルタイム同時編集 ◦ ◦ ◦ その他 • シングルサインオン • カスタムNLU • 詳細なユーザ権限管理 • プライベートホスティング • 専有アカウント管理 価格 @VoiceflowHQ | #VFJUG まずは 始めてみたい 方にオススメ! 業務で使いたい方はこちら も。必要に応じて Enterpriseへ 詳細は https://www.voiceflow.com/pricing をご確認ください
で 気軽に音声アプリ開発を はじめてみよう! @VoiceflowHQ | #VFJUG
おまけ @VoiceflowHQ | #VFJUG
https://community.voiceflow.com/ 公式コミュニティ @VoiceflowHQ | #VFJUG
https://www.facebook.com/groups/vfjug/ 日本語コミュニティあります @VoiceflowHQ | #VFJUG
https://kun432.hatenablog.com/archive/category/Voiceflow Voiceflowについて色々書いてます @VoiceflowHQ | #VFJUG
Thanks! #voiceflow #vfjug