2019/11/30(土) の .NETラボ 勉強会 2019年11月 で発表した資料です。

1. Bot Framework Composer で
作成した Azure Bot Servie に
Xamarin アプリからアクセスする
田淵義人＠エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft

2. 田淵義人＠エクセルソフト
• 営業(セールスエンジニア) 兼 新規事業開発室室長
• Xamarin コミュニティエバンジェリスト
• Microsoft MVP (Xamarin)
• コミュニティ
• Japan Xamarin User Group 主宰
• Twitter: @ytabuchi
• facebook: ytabuchi.xlsoft
• Blog: Xamarin 日本語情報
• GitHub: ytabuchi
3

3. Japan Xamarin User Group について
2014年2月発足
Xamarin を中心とした勉強会
次回：JXUGC 平日エディション
2019/12/9(月) 日本マイクロソフト品川本社
https://jxug.connpass.com/
4

4. 目次
• Bot Framework Composer
• 作成
• 編集
• Azure Bot Service にデプロイ
• Web チャット／チャンネルからの接続
• Xamarin アプリからの接続
5

5. Bot Framework Composer
6

6. Bot Framework Composer
• https://github.com/microsoft/BotFramework-Composer
7

7. Bot Framework Composer の特徴
• 会話フローのビジュアルダイアログエディター
• 言語理解（Language Understanding）をトレーニング
および管理するツール
• LU および QnA コンポーネントをトレーニング、テスト、
および管理するためのツール
• 言語生成（Language Generation）およびテンプレート
システム
• すぐに使用できるボットランタイム実行可能ファイル
8

8. ビジュアルエディター
9

9. Language Understanding
• 正規表現または LUIS を
利用可能
• Intent、Entity、
Prebuilt の Entity を
Markdown 形式で記述
• ファイルフォーマット
10

10. Language Generation
• 返信を管理、作成
11

11. Bot Framework との違い
• Bot Framework • Bot Framework
Composer
12

12. ドキュメント
• Bot Framework Composer で チャットボットをノン
コーディング開発 (1) ひとまず EchoBot 編 - Qiita
• Bot Framework Composer で チャットボットをノン
コーディング開発 (2) Dialog (+ユーザー入力、外部 API
利用、条件分岐) - Qiita
• 公式のドキュメント（目次）
13

13. 実際に触ってみよう
• 郵便番号を入力すると 今の天気を返答するチャットボット
• 準備
• Bot Framework Composer
• 天気情報 API (Open Weather Map)
• 手順
1. 新規チャットボットアプリの作成と初期動作確認
2. Dialog の新規作成と Trigger による起動設定
3. ユーザー入力＆外部 API を使った情報取得とフローの設定
4. 動作の確認
14

14. Bot Framework Emulator
15

15. Azure Bot Service
16

16. Azure Bot Service
17
• Bot アプリのテンプレー
トを提供
• Bot アプリをデプロイす
るサービス
• Web チャットのテスト
• 接続可能なチャンネルを
提供

17. • Web Chat, Direct Line, Direct Line Speech, Email
• アダプター
• Cortana, Microsoft Teams, Facebook, GroupMe, Kik, LINE,
Skype, Slack, Telegram, Twillo
チャンネル
18

18. Azure Bot Service にデプロイ
• Azure Portal で Web アプリボットを作成
• BotFramework-Composer/MyBots/＜プロジェクト＞
のプロジェクトを Web アプリにデプロイ
• Visual Studio Win/Mac の発行
• App Service のデプロイセンター
• 手動
19

19. 20

20. 21

21. 22

22. Web チャット／チャンネル
からの接続
23

23. チャンネル
• Web チャット、Microsoft Teams など
24

24. Web チャット
• Web チャットでテスト
から接続可能。
• Bot Framework
Emulator から接続可能。
• 「App Service 設定＞構
成」の以下が必要
• MicrosoftAppId
• MicrosoftAppPassword
25

25. Microsoft Teams
26

26. Direct Line
27

27. Xamarin アプリからの接続
https://github.com/ytabuchi/xf-directline-api-sample
28

28. Direct Line API
• ドキュメント
• 認証、会話の開始、メッセージの送受信など
• 会話の流れが分かる
• Conversation ID、Token、有効期限など
• Direct Line のエンドポイントに接続する SDK
• Microsoft.Bot.Connector.DirectLine v3.0.2
• 最終更新：2017/05/10
29

29. メッセージの送信
// client 作成
var client = new DirectLineClient("TOKEN");
// 会話の開始
var conv = await client.Conversations.StartConversationAsync();
// Conversation ID
var convId = conv.ConversationId;
// Activity 送付
await client.Conversations.PostActivityAsync(
convId,
new Activity
{
From = new ChannelAccount("ACCOUNTNAME"),
Text = "Hello bot!",
Type = ActivityTypes.Message,
});
30

30. メッセージ受信
// メッセージ受信
var res = await client.Conversations.GetActivitiesAsync(
convId,
"WATERMARK");
// 全メッセージ展開
foreach (var message in res.Activities)
{
Console.WriteLine($"{message.From.Name} said: {message.Text}");
}
31

31. 32

32. 奥の手
webView.Source = new HtmlWebViewSource
{
Html = @"<iframe
src='https://webchat.botframework.com/embed/ytabu
chichatbot?s=SECRET' style='min-width: 400px;
width: 100%; min-height: 500px;'></iframe>"
};
33

33. まとめ
• Bot Framework Composer で簡単に Bot Framework
を始められる。
• 作った Bot は Azure Bot Service でチャンネルを追加し
て色々なちゃんとアプリから繋げる。
• アプリからつなぐ場合は Direct Line API を使う。
• Direct Line の開発は継続してほしい。
34

34. 参考サイト
• Bot FrameworkのDirect Line APIをXamarin.Formsか
ら使う場合のサンプルプログラム - かずきの
Blog@hatena
• Xamarin.FormsでBotFrameworkのDirectLineを試す -
かずきのBlog@hatena
• Microsoft Bot FrameworkのDirect Line APIの簡単まと
め - Qiita
• @okazuki さんしかサンプル書いてる人いなかった…ｗ
ありがとうございます！
35

35. ありがとうございました
田淵義人＠エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
36