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.3k
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.7k
VoiceLunchJP#27 Voiceflow Updates 2022 (EN)
kun432
0
170
VoiceLunchJP#27 Voiceflow Updates 2022
kun432
0
180
VoiceLunchJP#3 VoiceflowでAudioPlayerスキルを作ろう!ハンズオン / VoiceLunchJP3 Alexa's Audio Player Hands-on using Voiceflow
kun432
0
200
Skill Connections やってみた / Introduction to Alexa Skill Connections
kun432
1
1.7k
Skill Connectionsやってみた / Introduction to Alexa's Skill Connection
kun432
0
480
ノンコーディングで始めるAlexaスキル開発 / Introduction to Alexa Skill Development with non-conding
kun432
0
300
Alexaでもparタグ使いたい!〜Alexaで発話とサウンドを並列再生する〜 / Speak with Background Music on Alexa
kun432
0
1.8k
Voiceflowで一人Advent Calendarをやってみた話 / Voiceflow TIPS Advent Calender in Japanese
kun432
0
610
Other Decks in Programming
See All in Programming
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
330
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
210
バッチを作らなきゃとなったときに考えること
irof
2
530
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
150
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
Domain-Driven Design (Tutorial)
hschwentner
13
22k
良いコードレビューとは
danimal141
1
140
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Optimizing for Happiness
mojombo
376
70k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Music & Morning Musume
bryan
46
6.4k
BBQ
matthewcrist
87
9.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Typedesign – Prime Four
hannesfritz
40
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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