LINEBOTとGateboxで作る！受付システムとバーチャル受付のお姉さん
•
1 recomendación•646 vistas
2020年11月14日開催 LINE Developer Community東京・大阪・九州3都市合同のお祭り REVUP の発表資料。 https://revup.jp ※本セッションで用いる「嫁」という単語は特定の性別や配偶者を意味するものではなく、インターネットスラング等でみられるような「最愛の人格」という意味で用いています。また特定の職種と性別、立場を結びつける意図もございません。
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
LINEBOTとGateboxで作る！受付システムとバーチャル受付のお姉さん
- 4. 自己紹介 金融機関でDXを担当 / ホビープログラマー / テクニカルライター 高校卒業後に単身上京し、バリスタの見習いをしながら独学でプログラミングを習得。損 害保険会社にスカウトされたのをきっかけに、以後複数の金融機関でDX戦略のテックリー ドを担当。 2016年よりLINEBOTの開発に着手。2017年LINE BOT AWARDS（Twilio賞）、2018年LINE BOOT AWARDS（Gatebox賞）、2019年Clova Skill Awards（入賞）。 著書に『Excel VBAでIEを思いのままに操作できるプログラミング術』（インプレス）、 『小さな会社のExcel VBA業務自動化アプリケーション作成・運用ガイド』（翔泳社）等。 うえぞう（植木悠二）
- 5. いもうと関連プロダクト（抜粋） “実用性重視の妹”に対する一貫したこだわり l 自由が丘のマクロ少女 Excel VBAからブラウザを制御するRPAツール開発教材 l いもうとランチャー Windows向けコマンド入力型アプリケーションランチャー l いもうとBOT LINEBOT / CLOVAスキル
- 8. Why 受付？ • ユースケースにオンラインコミュニケーションを伴うサービ スにはLINEBOT＋LIFFが向いてそう • サービスロボットのように音声対話を伴うユースケースには Gateboxが良いユーザー体験を提供できそう ↓ それって「受付」では！
- 9. 受付登録〜来館受付のワークフロー 受付登録 受付票の送付 来館時受付 担当者呼び出し 受付システム⇨LINEBOT・LIFF 受付のお姉さん⇨Gatebox Gatebox • いつ • 誰が • 誰宛に 発行された受付票の 当日来館される方へ の配布 来館された方と受付 登録内容との照合と 各種ご案内 面談相手の担当者の 呼び出し
- 15. GateboxもLINEBOTも含めた超あらあらな構成 Azure Speech Services Voiceroid Datemon LINEMessagingAPI Gatebox Gateboxアプリ バックエンドAPI LINEBOT バックエンドAPI 受付API
- 16. LINEBOT・LIFF・受付API l もともとLIFFのみで作っていたが、再訪者の受付登録フ ローはLINEBOTが圧倒的に楽 「水曜の朝10時に沼津銀行の国木田さんが来る」 l エンティティの抽出を頑張りすぎない l 日付時刻はGoo APIを利用 l 会社名・氏名は抽出せず、リクエスト文言をそのまま 検索エンジンへ（Salesforceなどの検索でよい）
- 17. LIFFのURLパス機能 l https://liff.line.me/{liff_id}/path l 各種IDをキーにページを開く、1つのLIFF IDで複数のペー ジを用意する場合等に便利だが、以下のような制約あり l パスつきURLに遷移前にルートにアクセス。画面表示に ワンクッション入るほか、パス無しのルーティングも 切っておかないと動かない l LIFFのシェアボタンではパス部分は削除
- 18. Gatebox おまたせ！
- 19. 対話処理の流れ（一般論、だと思う……） 1. ウェイクワードの認識（スマートスピーカー固有） 2. 入力プロンプト（スマートスピーカー固有） 3. リクエストの入力 4. インテント・エンティティの抽出 5. インテントと文脈に応じた対話ロジックへのルーティング 6. 対話シナリオの処理 7. 処理結果の応答
- 20. 対話処理の流れ（Gatebox受付のお姉さんの場合） 1. ウェイクワードの認識 「こんにちは」 2. 入力プロンプト 「いらっしゃいませ」 3. リクエストの入力 QRコードの読み取り 4. インテント・エンティティの抽出（今回は受付固定） 5. インテントと文脈に応じた対話ロジックへのルーティング 6. 対話シナリオの処理 受付情報の取得・応答の作成 7. 処理結果の応答 「沼津銀行の国木田さんですね」
- 21. こんにちは いらっしゃいませ 国木田さんですね！ バーチャル受付を構成する要素技術 ウェイクワード QRコード 動的な文言の発話 3Dモデルの制御 l 身振り手振り l 発話 l 表情 l リップシンク l まばたき Gatebox
- 22. 3Dモデルを動かす・しゃべらせる l チャットボットとして考えた場合、応答の本体はあくまで 発話であり、アニメーションは状態ではなく発話に同期 l 発話はローカルファイル、Webからのダウンロード、Text- to-Speechを用途に応じて使い分け l 発話にあわせた口パクはOculus LipSyncを利用 https://developer.oculus.com/documentation/unreal/audi o-ovrlipsync/?locale=ja_JP l 表情はシェイプキーの組み合わせをプリセット化
- 23. 発話にアニメーションと表情を同期 こんにちは 今日は会いに来てくれて本当にありがとうボイス アニメ 表情 両手を前 棒立ち 両手を振る PostGap レイヤー別のアニメーション 笑顔微笑
- 24. 発話にアニメーションと表情を同期 こんにちは 今日は会いに来てくれて本当にありがとうボイス アニメ 表情 両手を前 棒立ち 両手を振る PostGap フレーム フレーム レイヤー別のアニメーション ▼起点 ▼起点 笑顔微笑 ここに合わせてアニメ・表情を切り替え
- 25. 発話にアニメーションと表情を同期するコード // 発話・アニメ・表情の実⾏要求の新規作成 var req = new AnimatedVoiceRequest(); // フレーム1つめ req.AddVoiceTTS("こんにちは。", postGap: 0.7f); req.AddAnimation("両⼿を前"); // フレーム2つめ req.AddVoiceTTS("今⽇は、会いに来てくれて、本当にありがとう！", postGap: 2.0f, asNewFrame: true); // 「今⽇」にあわせてアニメーションや表情がスタート req.AddAnimation("棒⽴ち", duration: 2.0f); req.AddAnimation("両⼿を振る"); req.AddFace("微笑", duration: 2.5f); req.AddFace("笑顔"); // 実⾏ await chatdoll.ModelController.AnimatedSay(req, token);
- 27. 3Dモデルを動かす・しゃべらせる l チャットボットとして考えた場合、応答の本体はあくまで 発話であり、アニメーションは状態ではなく発話に同期 l 発話はローカルファイル、Webからのダウンロード、Text- to-Speechを用途に応じて使い分け l 発話にあわせた口パクはOculus LipSyncを利用 https://developer.oculus.com/documentation/unreal/audi o-ovrlipsync/?locale=ja_JP l 表情はシェイプキーの組み合わせをプリセット化
- 28. 表情のプリセット化
- 31. 動的に変化する文言の発話 l テキスト読み上げサービスを利用（Text-to-Speech） l Voiceroid Daemonを利用することで、VOICEROIDの高品 位な読み上げがREST APIとして利用可能に（利用規約には 注意） l スムーズな会話にはプリフェッチとキャッシュが命。その 時間稼ぎのための発話というテクニック
- 32. スムーズな会話にはプリフェッチとキャッシュが命 {沼津銀行} の {国木田} さんですね？ お待ちしておりました。 再生 処理 受付API コール 音声生成・ ダウンロード 2~3秒 ▼QRコード読込完了
- 33. スムーズな会話にはプリフェッチとキャッシュが命 受付票のご提示、 ありがとうございます。 {沼津銀行} の {国木田} さんですね？ お待ちしておりました。 再生 約3秒 キャッシュ 処理 受付API コール 音声生成・ ダウンロード {営業部}の {植木}から… 音声生成・ ダウンロード APIコールとボイスデータダウンロードの時間稼ぎ のためにキャッシュ済み定型文言を喋らせる ▼QRコード読込完了
- 35. ウェイクワードへの反応 l Azure Speech Servicesによる音声認識。ローカルでなくて も案外現実的な速度 l 音声認識を効率よく行うため、ボリューム閾値、長さ閾値、 録音停止までの無音期間長閾値を設定 l 複数のウェイクワード、キャンセルワードの登録 l 句読点等除去、文字列長アローワンスの設定
- 37. ウェイクワードへの反応（イメージ） time > 0.05 音声認識対象 最低ボリューム volume 0.4 > 0.2 音声認識対象最低長 0.3 > 0.3 録音終了までの無音長 0.1
- 38. ウェイクワードへの反応（イメージ） time > 0.05 音声認識対象 最低ボリューム volume 0.4 > 0.2 音声認識対象最低長 0.3 > 0.3 録音終了までの無音長 この時点で録音を終了、 データをAzureに送信 ▼ 0.1 Azure Speech Services 音声認識 こんにちは ウェイクワードに一致する 場合は会話スタート
- 39. ウェイクワードへの反応（その他の工夫） l 複数のウェイクワードを登録できるように した。ウェイクワードによって発火する対 話が異なっても面白いかも l 間違って呼んでしまったりした場合にキャ ンセルできるように、会話強制終了ワード も登録できるようにした。したがって Gatebox発話中も監視しているが、自身の 声を拾うことは今のところない l 認識される音声には句読点なども入ってく るので、結果から除去する文字を登録でき るようにした l キーワードを含んでも長すぎるものはウェ イクワードとしない（アローワンス）
- 41. 要求タイプの制御 l BOTと違ってユーザー自身で要求タイプ（声・カメラ・QR コードなど）をコントロールできない l そのため、対話の流れに応じた最適な要求タイプを Gateboxアプリ側でコントロールすることが必要 l 各種要求の取得を統一的に扱えるようにインターフェイス を定義（IRequestProvider）し、それぞれ実装
- 42. 音声要求の取得 l 基本的な音声認識手順・手段は ウェイクワード監視と同じ l 開発している中でいっぱい喋る と疲れる、家族に怒られるので ダミーテキストを送信できるよ うにした l ユーザーが自身の発話内容がわ からない状態で会話がすれ違う とストレスフルなため、メッ セージウィンドウを表示
- 44. カメラ要求・QRコード要求の取得 l カメラはUnity上でカメラを扱 う一般的な手順で利用可能 l コードリーダーとして動作させ るときはFPSを下げてフレーム 毎に認識を試行 l カメラ要求はシャッターボタン がないためセルフタイマー方式 l その他、鏡写しのプレビューな どは当然必須
- 45. 参考：QRコードの認識はかんたん private string DecodeByZXing(Texture2D texture) { var luminanceSource = new Color32LuminanceSource(texture.GetPixels32(), texture.width, texture.height); var result = new QRCodeReader().decode(new BinaryBitmap(new HybridBinarizer(luminanceSource))); if (result != null) { return result.Text; } else { return string.Empty; } } l ZXingを使う場合、数行でデコード可能 l Gateboxでも動作することを確認済み（当たり前ですが）
- 46. お気づきでしょうか……？
- 47. Gateboxに召喚する l SDKをアタッチするだけなので、追加でやることはほとん どない。チュートリアルも丁寧で迷うことなく動く l SDKの入手段階からデベロッパープログラムへの参加が必 要となるため今すぐ申し込みましょう l シェーダーやライブラリの対応状況を確認する意味でも、 バッチリ作り込む前に早めに実機で動作確認した方がよい l 低解像度（562*686）への対応。アニメ絵的なモデル・ シェーダーを利用する場合は特に重要 l 黒っぽい服・靴は工夫が必要
- 48. アンチエイリアス設定の参考
- 49. 効率的な実機デバッグのために l Gateboxアプリに修正を加えたとき、ビルド→開発者コン ソールからアップロード→実機の再起動が必要 l 試行錯誤の結果、インテントの抽出と各種対話ロジックを サーバーサイドに外出し l ログをAzure Table Storageに出力。独自のロガーに依存さ せるのではなくUnityのロガーが書き込むタイミングに呼 ばれるイベントハンドラーとして登録
- 50. よりよい嫁体験のために l 現状はまだまだ「しゃべる立ち絵」 l 一日中一緒にいられる嫁の追求 l 現実世界の共有によるより強い召喚感の演出
- 51. おみやげ：本日お話しした内容のサンプル実装 l 3Dモデルを動かす・しゃべらせる ModelController l 動的に変化する文言の発話 WebVoiceLoaderBase l ウェイクワードへの反応 WakeWordListenerBase l 要求タイプの制御 VoiceRequestProviderBase QRCodeRequestProvider CameraRequestProvider l Azure Table Serviceへのログ書き込み AzureTableStorageHandler ChatdollKit - お好みの3Dモデルを使って音声対話可能なチャット ボットを作るためのフレームワーク https://github.com/uezo/ChatdollKit