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