以前以下のイベントで発表した資料を2022年の内容で更新しました。
https://vuidesigner.connpass.com/event/177473/
ではじめる音声アプリ/チャットボット開発〜2022年版〜#voiceflow #vfjug
View Slide
自己紹介@VoiceflowHQ | #VFJUG
自己紹介@VoiceflowHQ | #VFJUGKuniaki 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 | #VFJUG1. ブロックを選んで置く
@VoiceflowHQ | #VFJUG2. ブロックの設定
@VoiceflowHQ | #VFJUG3. 線でつなぐ
@VoiceflowHQ | #VFJUG4. これを繰り返していく
@VoiceflowHQ | #VFJUG5. ユーザの発話をもとに分岐
@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開発者アカウントとの紐付け設定が必要です。※実際には１分ぐらいかかります。アップロードボタンをクリックするだけで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 | #VFJUGAさんのアカウントで作ったスキルの、ダウンロード用リンクを発行
プロジェクトの共有@VoiceflowHQ | #VFJUGBさんがリンクを開くと自分のアカウントにコピーされます
テストだけの共有が可能@VoiceflowHQ | #VFJUGAさんのアカウントで作ったスキルの、テスト用リンクを発行
テストだけの共有が可能@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 | #VFJUGAlexa/Googleでの通常の開発Alexa/Googleクラウド バックエンド(Lambda等)対話モデル バックエンド処理ユーザー発話応答開発者作成 プログラミング
@VoiceflowHQ | #VFJUGVoiceflowでAlexa/Google向け開発Alexa/Googleクラウド Voiceflowバックエンド対話モデル バックエンド処理ユーザー開発者 / デザイナー反映作成発話応答プロジェクト
@VoiceflowHQ | #VFJUGVoiceflowでカスタムアシスタント開発ユーザーフロントエンドVoiceflow対話モデルバックエンド処理カスタムアシスタントプロジェクトAPI開発者 / デザイナー作成反映アプリ（SNS等）Webチャットボットフロントエンド独自アシスタント作成開発者
@VoiceflowHQ | #VFJUGVoiceflowでカスタムアシスタント開発ユーザー作成アプリ（SNS等）WebチャットボットフロントエンドVoiceflow対話モデルバックエンド処理カスタムアシスタントプロジェクトAPI開発者開発者 / デザイナー作成反映入力/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対話モデルバックエンド処理API入力API繋ぎこみPaaS応答NLU･NLP/バックエンド処理
電話＋音声/テキスト変換@VoiceflowHQ | #VFJUG構成例② IVR連携（Twilio等）ユーザーIVRプラットフォームVoiceflow対話モデルバックエンド処理APINLU･NLP/バックエンド処理API繋ぎこみPaaSASR+STTTTS
@VoiceflowHQ | #VFJUG構成例③ Webチャットボット連携ユーザーWebサイトVoiceflow対話モデルバックエンド処理APIAPI繋ぎこみ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/VoiceflowVoiceflowについて色々書いてます@VoiceflowHQ | #VFJUG
Thanks!#voiceflow #vfjug
kun432
qnighy
yahiru
texmeijin
akkyie
os1ma
pospome
assu_ming
philipschwarz
codehex
niftycorp
irof
nijieinfra
wjessup
garrettdimon
eileencodes
dotmariusz
vanstee
reverentgeek
bluesmoon
deanohume
3n
trallard
pauljervisheath