Bot Framework Composer で簡単に作成できる Web チャット ボットに、WebXR を使って 3D モデルを表示する機能を追加する方法を紹介します。

1. WebXR と Bot Composer
表現力の高い
チャット ボットを作ろう
2020/06/29 WebXR Tokyo #1
ユスキィ (Yusuke Hara) @ms_yuhara

2. 自己紹介
•マイクロソフトのブラウザーの中身をサポートする人
• Microsoft Edge と Internet Explorer のソースと格闘
•Bot Framework と Azure Bot Service も守備範囲
•Twitter をつい最近始めた (@ms_yuhara)
• フォロワーさん少なくてさびしい

3. ボット？
•2018 年頃からビジネス分野を含めてニーズが拡大
• 膨大になった情報やデータを賢く処理する必要性
• より自然で人に優しいインターフェイスの模索
• AI サービス (画像認識 / 音声認識 / 言語処理) が充実
•活用事例も増えているがまだまだ初期段階

4. Bot Framework と
Azure Bot Service
• 好きな言語で開発
• C#, Node.js, Python, Java
• 各チャンネルと簡単に接続
• Web Chat, Teams, Slack,
LINE...
• マイクロソフトの AI サービスと連携

5. WebXR のブラウザー対応状況
Windows macOS Android iOS
Google Chrome
〇 〇 〇 ×
(WebKit)
Microsoft Edge
〇 〇 △
(Chromium 77)
×
(WebKit)
Mozilla Firefox
△ △ △ ×
(WebKit)
Safari
× × × ×
• △は WebVR のみ対応
• 対応していなくても Polyfill により AR/VR 体験が可能な場合あり
• iOS 12.0 以降では Mozilla の WebXR Viewer が使える

6. ボットと WebXR
これから盛り上がっていく
分野をくっつけてみた！

7. 使ったものと作ったもの
•Bot Framework Composer
• ボットのダイアログ
•Azure Bot Service
•Bot Framework Web Chat
•WebXR Card (React Component)
• <model-viewer>, Babylon.js

8. ボットのダイアログ
• Composer でビジュアル的に会話をデザイン
• 3D モデルの返却はモードと URL を指定するだけ
${WebXRCard('ar',
'https://edgewatcher.azurewebsites.net/
balustervase.glb', '', 'スミソニアーンの伝
説の壺')}

9. WebXR Card のコンポーネント部分
AR
VR

10. 近未来では？
• センサーの情報や画像などから自動的に
高度な 3D モデルを生成できるようになる
だろう
• Azure Remote Rendering や Azure
Digital Twins などのインテリジェント サー
ビスにより、ボットが空間情報を正確に把握
できるようになるだろう
• ユーザーの質問に対して瞬時に 3D マップ
を表示して道案内してくれるようなボットが
登場するかも？

11. 参考リソース
•WebXR Card
•<model-viewer>
•Babylon.js
•Bot Framework Composer
•Bot Framework Web Chat