オープンソースカンファレンス 2018 北海道の資料です。 ブラウザのみで行うハンズオンです。コーディングはコピーペーストに頼っています。

1. 2018.07.07 JAZUG札幌支部（きたあず） 第19回勉強会
Azure のポータル画面で、
AI フレーバな BOT の作成
ハンズオン
松田 恭明 with きたあずスタッフ
Japan Azure User Group 札幌支部

2. 自己紹介
 松田 恭明(Yasuaki Matsuda)
• Microsoft MVP for Microsoft Azure(2016～)
• きたあずの スタッフ
• (@DarkCrash3 )
2
 きたあずスタッフ
• 困ったときは、遠慮なく声をかけてください。

3. 3
JAZUG 札幌支部
■正式名称
Japan Azure User Group 札幌支部 / 略称：きたあず
■活動概要
Cloudにちょっと興味のあるゆるふわな方から実ビジネスで
使用される方まで学べる勉強会を開催しています。
■Webサイト
https://kitaazu.azurewebsites.net/
きたあずちゃん
(@kitaazu_chan)

4. 4
JAZUGの紹介
JAZUG
女子部
学生部
札幌支部 (きたあず)
青森支部
仙台支部
福島支部
静岡支部
信州支部
名古屋支部(なごあず）
関西Azure研究会
福岡支部 (ふくあず) / ふくあず女子部
熊本支部
沖縄支部
http://r.jazug.jp/

5. 5
今回のハンズオンの概要

6. Azure Bot Service
6

7. Bot Framework
7

8. Git でソースが公開されてます
8
https://github.com/Microsoft/BotBuilder

9. ちなみに。。。
9+Hundreds of community
supported images on
VM Depot
SQL Server
Web App Gallery
Dozens of .NET & PHP
CMS and Web apps
Microsoft Azure
Azure 内の3分の1の
仮想マシンが
Linuxで稼働

10. マネージドサービスにも
10
Azure App Service on Linux
Web Apps for Containers
Azure Database for MySQL
Azure Database for PostgreSQL
※ MariaDB もそのうちに？？
Azure Kubernetes Service

11. 11
Knowledge

12. Custom Vision Service
12

13. 今回のハンズオンの成果物
13
West US 2
Bot Services
Functions Bot App Service Custom Vision
Service

14. 必要なもの
Microsoft Azure のサブスクリプション
PC
ネットワーク環境
以上
14

15. 15
ハンズオン Start!!

16. 16
1.Bot の作成

17. Microsoft Azure のポータルにログイン
https://portal.azure.com をブラウザで開く
サブスクリプションを持っている、MSアカウント または、
組織アカウントでサインインする。
17

18. Functions Bot の作成 - 1
18
１:リソースの作成
２:bot で検索
3:Functions Bot を選択

19. Functions Bot の作成 - 2
19
1:作成
2:任意のBOT名を入力します。
(4～26文字のユニークな文字列)
3:複数のサブスクリプションを持って
る方のみ選択
4:これから作成するリソースをグルー
プ化するために、新規作成します
5:Japan Eastを選びます
6:F0(無料のプラン) を選びます
7:任意のアプリ名を入力します
8:Basic (C#)を選択します
9:従量課金プランを選択します
10:バックエンドで利用するストレージを
設定します(今回はデフォのまま)

20. Functions Bot の作成 - 3
20
2:East US
3:ダッシュボードにピン留めする
4:作成
(1分程度でデプロイが完了します。)
1:オン

21. Functions Bot の作成 - 4
21
1:ダッシュボードからクリック
2:Web チャットでテスト
3:ボットが動作することを確認
ダッシュボードにない人は、検索して見つけましょう。

22. Functions Bot の作成 - 5
22
1:ビルド
2:このボットを Azure Functions で開く

23. Functions Bot の作成 - 6
23
1:messages

24. Functions Bot の作成 – 7(使い方)
24
1:ファイルの表示で、
編集するファイルを選びます
2:エラーと警告で、コンパイルエラー
を確認できます

25. Functions Bot の作成 – 8
25
1:追加

26. Functions Bot の作成 – 9
26
1:CustomVision.csx を追加

27. Functions Bot の作成 – 10
27
2:保存
1:コードを貼り付けます
https://1drv.ms/f/s!AmqCTqI6d
2mrg8kwKwKaIY88WdEyVg
CustomVision.csv.txt

28. Functions Bot の作成 – 11
28
1:EchoDialog.csx
3:保存
2:コードを挿入します
https://1drv.ms/f/s!AmqCTqI6d
2mrg8kwKwKaIY88WdEyVg
EchoDialog.csx.part.txt

29. Functions Bot の作成 – 12
29
1:run.csx
3:保存
2:#r # load を追加します
https://1drv.ms/f/s!AmqCTqI6d
2mrg8kwKwKaIY88WdEyVg
run.csx.part.txt

30. Functions Bot の作成 – 13
30
1:Web チャットでテスト
2:ラムネの画像を送信
(再送できない場合は、再度試してください)

31. Functions Bot の作成 – 14
31
1:チャンネル
2:編集

32. Functions Bot の作成 – 15
32
1:表示でシークレットキーを表示する
2:シークレットを埋め込んだ状態のも
のを控えておきます

33. 33
2.Bot 公開サイト作成

34. Web サイトの作成 - 1
34
１:リソースの作成
２:Web で検索
3:Web App を選択

35. Web サイトの作成 - 2
35１:作成
2:アプリ名を入力
（URLになります）
3:サブスクリプションを選択
4:作成済みのものを選択
5:Windows を選択
6: Free プランを作成
次のページへ

36. Web サイトの作成 - 3
36
1:新規作成
2:名前を入力
3:Japan East
4:F1 を選択

37. Web サイトの作成 - 4
37
1: Free プランを選択
2:ダッシュボードにピン留め
3:作成
(1分程度でデプロイできます)

38. Web サイトの作成 - 5
38
1: App Service Editor
2: 移動
3: 右クリックで、
New Fileを選択
Index.htmlを作成

39. Web サイトの作成 - 6
39
1: Functions Bot の作成 – 15
で控えた内容を貼り付けます

40. Web サイトの作成 – 7
40
2: URLをクリックします
1: ポータルに戻り概要を選択

41. Web サイトの作成 – 8
41
1: チャットが表示されます
2: App Service Editor からサイズ調整します

42. 42
3.Custom Vision

43. Custom Vision - 1
43
1:https://customvision.ai/ を開きます
Azure サブスクリプションを持つアカウント
で開きます
2:チェック
3:同意

44. Custom Vision - 2
44
1:New Project
2:Project名を入力
3:Create Project

45. Custom Vision - 3
45
1:トレーニング
2:学習に使う画像を追加します
一つのタグに最低5枚必要です

46. Custom Vision - 4
46
1:ローカルのファイル追加

47. Custom Vision - 5
47
1:タグをつけます
2:タグ名を入力

48. Custom Vision - 5
48
1:＋で追加
2:Save and close

49. Custom Vision - 6
49
1:トレーニング開始
Tip
ここは、学習イメージの抽出条件です。
タグをつけたので、タグ付けされていない画像がないため、
何も表示されてません。
Tagged を選ぶと表示されます

50. Custom Vision - 7
50

51. Custom Vision - 8
51
1:Make default
2:クリック

52. Custom Vision - 9
52
1:URLに含まれるプロジェクトキーを控えます
2:Prediction-key を控えます

53. Custom Vision - 11
53
1:Functions Bot の作成時に開いたエディタを開きます。
2:CustomVision.csxを選択
3:predictionKey projectId を置き換えます

54. Custom Vision - 12
54
1:独自のCustom Vision API が動いていることを確認します

55. 55
完成です！
おつかれさまでした！

56. 56
xx.削除

57. 削除 - 1
57
1:すべてのサービス
2:リソースグループ

58. 削除 - 2
58
1:作成したリソース グループをクリック
2:リソース グループの削除

59. 削除 - 3
59
1:作成したリソース グループ名を入力
2:削除

60. 削除 - 4
60
1:ゴミ箱をクリック

61. 削除 - 5
61
1:Yes, delete

62. 62
xx.展示の話

63. LINE bot 接続
Ken’s Tech Blog
Microsoft Bot Framework と LINE を連携して賢いボット
を開発
https://blogs.msdn.microsoft.com/kenakamu/2017/12/15/develop-
intelligent-line-bot-with-microsoft-bot-framework-ja/
63