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

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

自己紹介 @VoiceﬂowHQ | #VFJUG

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

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

免責事項 @VoiceﬂowHQ | #VFJUG

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

とは？ @VoiceﬂowHQ | #VFJUG

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

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

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

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

@VoiceﬂowHQ | #VFJUG 画面構成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• インテント/スロット • 変数やロジック • 永続セッション • 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向け

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@VoiceﬂowHQ | #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 独自アシスタント

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

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

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

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

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

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

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

まとめ

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

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

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

おまけ @VoiceﬂowHQ | #VFJUG

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

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

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

Thanks! #voiceﬂow #vfjug

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

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

More Decks by Kuniaki Shimizu

Other Decks in Programming

Featured

Transcript