Global Microsoft 365 Developer Bootcamp 2019 Tokyo: Adaptive Cards ハンズオン / Hands-on training for Global Microsoft 365 Developer Bootcamp 2019 Tokyo: Adaptive Cards

Global Microsoft 365 Developer Bootcamp 2019 Tokyo (https://connpass.com/event/144707) のハンズオンのスライドです。

Transcript

1. Adaptive Cards ハンズオン
2. 自己紹介 Name 篠原敬志 (Takashi Shinohara) Company アバナード株式会社 シニアコンサルタント Award Microsoft MVP for Office Development (2018-) Twitter @karamem0 Blog からめもぶろぐ。 (http://blog.karamem0.jp) Bio 俺たちは雰囲気で OAuth をやっている 2
3. 本日のアジェンダ Adaptive Cards 概要 Adaptive Cards Designer を触ってみる Power Automate から Teams に投稿する Graph から Outlook に送信する アンケート収集システムを作ってみる 3
4. Adaptive Cards 概要 4
5. Introduction https://docs.microsoft.com/en-us/adaptive-cards/ 5
6. Adaptive Cards とは カード形式のコンテンツを共通の一貫した方法で交換するた めの新しい方法 高性能で美しいエクスペリエンス オープン フレームワーク マルチ プラットフォーム ネイティブ パフォーマンス 6
7. エクスペリエンス カードのペイロードは JSON 形式で記述 グリッド状にコントロールを配置 インタラクティブな表現 7
8. オープン フレームワーク レンダリングのライブラリはすべてオープン ソース https://github.com/microsoft/AdaptiveCards 8
9. マルチ プラットフォーム UWP / WPF / .NET iOS Android HTML 9
10. 利用できるサービス Bot Framework Cortana Skills Outlook Actionable Message Windows Timeline Microsoft Teams 10
11. 基本的なスキーマ { "type": "AdaptiveCard", "version": "1.0", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "body": [ { "type": "TextBlock", "text": "Hello Adaptive Cards!" } ], "actions": [ { "type": "Action.OpenUrl", "title": "show more detail", "url": "https://adaptivecards.io", } ] } 11
12. コントロールの種類 分類 名前 コンテナー Container ImageSet FactSet ColumnSet 要素 TextBlock RichTextBlock Image Media ActionSet 分類 名前 入力 Input.Text Input.Date Input.Time Input.Number Input.ChoiceSet Input.Toggle 12
13. アクションの種類 名前 説明 Action.OpenUrl 指定した URL を Web ブラウザーで開く Action.Submit 入力したデータをクライアントに送信する (Bot Framework) Action.ShowCard 追加のカードを表示する Action.ToggleVisibility カードの要素の表示または非表示を切り替える Action.Http 指定した URL に HTTP 要求を送信する (Outlook Actionable Messages) 13
14. ハンズオン: Adaptive Cards Designer を触ってみる 14
15. Adaptive Cards Designer GUI で操作しながら JSON 形式のペイロードを作成するため の Web ツール https://adaptivecards.io/designer/ 15
16. Hello World カードを作ってみる (1) https://adaptivecards.io にアクセスし [Designer] をクリックする 16
17. Hello World カードを作ってみる (2) [New card] をクリックす る 17
18. Hello World カードを作ってみる (3) [Elements] - [TextBlock] をデザイナーにドラッグ & ドロップする 18
19. Hello World カードを作ってみる (4) [Text] に "Hello adaptive cards!" と入力する 19
20. Hello World カードを作ってみる (5) [Card Structure] の [Ada ptiveCard] をクリックし [⚡] - [Action.OpenUrl] をクリックする 20
21. Hello World カードを作ってみる (6) [Title] に "show more de tail" と入力する [Url] に "https://adaptiv ecards.io" と入力する 21
22. Hello World カードを作ってみる (7) [Preview mode] をクリッ クしてプレビュー表示する [Select host app] で任意 のアプリの見た目に切り替 える 22
23. ハンズオン: Power Automate から Teams に投稿する 23
24. Teams へのログイン https://teams.microsoft. com にログインする [代わりに Web アプリを使 用] をクリックして Teams を起動する 24
25. チームの作成 (1) [チームを作成] をクリック する 25
26. チームの作成 (2) [初めからチームを作成す る] をクリックする 26
27. チームの作成 (3) [プライベート] をクリック する 27
28. チームの作成 (4) [チーム名] を入力して [作 成] をクリックする 28
29. チームの作成 (5) [スキップ] をクリックする 29
30. チームの作成 (6) チームが作成されたことを 確認する 30
31. Office 365 ポータルへのログイン https://www.office.com にログインする 31
32. フローの作成 (1) [Power Automate] をク リックする 32
33. フローの作成 (2) [作成] をクリックする 33
34. フローの作成 (3) [インスタント フロー]をク リックする 34
35. フローの作成 (4) [フロー名] を入力し [手動 でフローをトリガーします] をチェックして [作成] を クリックする 35
36. フローの作成 (5) [新しいステップ] をクリッ クする 36
37. フローの作成 (6) [独自のアダプティブ カー ドをフロー ボットとして チャンネルに投稿する (プ レビュー)] をクリックする 37
38. フローの作成 (7) [チーム] および [Channe l] で作成したチームを選択 する [Message] にカードの JS ON を貼り付ける 38
39. フローの作成 (8) [テスト] をクリックし [ト リガー アクションを実行す る] を選択して [保存 & テ スト] をクリックする 39
40. フローの作成 (9) [続行] をクリックする 40
41. フローの作成 (10) [フローの実行] をクリック する 41
42. フローの作成 (11) 正常に実行されたことを確 認して [完了] をクリック する。 42
43. 実行結果の確認 Teams に Adaptive Card s が投稿されていることを 確認する 43
44. ハンズオン: Graph から Outlook に送 信する 44
45. Azure Portal へのログイン https://portal.azure.com にログインする 45
46. アプリの登録 (1) [すべてのサービス] をク リックする 46
47. アプリの登録 (2) [Azure Active Directory] をクリックする 47
48. アプリの登録 (3) [アプリの登録] をクリック する 48
49. アプリの登録 (4) [新規登録] をクリックする 49
50. アプリの登録 (5) アプリケーションの名前を 入力して [登録] をクリッ クする 50
51. アプリの登録 (6) [概要] をクリックし [アプ リケーション (クライアン ト) ID] および [ディレク トリ (テナント) ID] の値 をメモ帳などに保存する 51
52. アプリの登録 (7) [認証] - [リダイレクト UR I] に "https://localhost:5 001/Account/Callback" と入力して [保存] をクリッ ク 52
53. アプリの登録 (8) [証明書とシークレット] - [新しいクライアント シー クレット] - [追加] をク リックする 作成されたシークレットを メモ帳などに保存する 53
54. アプリの登録 (9) [API のアクセス許可] - [アクセス許可の追加] をク リックする 54
55. アプリの登録 (10) [Microsoft Graph] をク リックする 55
56. アプリの登録 (11) [委任されたアクセス許可] - [Mail.Send] をチェック して [アクセス許可の追加] をクリックする 56
57. アプリの実行 (1) Visual Studio Code を起 動し [ファイル] - [フォル ダーを開く] をクリックす る リポジトリの [AdaptiveC ardsSend] フォルダーを 指定して [フォルダーの選 択] をクリックする 57
58. アプリの実行 (2) 通知領域の [Restore] をク リックする 58
59. アプリの実行 (3) [Controller] - [AccountC ontroller.cs] を開いて必要 な情報を入力する • テナント ID • アプリケーション ID • アプリケーション シーク レット 59
60. アプリの実行 (4) [デバッグ] - [デバッグの 開始] をクリックする 60
61. アプリの実行 (5) [このサイトは安全ではあり ません] と表示される場合、 [Web ページへ移動] をク リックする 61
62. アプリの実行 (6) [Sign in with Microsoft] をクリックする 62
63. アプリの実行 (7) 組織アカウントでログイン する 63
64. アプリの実行 (8) [Adaptive Cards Payloa d] にカードの JSON を貼 り付け、[Send] をクリッ クする 64
65. アプリの実行 (9) 正常に実行されたことを確 認する 65
66. アプリの実行 (10) Outlook (https://outlook. office365.com) にアクセ スし、カードが送信された ことを確認する 66
67. ハンズオン: アンケート収集システムを 作ってみる 67
68. 全体図 Microsoft Power Automate Outlook Actionable Messages Azure Functions Microsoft Excel 68
69. 手順 Excel ファイルを作成する Function を作成する アプリを登録する Function をデプロイする カードを作成する フローを作成する アクションを実行する 69
70. Excel ファイルの作成 (1) Excel を起動し [空白の ブック] をクリックする 70
71. Excel ファイルの作成 (2) [挿入] - [テーブル] をク リックしてテーブルを作成 する 71
72. Excel ファイルの作成 (3) 列見出しを以下のように設 定する 1 列目: 名前 2 列目: 評価 3 列目: コメント 72
73. Excel ファイルの作成 (4) [アンケート集計結果.xlsx] と名前を付けて OneDrive for Bussiness のルート フォルダーに保存する 73
74. Azure Portal へのログイン https://portal.azure.com にログインする 74
75. Function の作成 (1) [リソースの作成] をクリッ クする 75
76. Function の作成 (2) [Function App] と入力し て検索する 76
77. Function の作成 (3) [作成] をクリックする 77
78. Function の作成 (4) 必要な情報を入力して [作 成] をクリックする 78
79. Function の作成 (5) デプロイが成功することを 確認する 79
80. アプリの登録 (1) [すべてのサービス] をク リックする 80
81. アプリの登録 (2) [Azure Active Directory] をクリックする 81
82. アプリの登録 (3) [アプリの登録] をクリック する 82
83. アプリの登録 (4) [新規登録] をクリックする 83
84. アプリの登録 (5) アプリケーションの名前を 入力して [登録] をクリッ クする 84
85. アプリの登録 (6) [概要] をクリックし [アプ リケーション (クライアン ト) ID] および [ディレク トリ (テナント) ID] の値 をメモ帳などに保存する 85
86. アプリの登録 (7) [証明書とシークレット] - [新しいクライアント シー クレット] - [追加] をク リックする 作成されたシークレットを メモ帳などに保存する 86
87. アプリの登録 (8) [API のアクセス許可] - [アクセス許可の追加] をク リックする 87
88. アプリの登録 (9) [Microsoft Graph] をク リックする 88
89. アプリの登録 (10) [アプリケーションの許可] - [Files.ReadWrite.All] を チェックして [アクセス許 可の追加] をクリックする 89
90. アプリの登録 (11) [管理者の同意を与えます] をクリックする 90
91. Function のデプロイ (1) Visual Studio Code を起 動し [ファイル] - [フォル ダーを開く] をクリックす る リポジトリの [AdaptiveC ardsAction] フォルダーを 指定して [フォルダーの選 択] をクリックする 91
92. Function のデプロイ (2) [AdaptiveCardsAction.c s] を開いて必要な情報を入 力する • テナント ID • アプリケーション ID • アプリケーション シーク レット • ユーザー プリンシパル名 92
93. Function のデプロイ (3) [Azure] - [Deploy to Fun ction App...] - [Sign in t o Azure...] をクリックす る 93
94. Function のデプロイ (4) 組織アカウントでログイン する 94
95. Function のデプロイ (5) 作成した Function の名前 をクリックする 95
96. Function のデプロイ (6) [Deploy] をクリックする 96
97. Function のデプロイ (7) デプロイが成功することを 確認する 97
98. Function のデプロイ (8) 作成した Function の [Fu nctions] - [AdaptiveCard sAction (HTTP)] を右ク リックして [Copy Functio n Url] をクリックする コピーした URL をメモ帳 などに保存する 98
99. カードの作成 (1) https://adaptivecards.io にアクセスし [Designer] をクリックする 99
100. カードの作成 (2) [Select host app] を [Ou tlook Actionable Messag es] に切り替える 100
101. カードの作成 (3) [Card Payload Editor] に リポジトリの JSON を貼り 付ける 101
102. カードの作成 (4) [回答する] を選択し [UR L] に Function の URL を 貼り付ける 102
103. Office 365 ポータルへのログイン https://www.office.com にログインする 103
104. フローの作成 (1) [Power Automate] をク リックする 104
105. フローの作成 (2) [作成] をクリックする 105
106. フローの作成 (3) [インスタント フロー]をク リックする 106
107. フローの作成 (4) [フロー名] を入力し [手動 でフローをトリガーします] をチェックして [作成] を クリックする 107
108. フローの作成 (5) [新しいステップ] をクリッ クする 108
109. フローの作成 (6) [メールの送信 (V2) (プレ ビュー)] をクリックする 109
110. フローの作成 (7) [宛先] および [件名] を入 力する [本文] に作成したカードの JSON を貼り付ける (JSON を<script type=" application/adaptivecard +json">...</script> タ グで囲むこと) 110
111. フローの作成 (8) [テスト] をクリックし [ト リガー アクションを実行す る] を選択して [保存 & テ スト] をクリックする 111
112. フローの作成 (9) [続行] をクリックする 112
113. フローの作成 (10) [フローの実行] をクリック する 113
114. フローの作成 (11) 正常に実行されたことを確 認して [完了] をクリック する。 114
115. アクションの実行 (1) https://outlook.office36 5.com にログインし、Pow er Automate から送信さ れたメールを確認する 115
116. アクションの実行 (2) カードに入力して [回答す る] をクリックする 116
117. アクションの実行 (3) 正常に実行されたメッセー ジが表示されることを確認 する ※エラーが発生することが ありますが、何度か試すと 正常メッセージが表示され ます 117
118. アクションの実行 (4) Excel ファイルに入力した 内容が表示されることを確 認する 118
119. まとめ 119
120. 本日のアジェンダ Adaptive Cards 概要 Adaptive Cards Designer を触ってみる Power Automate から Teams に投稿する Graph から Outlook に送信する アンケート収集システムを作ってみる 120
121. お疲れさまでした！ 121