Slide 1
Slide 1 text
Adaptive Cards
について
気ままに勉強会 #21,22,24,67
Slide 2
Slide 2 text
Miyake Mito @MiTo60448639
https://qiita.com/MiyakeMito
株式会社アイシーソフト
Technical Manager
www.icsoft.jp
https://speakerdeck.com/
miyakemito
Slide 3
Slide 3 text
Power Automate と
Power Virtual Agents で
ゲームを作ってます
⚫ オセロ
⚫ 神経衰弱
⚫ どうぶつしょうぎ
⚫ WORDL
Slide 4
Slide 4 text
本日のゴール
Power Automate における
Adaptive Cards の Tips
について知ろう
Slide 5
Slide 5 text
本日の参考サイト
■ MoreBeerMorePower (Microsoft MVP Hiroさん)
https://mofumofupower.hatenablog.com/
■ Adaptive Cards 愛好会
https://www.facebook.com/groups/988303801612838
■ Adaptive Cards沼への招待（Youtube）
https://www.youtube.com/watch?v=f2FS8TrEb0s
■ Schema Explorer
https://adaptivecards.io/explorer/
Slide 6
Slide 6 text
注意
プレミアムコネクタを利用します。有料ライセンスが必要です。
運用環境での使用は許可されていませんが、開発向けプランや
開発者テナントであれば無償でお試しいただけます。
■ 開発者向けプラン
https://powerapps.microsoft.com/ja-jp/developerplan/
■ Microsoft 365 開発者テナント
https://developer.microsoft.com/ja-jp/microsoft-365/dev-
program
■ Microsoft 365 開発者プログラムを登録してみよう（ようさん）
https://www.youtube.com/watch?v=6nCSihZwYuI
■ Microsoft 365 と Power Platform 開発環境の作り方
（りなたむさん）
https://github.com/rnakamuramartiny/HowToM365-
PPFDevelopEnvironment
Slide 7
Slide 7 text
免責事項
当スライドは、
2022年7月現在のバージョンでの情報です
今後のアップデート等により、
仕様変更する可能性があります
また、私の見解による内容が含まれます
間違いなどありましたらご指摘ください
Slide 8
Slide 8 text
Adaptive Cards
とは
Slide 9
Slide 9 text
Adaptive Cards とは
◼ ユーザーに対して、Adaptive（適応）した Card 形式のメッセージ
◼ JSONで記載され、マルチプラットフォームに最適化されるフォーマット
Adaptive
Card
JSON
Your Apps
Adaptive
Card Designer
Adaptive
Cards
Management
System
templates
Slide 10
Slide 10 text
Adaprive Cards のメリット
➢ ユーザーがメッセージに対しアクションできる
➢ 使い慣れたインターフェースでアクション（応答）可能
➢ リッチな形式でメッセージを送信可能
➢ CSSやHTMLを前提としないデザイン
➢ “Templating”（カードレイアウトとデータの分離）で再現性が高い
Slide 11
Slide 11 text
Power Automateでの
Adaprive Cards
➢ Teams のチャネル、チャットに送信し応答
➢ Outlook へメール送信し応答
➢ Power Virtual Agents にプロアクティブなメッセージを送信
Slide 12
Slide 12 text
DEMOします
1. Adaptive Card Designer でアダプティブカードをデ
ザインする
2. Power Automate でフローを作成し、Teams のチャ
ネルへ Adaptive Card を送信する
Slide 13
Slide 13 text
Adaptive Cards
をデザインする
Slide 14
Slide 14 text
Adaptive Card Designer
https://adaptivecards.io/designer/ ①ツールバー
②カード要素
③デザインエリア
⑦サンプルデータ
エディタ
④カード構造 ⑤要素プロパティ
⑥カードペイロード
エディタ
Slide 15
Slide 15 text
Adaptive Card Designer の
ツールバー
保存機能は存在しないため、
作成したカードのJSONを保存しよう
Teams に送信 : ver.1.4以下
Outlook に送信 : ver.1.0
新規作成
JSON をコピー カードのプレビューモード
送信するプラットフォームを選択 Docs へ Templating の Docs へ
Slide 16
Slide 16 text
Teams Developer Portal
https://dev.teams.microsoft.com/
Developer Portal なら作成した
Adaptive Card を保存可能です
Slide 17
Slide 17 text
Adaptive Card Designer の手順
2. カード要素から配置するパーツを
デザインエリアにdrag and drop
3. パーツのプロパティを設定
⑤要素プロパティ
②カード要素
③デザインエリア
4. Previw mode で表示を確認
5. Copy card payload で JSON をコピー
①ツールバー
①ツールバー
1. host app から送信する
プラットフォームを選択
①ツールバー
Slide 18
Slide 18 text
Adaptive Cards
のパーツ
Slide 19
Slide 19 text
Adaptive Cards
のパーツ
Cards
Slide 20
Slide 20 text
Cards
■ AdaptiveCard
Adaptive Card の本体
Adaptive Card の土台となる必須のパーツ
Slide 21
Slide 21 text
AdaptiveCard
Adaptive Cards の本体でありベース
ここに様々なパーツを配置し、カードをデザ
インする
➢ 背景画像を設定できる
PROPERTIES
Background image • 背景画像をURLで指定
Layout
• Minimum height in pixels
：カードの高さを設定
• Vertical content alignment
：各パーツの配置位置を指定
Selection action • クリック時のアクションを設定可能なボタン
（Action.ToggleVisibility は不可）
Slide 22
Slide 22 text
Adaptive Cards
のパーツ
Elements
Slide 23
Slide 23 text
Elements
■ TextBlock
■ RichTextBlock
■ Image
■ Media
単一のテキストやメディアを表示する要素
Slide 24
Slide 24 text
TextBlock
ラベル、一行、複数行テキストを表示
PROPERTIES
Text
• 表示する文字を入力
• Markdownが有効
https://docs.microsoft.com/ja-jp/adaptive-
cards/authoring-cards/text-features
（ここに記載されている日付とローカリゼーション機能は、Teams で
はサポートされていません）
Layout • サイズ、表示位置、などを設定
－Separator • 区切り線の有無
－Wrap • 自動折り返しの有無
Maximum lines • 最大行を指定
Style • 書式を設定
Teamsでの改行は "/n/n"
Slide 25
Slide 25 text
RichTextBlock
ラベル、一行、複数行テキストを表示
PROPERTIES
Layout • サイズ、表示位置などを設定
➢ TextRun でプロパティを設定し、文字を修飾する
（カードペイロードエディタで編集する）
https://adaptivecards.io/explorer/TextRun.html
TextBlock ではできないこと
• Highlight（背景色反転）
• strikethrough（取り消し線）
• underline
Slide 26
Slide 26 text
Image
画像表示
➢ クリック時のアクションを指定可能
PROPERTIES
Url • 画像のURL（匿名アクセス可能なURLであること）
• Data URIでも指定可能
Style • “Person”を指定すると丸く切り抜き
（アイコン表示時などに利用）
Background color • 背景色
Layout • サイズ、表示位置などを設定
Selection action • クリック時のアクションを設定可能なボタン
Slide 27
Slide 27 text
■ 画像URLの制限
– 匿名アクセス可能なURLであること
– URLはhttpsで始まり、ファイル自体への直接リンクである必要が
あります（jpg,png,jfifなどで終わるURL）
■ SharePoint Online や OneDrive に保存した画像を表示するには…
1. dataUri(file content) でbase64でエンコード
2. AZURE ストレージ に保存
➢ 共有アクセストークンの生成 または
➢ 「匿名読み取りアクセス」
Image の URL
ただし、Teamsのメッセージペイロードのサイズ上限は
25Kbなので注意
Slide 28
Slide 28 text
Media
オーディオやビデオコンテンツ用のメディア
プレイヤー
PROPERTIES
Sources • URL：メディアのURL
• mimeType：” video/mp4” または "audio/mpeg"
Alternate text • オーディオまたはビデオを説明する代替テキスト
Poster URL • 再生する前に表示する画像のURL
Layout • サイズ、表示位置などを設定
Teams のアダプティブ カードでは
現在サポートされていません
代替案としては、
サムネ画像 ＋ action. OpenUrl による動画へのアクセス など
Slide 29
Slide 29 text
Adaptive Cards
のパーツ
Containers
Slide 30
Slide 30 text
Containers
■ Container
■ ColumnSet
■ Column
■ ImageSet
■ FactSet
■ Table
複数のパーツやデータをまとめて表示する要素
Ver.1.5から利用可能
Slide 31
Slide 31 text
Container ①
複数パーツを一纏めにする
複数の要素を、ひとつのオブジェクトとして
まとめることが可能
➢ 背景画像や背景色を設定できる
➢ クリック時のアクションを指定可能
PROPERTIES
Background image • 背景画像
Style • 背景色
Layout • サイズ、表示位置などを設定
Selection action • クリック時のアクションを設定可能なボタン
Slide 32
Slide 32 text
Container ②
Container は、中 (下位構造) にパーツを含むと、“items”: [] の配列形式のJSONデータとなる
⇒ 配列形式のデータを表示できる
配列
Container
リスト形式のデータを Adaptive Cards で表示する方法 https://mofumofupower.hatenablog.com/entry/2020/07/27/153632
親 Container：テーブル単位で
レコードを纏める
子 Container：
レコード単位でカラムを纏める
"[ ]"(ブラケット)は不要
Slide 33
Slide 33 text
ColumnSet
段組みデザイン
➢ Columnを追加し、”段組み“表示
➢ クリック時のアクションを指定可能
PROPERTIES
Layout • サイズ、表示位置などを設定
Selection action • クリック時のアクションを設定可能なボタン
Style • 背景色
Slide 34
Slide 34 text
PROPERTIES
Background image • 背景画像
Style • 背景色
Layout • サイズ、表示位置などを設定
Width
• Automatic
• Stretch
• Weight（おすすめ）
• Pixels
Weight • Width：Weightの場合、幅を割合で指定
Selection action • クリック時のアクションを設定可能
Column
段組みデザイン
➢ ColumnSet上で追加し”段組み”表示
➢ ColumnはContainerと同様に
“columns”: [] の配列形式のJSONデータ
➢ クリック時のアクションを指定可能
Slide 35
Slide 35 text
Container と ColumnSet
Container：
レコード単位
で情報を纏め
て、上から順
並べることが
できる
ColumnSet：レコード単位で情報を纏めて、
左から右に並べることができる
Slide 36
Slide 36 text
ImageSet
画像を並べて配置
PROPERTIES
Layout • サイズ、表示位置などを設定
➢ ColumnSet と同様、画像を横に並べて配置可能
ImageSetは自動的にwrapする
➢ Elements の Image は配置できない
（Containerを利用する）
➢ Image でプロパティを設定し、画像を並べる
（カードペイロードエディタで編集する）
Slide 37
Slide 37 text
Table
データを表形式で表示する
PROPERTIES
firstRowAsHeader • テーブルの最初の行をヘッダー行として扱う
showGridLines • リッド線を表示するかどうかを指定
gridStyle • グリッドのスタイルを定義（現在はグリッド線の色の
み変更可能）
➢ Type プロパティは 上階層から順に
Table > TableRow (rows) > TableCell (cells) で定義
➢ 列の数と幅は columns プロパティで定義
➢ 行は rows プロパティで定義（ヘッダー行も含む）
Ver.1.5で利用可能だが、
TeamsではVer.1.4でも表示されます
Slide 38
Slide 38 text
FactSet
Name：Value のペアを複数表示
Nameを行頭文字にすると箇条書きを表現で
きる
PROPERTIES
Facts • Name：Value の組み合わせ（Fact）を複数表示可能
Layout • サイズ、表示位置などを設定
Slide 39
Slide 39 text
ここでハンズオン ①
Adaptive Cards を作成してみよう！
➢ Select host app：Microsoft Teams
➢ Container を配置し、Style で背景色
➢ ColumnSet で段組み
➢ Image を含む Column で、
Width を Automatic
➢ TextBlock を含む Column で、
Vertical content alignment を Center
Slide 40
Slide 40 text
Adaptive Cards
のパーツ
Inputs
Slide 41
Slide 41 text
Inputs
■ Input.Text
■ Input.Date
■ Input.Time
■ Input.Number
■ Input.ChoiceSet
■ Input.Toggle
ユーザーの入力が可能な要素
ユーザーが入力した内容は、
後述の Action.Submit や Action.Http で
Power Automate へ返ります
Slide 42
Slide 42 text
Input.Text
ユーザーがテキストを入力可能
PROPERTIES
Label • ラベル
Multi-line • Onの場合複数行テキスト可
Maximum length • 入力可能な文字長を指定
Default value • 初期値を設定
Placeholder • 入力の説明（プレースホルダー） 非推奨
Validation • バリデーション
Style • Password：マスク機能
※ Version1.5 からなので現在は利用できない
Placeholders in Form Fields Are Harmful
https://www.nngroup.com/articles/form-design-placeholders/
Slide 43
Slide 43 text
Input.Date
ユーザーが日付を入力可能
➢ YYYY-MM-DD 形式で返ります
PROPERTIES
Label • ラベル
Validation • バリデーション
Minimum value • 入力可能な期間を設定する場合の開始日
YYYY-MM-DD 形式で指定する
Maximum value • 入力可能な期間を設定する場合の終了日
YYYY-MM-DD 形式で指定する
Default value • 初期値を設定
YYYY-MM-DD 形式で指定する
範囲外の日付は Date Picker で選択不可能となる
Slide 44
Slide 44 text
Input.Time
ユーザーが時刻を入力可能
➢ HH:MM 形式で返ります
PROPERTIES
Label • ラベル
Default value • 初期値を設定
Validation • バリデーション
Minimum value • 入力可能な時間を設定する場合の開始時刻
HH:MM 形式で指定する
Maximum value • 入力可能な時間を設定する場合の終了時刻
HH:MM 形式で指定する
範囲外の時刻を入力すると Validation Error となる
Slide 45
Slide 45 text
Input.Number
ユーザーが数値を入力可能
PROPERTIES
Label • ラベル
Placeholder • 入力の説明（プレースホルダー） 非推奨
Default value • 初期値を設定
Validation • バリデーション
Minimum value • 入力可能な最小値を設定
Maximum value • 入力可能な最大値を設定
float() ，int() 関数を使おう
➢ 文字列型で返るので、フロー側で変換します
Slide 46
Slide 46 text
Input.ChoiceSet ①
ユーザーが選択肢を入力可能
PROPERTIES
Label • ラベル
Placeholder • 入力の説明（プレースホルダー） 非推奨
Default value • 初期値を設定
（Title と Value の、Value を設定する）
Validation • バリデーション
Allow multi
selection • 複数選択可能
Style • Compact：ドロップダウン形式
• Expanded：ラジオボタン形式
Choices • 選択肢を設定
Style：Compact
Style：Expanded
Allow multi selection：On
Slide 47
Slide 47 text
Input.ChoiceSet ②
Choices プロパティ
• 選択肢はTitle と Value で設定します
Title：カードで表示される値
Value：フローに戻る値
• Allow multi selection On 時に複数選択した場合も、
カンマ区切りの文字列で返ります
split( ‘’ , ’, ’ ) で配列に変換しよう
Slide 48
Slide 48 text
Input.Toggle
ユーザーが はい／いいえ を選択可能
PROPERTIES
Label • ラベル
Title • カードで表示される値
Value when on • On の場合、フローに戻る値（Default：true）
Value when off • Off の場合、フローに戻る値（Default：false）
Default value
• 初期値
上記「Value when on」や「Value when off」の値
を設定する
Validation • バリデーション
Slide 49
Slide 49 text
バリデーションについて
■ 各 Input は Validation が可能です
■ Error message を設定可能です
Input Properties
Input.Text isRequired
regex(正規表現）
Maximum length
Input.Date isRequired
min
max
Input.Time isRequired
min
max
Input.Number isRequired
min
max
Input.ChoiceSet isRequired
Input.Toggle isRequired
https://docs.microsoft.com/ja-jp/adaptive-cards/authoring-cards/input-validation
■ Input の種類と可能な Validation
Slide 50
Slide 50 text
Id プロパティについて
■ 各 Input は Id プロパティを備えています
■ Adaptive Card で応答する場合、Id プロパティの入力が必要です
■ Power Automate へ、”[Idプロパティ]”:”入力値” の形式で返ります
■ 各 Id プロパティの値は、カード内でユニークである必要があります
Slide 51
Slide 51 text
Adaptive Cards
のパーツ
ActionSet
Slide 52
Slide 52 text
ActionSet
クリック時の動作を設定
アクション
Action.OpenUrl • 指定されたURLを外部Webブラウザーか、組み込みWebブラウザー内に表示する
Action.Submit • 入力フィールドを収集し、フローにイベントを送信する
• Outlookではサポート外
Action.ShowCard • Adaptive Cardを展開/折り畳みする
Action.ToggleVisibility • 他のパーツの表示を切り替える
Action.Http
• 入力フィールドを収集し、「HTTP要求の受信時」にイベントを送信する
• Teamsではサポート外
• 「Outlook Actionable Messages」選択で配置可能
Action.Execute • Power Automateではサポート外（2022/06 時点）
Slide 53
Slide 53 text
Action.OpenUrl
設定されたURLを展開する
（ブラウザで表示）
PROPERTIES
Title • ボタンの文字
Url • 展開するURL
Icon URL • ボタンのアイコン
Slide 54
Slide 54 text
Action.Submit
Teamsでユーザーの入力を送信する
PROPERTIES
Title • ボタンの文字
Icon URL • ボタンのアイコン
Data • 設定した値を送信可能
ユーザーの入力情報と、
Action.Submit のData プロパティ値
がフローに返る
{ "Key" : "Value" } 形式で指定
"key"の値が、Input. パーツの Id プロパティ値
と重複しないように注意
Slide 55
Slide 55 text
Action.ShowCard
アダプティブカードを展開/折り畳みする
"actions": [
{
"type": "Action.ShowCard",
"title": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "What do you think?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Neat!"
}
]
}
}
]
デザイナーでは
この部分をダブルクリック
すると展開します
PROPERTIES
Title • ボタンの文字
Icon URL • ボタンのアイコン
Slide 56
Slide 56 text
Action. ToggleVisibility
他の要素を表示/非表示する
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Toggle!",
"targetElements": [
"imageToToggle"
]
},
{
"type": "Action.ToggleVisibility",
"title": "Show!",
"targetElements": [
{
"elementId": "imageToToggle",
"isVisible": true
}
]
},
{
"type": "Action.ToggleVisibility",
"title": "Hide!",
"targetElements": [
{
"elementId": "imageToToggle",
"isVisible": false
}
]
}
]
Id：imageToToggle
トグル表示
表示
非表示
PROPERTIES
Title • ボタンの文字
Icon URL • ボタンのアイコン
Slide 57
Slide 57 text
Action.Http
Outlookでユーザーの入力を送信する（HTTPリクエスト）
PROPERTIES
Title • ボタンの文字
Icon URL • ボタンのアイコン
Method • HTTPリクエストメソッド
GET or POST）
Url • HTTP リクエスト URL
Body • HTTP リクエスト Body
HTTP headers • HTTP リクエスト ヘッダ
Meshod が “POST” の場合、表示
Slide 58
Slide 58 text
Schema Explorer
Adaptive Cards 各 Elements のスキーマは、
Schema Explorerで確認できます
https://adaptivecards.io/explorer/AdaptiveCard.html
Slide 59
Slide 59 text
ここでハンズオン
Adaptive Cards を
作成してみよう！
➢ 背景色は Container の Style
➢ 段組みは ColumnSet
幅の割合は Width や Weight
➢ Input.ChoiceSet で選択肢
➢ ActionSet の Action.Submit で
送信ボタン
➢ 各 Input に Id を設定する
Slide 60
Slide 60 text
Version 1.5
の
新機能について
Slide 61
Slide 61 text
Target version 1.5 新機能
1. RTL のサポート
Adaptive Card,Container,Column で設定可能
2. Input.Textマスキング
Input.Text で password の style が追加
3. Actionのオーバーフロー
アクションボタンを「…」で表示可能（Mode:Secondary）
4. アクションのTooltip
アクションにカーソルを合わせたときに表示されるテキストを指定可能
5. Table
6. ChoiceSet の静的フィルタースタイル
ChoiceSet に 選択肢をフィルター可能なスタイルが追加
7. Action.isEnabled
アクションを非活性で表示可能
🎉 アダプティブ カード 1.5 の発表 |アダプティブ カード (adaptivecards.io)
がついている新機能は
Payload を 1.4 に変更しても、
Teams上で動作します
Slide 62
Slide 62 text
Teamsへ
Adaptive Cardsを
送信する
Slide 63
Slide 63 text
Teamsでの
Adaptive
Cards
Slide 64
Slide 64 text
Teams での Adaptive Cards
アクション
トリガー
New!!
New!!
誰かがアダプティブカードに応答した場合
フローのトリガーとして、
Adaptive Cardの応答を待ち受ける
Adaptive Card を送信する
Adaptive Card を送信し、応答を待つ
投稿されたメッセージに、Adaptive
Card で返信する
投稿済みの Adaptive Card の内容を更
新する
選択したメッセージに対して
メッセージのアクションから、
Adaptive Cardで応答を待ち受ける
Slide 65
Slide 65 text
応答しない
Adaptive
Cards
Slide 66
Slide 66 text
①ユーザー：実行ユーザーとして
フローボット：Power Automateとして 送信
「応答しないカード」を送信
ユーザー の入力、Action.Submitを含まないカードを送信
Power Virtual Agentsは今回は対象外
②チャネル
グループチャット
フローボットとチャット(投稿者：フローボットの場合のみ)
③Adaptive Card の JSON を記入
[When someone responds to an adaptive card]
トリガーで待ち受ける際の Card Type Id
投稿者：フローボットの場合のみ表示
件名は、投稿者：ユーザー ＆ 投稿先：チャネルの場合のみ表示
IsAlertは、投稿先：フローボットとチャットの場合のみ表示
はいの場合、アクティビティに通知
Action
Slide 67
Slide 67 text
パンダ姐さん 曰く。。。
フローは
• プッシュトリガーの場合は実行者
• ポーリングトリガーの場合は作成者（大体は）
で動くので気を付けてね
Slide 68
Slide 68 text
応答する
Adaptive
Cards
Slide 69
Slide 69 text
ユーザーの入力を待ち受ける
■方法１
送信し応答を待機
■方法２
「送信」フローで送信し、「待受け」フローのトリガーで応答する
待ち受けている間、
フローは実行状態となる
規定では30日間
制限と構成 - Power Automate | Microsoft Docs
https://docs.microsoft.com/ja-jp/power-automate/limits-and-config#duration-limits
送信フロー
カードを送信し終了
待受けフロー
インスタントトリガーで起動
1つのフローで実現
２つのフローで実現
Action
Action
Trigger
Slide 70
Slide 70 text
応答を待機する
Slide 71
Slide 71 text
①フローボット：Power Automateとして 送信
「送信し応答を待機」する ①
ユーザー の入力、Action.Submitを受け取るカードを送信
Power Virtual Agentsは今回は対象外
② チャネル
グループチャット
フローボットとチャット ＞ 個人チャット
③Adaptive Card の JSON を記入
⑤投稿先：チャネルの場合に表示
④ユーザーが Action.Submit した後に表示されるメッセージ
⑤投稿先：グループチャットの場合に表示
⑤投稿先：フローボットとチャットの場合に表示
Action
Slide 72
Slide 72 text
「送信し応答を待機」する ②
「複数人に送信したAdaptive Cardに一人が応答すると、全員が応答済
みになってしまう問題」
やきにく！
回答してないのに！
回答してないのに！
チャネル・
グループチャット
に送信
回答
Action
Slide 73
Slide 73 text
「送信し応答を待機」する ③
[送信者]配列 ＋ Apply to each ＋ 個別に[フローとチャットする]
outputs('作成')
③ ①の配列でApply to each
[
"[email protected]",
"[email protected]",
"[email protected]"
]
① 送信対象を配列化する
item()
④ Adaptive Cardを投稿し応答を待機
➢ フローとチャットする
➢ 宛先：item()
② コンカレンシー制御：ON
最大並列化多重度は50なので、
51人⽬以降で送信待が発生する
Action
Slide 74
Slide 74 text
応答を
トリガーで
待ち受ける
Slide 75
Slide 75 text
待受けフロー
送信フロー
応答をトリガーで待ち受ける ①
Teamsに投稿した Adaptive Card からの応答をきっかけとしてフロー
の実行が可能
インスタントトリガーで動作します
（ポーリングではない）
[アダプティブカード] と
[カードの種類 ID ] の
値を合わせる
Trigger
Slide 76
Slide 76 text
応答をトリガーで待ち受ける ②
◼ 応答されたAdaptive Card から取得可能な項⽬
➢ Input に入力された値、Action.SubmitのDataプロパティ値
➢ 応答者のID，UPN，DisplayName
➢ メッセージID
➢ チームID，チャネルID など
◼ 制限事項
➢ 投稿者：フローボットでのみトリガー可能
➢ 既定の環境に作成されたフローでのみトリガー可能
➢ ソリューション内のフローはトリガーされない
➢ 送信フローをオーナーが実行した場合のみトリガー可能
(実行のみユーザーによる送信ではトリガー不可)
Adaptive cardを利用したフローの設計パターンを変える新トリガーのご紹介 "When someone responds to an adaptive card"
https://mofumofupower.hatenablog.com/entry/teams_adaptive_trigger
Trigger
Slide 77
Slide 77 text
待受けフローA
送信フロー
応答をトリガーで待ち受ける ③
「複数人に送信したAdaptive Cardに一人が応答すると、全員が応答済みになっ
てしまう問題」は発生しませんが、応答後にカードは更新されません
やきにく！
サラダ！
笹
Action
は焼肉
はサラダ
は笹
Trigger
回答してもCardの
内容は変わらない
Trigger
3回実行する
(応答毎にトリガー)
Action
Slide 78
Slide 78 text
待受けフローB
待受けフローA
待受けフローC
送信フロー
応答をトリガーで待ち受ける ④
一回の応答を、複数のトリガーで待ち受けることが可能です
やきにく！
サラダ！
Action Trigger
Trigger
Action
Trigger Action
Trigger Action
複数の待受けフローで平行
して処理を実行できる！
Slide 79
Slide 79 text
Adaptive Card
で返信する
Slide 80
Slide 80 text
Adaptive Card で返信する
チャネルで、特定のメッセージにアダプティブカードで返信する
③ メッセージID
①ユーザー：実行ユーザーとして
フローボット：Power Automateとして 送信
② [カスタム項⽬の追加]から“channel” と入力（バグ？）
ルート メッセージにのみ、返信できます
(スレッドの返信に返信は不可)
Action
Slide 81
Slide 81 text
メッセージID の取得方法
Teams へメッセージ送信するアクションや、応答を受信するトリガーなどでメッセー
ジIDが取得できます（動的コンテンツ）
https://teams.microsoft.com/l/message/ ～ 中略 ～ &parentMessageId= [メッセージID] &teamName= ～ 略
Teams コネクタのトリガーやアクションなど
「動的なコンテンツ」でメッセージID を取得可能
また、投稿したメッセージで「リンクをコピー」すると、URL内からも取得可能です
Slide 82
Slide 82 text
Adaptive Card
を更新する
Slide 83
Slide 83 text
Adaptive Card を更新する ①
チャネルで、特定のメッセージにアダプティブカードで返信する
①フローボット のみ
② チャネル
グループチャット
複数人に送信したAdaptive Cardを対象にこのアクションを実行すると、
全員のカードが更新されます。（同一のメッセージIDのため）
③ メッセージID
➢ 別ユーザーが送信したメッセージは、
更新できない
➢ アダプティブカード形式でないメッセージにも
一応、更新可能（メッセージの再表示が必要）
Power Automate から Teams に投稿したアダプティブカードを更新する https://qiita.com/MiyakeMito/items/9a50a38ddba37e8b4f65
Action
ルート メッセージにのみ更新可能
Slide 84
Slide 84 text
メッセージの
アクションから
Adaptive Card
を送信
Slide 85
Slide 85 text
メッセージのアクションから
[選択したメッセージの場合] (選択したメッセージに対して)トリガー
New Cardできない
JSONをペーストできない
ChoiceSetなど配置できない
…など割と使いにくい
使い道は・・・
メッセージの内容をDB等にOutputする際に、
付加情報をAdaptive Cardで問い合わせる
など
[チャネル内のメッセージで応答します] や
[チャネル内でアダプティブ カードを使用し
て返信する] を後続に追加し、ルートメッ
セージ以外でAction実行はNG (エラー)
Trigger
Slide 86
Slide 86 text
@メンション（Teams）する
方法１
UPN
方法２
「ユーザーの @mention トーク
ンを取得する」アクション
TextBlock 要素と FactSet 要素に
埋め込めます
Slide 87
Slide 87 text
Teams の
Incoming Webhook
とAdaptive Cards
Slide 88
Slide 88 text
Incoming Webhook ①
外部アプリからのデータを、Teams チャネル にリアルタイム
で送信
チャネルのメニューから[コネクタ]
Incoming Webhook を
[追加]し[構成]
Incoming Webhook を構成
フローボット のアイコン
を設定可能
リクエストURI
Slide 89
Slide 89 text
Incoming Webhook ②
POST リクエストURI
{
"type": "message",
"attachments": [
{
"contentType":
"application/vnd.microsoft.card.adaptive",
"content" :
[Adaptive Card PAYLOAD]
}
]
}
Action.Submit と
UPN によるメンション
は動作しません
Slide 90
Slide 90 text
Incoming Webhook で@メンション
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "1さん、2さん焼肉いこうぜ！"
}
],
"msteams": {
"entities": [
{
"type": "mention",
"text": "1",
"mentioned": {
"id": "[email protected]",
"name": "一ノ瀬 一夫"
}
},
{
"type": "mention",
"text": "2",
"mentioned": {
"id": "6480daab-d9b5-4285-a9da-e2905e7aa2dc",
"name": "二宮 次郎"
}
}
]
}
}
UPN
表示する名前
Azure AD Object ID でもOK
Slide 91
Slide 91 text
Outlookと
Adaptive Cardsを
送受信する
Slide 92
Slide 92 text
Outlook との送受信の手順
待ち受けフロー作成
アダプティブカード作成
送信のみ 送信と応答
Action.Http 配置
プレミアムコネクタ
送信フローの作成
アダプティブカード作成
Slide 93
Slide 93 text
[HTTP 要求の受信時]トリガーで、Outlook からのHTTPリクエストを応答
待ち受けフロー作成 ①
フローを保存するとPOST URLが表示される
⇒コピーする
{
"type": "object",
"properties": {
"myName": {
"type": "string"
},
"myNumber": {
"type": "number"
},
"multiChoice": {
"type": "string"
}
}
}
Adaptive Card の Inputs に設定した ID
Inputs の型に合わせる
Number：number
Number以外：string
Outlook へ送信のみの
場合は不要な手順
Slide 94
Slide 94 text
[HTTP 要求の受信時]トリガーの後に、[応答]アクションを実行すると
データ送信後のカードを更新できる
待ち受けフロー作成 ②
{
"type": "AdaptiveCard",
"$schema":
"http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Thank you"
}
]
}
Outlook へ送信のみの
場合は不要な手順
CARD-UPDATE-IN-BODY : true
200
応答後に表示するメッセージを
設定
Slide 95
Slide 95 text
Outlook では入力を待機するアクションが提供されていない
(そもそもAction.Submitがサポート外)
➢ HTTPリクエストを行うアクション、[Action.Http] を利用する
Action.Http 配置 ①
[Action.Http] は
Outlook Actionable Messages
を選ぶと配置可能
Outlook へ送信のみの
場合は不要な手順
Inputs にはカード内で
ユニークな ID を付与する
Slide 96
Slide 96 text
[Action.Http] のプロパティ設定
Action.Http 配置 ② Outlook へ送信のみの
場合は不要な手順
Authorization : 空欄(null) 忘れがち ⇒ 実行時に401エラー
待ち受けフローの作成
[HTTP 要求の受信時]トリガーの
HTTP POST の URL
POST
{
"myName":"{{myName.value}}",
"myNumber":{{myNumber.value}},
"multiChoice":"{{multiChoice.value}}"
}
“入力パーツのId” : {{入力パーツのId.value}}
文字列の場合は
“ ”（ダブルクオーテーション)で囲む
Content-type : application/json
Slide 97
Slide 97 text
[作成]アクションに、カードのJSONをコピー＆ペースト
送信フロー作成 ①
“version” : “1.0” に変更
Slide 98
Slide 98 text
[メールの送信(v2)]アクションで カードを送信
送信フロー作成 ②
> でコード表示に切り替え
@{outputs('作成')}
Slide 99
Slide 99 text
テナント
Outlook へ送信時の注意
■ メール送信フロー実行者以外のメールボックスへ送信（Actionable
Email）する場合、Actionable Email Developer Dashboard にプロ
バイダー登録が必要です。
https://outlook.office.com/connectors/oam/publish/
プロバイダー登録は不要
Organization でプロバイダー登録が必要
（承認者は 組織のExchange管理者）
Global でプロバイダー登録が必要
（承認者は Microsoft ）
プロバイダー登録しないと
空白のメールが届きます
Slide 100
Slide 100 text
Teamsでの
Adaptive Cards
Tips
Slide 101
Slide 101 text
全幅 Adaptive Card
{
"type": "AdaptiveCard",
"$schema":
"http://adaptivecards.io/schemas/a
daptive-card.json",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "aaaaaa",
"wrap": true
}
],
"msteams": {
"width": "Full"
}
}
AdaptiveCardにmsteams – width 属性を Full 指定すると、Teams上でア
ダプティブ カードの幅を拡張できる
https://docs.microsoft.com/ja-jp/microsoftteams/platform/task-
modules-and-cards/cards/cards-format?tabs=adaptive-
md%2Cconnector-html
Slide 102
Slide 102 text
画像のステージ ビュー
Imageの msteams - allowExpand 属性を true に設定すると、画像の拡
張アイコンが表示できる
モバイルアプリの場合は
allowExpand 属性に関係なく
拡張表示できます
{
"type": "AdaptiveCard",
"$schema":
"http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"body": [
{
"type": "Image",
"url": "https:/bbb/aaa.png",
"msteams": {
"allowExpand": true
}
}
]
}
Slide 103
Slide 103 text
ユーザーピッカー
ChoiceSet でユーザーを検索して選択することが可能
"body": [
{
"type": "Input.ChoiceSet",
"choices": [],
"choices.data": {
"type": "Data.Query",
"dataset": "graph.microsoft.com/users"
},
"id": "people-picker",
"isMultiSelect": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
https://docs.microsoft.com/ja-
jp/microsoftteams/platform/task-modules-
and-cards/cards/people-picker?tabs=desktop
Azure AD オブジェクト IDで応答するので
[Azure AD]コネクタの[ユーザーの取得]を使って
変換しよう
/users?scope=currentContext
チャネルやグループチャットのメ
ンバーのみが候補となる
Slide 104
Slide 104 text
動的な Input.ChoiceSet
Power Automate から ChoiceSet の選択肢を動的に設定可能
Body('選択')
title
value
Slide 105
Slide 105 text
Hands-onしましょう！
全幅 Adaptive Cards
ユーザーピッカー
動的な Input.ChoiceSet
画像のステージ ビュー
ぜひ
ハンズオンしてください！
Slide 106
Slide 106 text
まとめ
３週にわたり
Adaptive Cards の基本と応用、そしてTipsを
説明しました
業務や遊びで Adaptive Cards を活用し
便利で面白いフローを作成してみてください
そしてOutputしていただけたら
最高にうれしいです！
Slide 107
Slide 107 text
ありがとうございました