TypeScript でつくる Bot Framework の基礎をお話ししました。 Cogbot x くらでべ！ Bot Framework はじめの一歩 詰め込みスペシャル https://cogbot.connpass.com/event/181896/

1. TypeScript x
Bot Framework
Cogbot x くらでべ！ Bot Framework はじめの一歩 詰め込みスペ
シャル
https://cogbot.connpass.com/event/181896/

2. Introduction
自己紹介とコミュニティトピック

3. Self introduction
• 大平かづみ / Kazumi OHIRA
• フリーランスエンジニア、リモートワーク
• Microsoft Azure を用いた開発、Infrastructure as Code 好き。
• サーバーサイド開発、OSSメンテ、ほか。IoTも好き。
• さまざまなコミュニティの運営参加。
• Twitter: @dz_
• GitHub: @dzeyelid

4. Code Polaris
• 女性が安心して学べる技術コミュニティ
• アプリケーション開発を主軸とした支援
• 現役エンジニアを交え、みなで解決するQA
• OSS開発を通じ、実践を学ぶ
• 基本無料
https://code-polaris.connpass.com/

5. Bot Framework とは

6. Bot Framework とは
• ボット開発のためのフレームワーク
• C#、JavaScript / TypeScript、Python、Java (Preview)
• 開発、テストがしやすい
• Bot Framework Emulator を使用してボットをテストし、デバッグする -
Bot Service - Bot Service | Microsoft Docs
• ボットの単体テスト - Bot Service - Bot Service | Microsoft Docs
• Azure Bot Service にデプロイすることで真価を発揮する
• 各種チャンネルとの連動、PaaS として運用できる
• Cognitive Services との相性抜群！
• 共通のコードでさまざまなチャットプラットフォームに対応できる

7. 機能面でもっと知りたい方は、
Cogbot Meetup Online - 今から始めるシリーズをご期待ください♪
ご期待に沿えるよう、アンケートにご協力ください🙏 →

8. TypeScript / JavaScript で
Bot Framework はじめるには
デモ中心でお届けします👩‍💻

9. 仕組み
• Bot Builder
• Bot Builder を利用していプロジェクトを作成すると、 restify というREST
のフレームワークと組み合わせて構成される(APIとして構成できれば個のフ
レームワークである必要はない）
• デプロイ用のARMテンプレートやスクリプトも生成される
• JavaScript と TypeScript は大体同じ
• サンプルも豊富
• https://github.com/Microsoft/BotBuilder-Samples/

10. プロジェクトの構成
Azure Bot Service へのデプロイ用のテンプレートとスクリプト
ボットの処理を書くソースコード
Azure Bot Service にデプロイ後のルーティングを定義するファイル
JavaScript/TypeScript の管理ファイル

11. ActivityHandler
• イベントエミッタ/リスナーパター
ン で実装する
• onMessage()
• onMemberAdded() など
• ボットのしくみ - Bot Service - Bot
Service | Microsoft Docs

12. デモ - Echo bot

13. ターン
• ユーザの入力に応える一連の
流れ = ターン
• 通常の会話は、1回のターンで
終わることなく、何回もやり取り
がある場合が多い
= マルチターン
• マルチターンでは、状態保持が
必要

14. 状態の管理
• 状態を保持するストレージの選択
• Memory storage
• Azure Blob Storage
• Azure Cosmos DB partitioned storage
• ＢｏｔState をベースとした状態クラス
• UserState - ユーザ情報を管理、会話のターンに依存せず利用できる
• ConversationState - 会話に関する状態を管理
• PrivateConversationState – 特定の会話とユーザに紐づく
• 状態の管理 - Bot Service - Bot Service | Microsoft Docs
• ユーザーと会話データを保存する - Bot Service - Bot Service | Microsoft Docs

15. デモ - State の管理

16. ダイアログ
• 会話の流れを処理する
• 下図のように様々なパターンのダイアログが用意されている

17. ダイアログ
• 連続して行われる会話フローの実装 - Bot Service - Bot
Service | Microsoft Docs
• この中でも、アダプティブダイアログは、複雑な流れを管理することが
できる
• アダプティブ ダイアログの概要 - Bot Service | Microsoft Docs

18. デモ - Dialoｇ を使ってみる

19. Language Generation
• 文字列のテンプレートを定義できる
• 言語の生成 - Bot Service | Microsoft Docs
# greetingTemplate
- こんばんは！ ${user.name} さん
- ${user.name} さん、Cogbot へようこそ！
- 今日の晩御飯はなんでしたか？ ${user.name} さん
Ex) greeting.lg

20. デモ – Language Generation

21. 複数の LUIS や QnA を組み合わせる
• 複数のモデルに問い合わせ、確度が高いモデルからの値を返す
• botdispatch ツールを用いて、ディスパッチ用LUIS を作成する
• 複数の LUIS と QnA モデルを使用する - Bot Service - Bot
Service | Microsoft Docs
LUIS（天気に関するモデル）
※ 今は、 LUIS (Language Understanding Intelligent Service) と言わず、 Language Understanding
という名称ですが、Bot Framework での名称が LUIS のため、ここではその表記に倣います。
LUIS（家電操作に関するモデル）
QnA（利用方法に関するナレッジベース）
電気をつけて Dispatch用LUIS

22. Bot telemetry
• デフォルトで、チャンネルごとのメッセージ数などは確認できる
• 詳細を知りたい場合は、Application Insights と組み合わせる
• JavaScript/TypeScript の場合はミドルウェアとして追加
• ダイアログに対しても設定できる
• LUIS や QnA Maker などのサービスの使用状況データの取り込み
• ボットへのテレメトリの追加 - Bot Service - Bot Service |
Microsoft Docs
• ボットのテレメトリ データを分析する - Bot Service - Bot Service
| Microsoft Docs

23. Bot telemetry
Azure Bot Service の Analytics Application Insights

24. Have fun, tech geeks! 🐱‍🏍
Thanks for watching!

25. アンケートへのご回答、よろしくお願いします！
Connpass のイベントページにも URL を掲載しています。