Power AutomateでのAdaptive Cards

Adaptive Cards
について
気ままに勉強会 #21,22,24

View Slide

Miyake Mito @MiTo60448639
https://qiita.com/MiyakeMito
株式会社アイシーソフト
Technical Manager
www.icsoft.jp
https://speakerdeck.com/
miyakemito

View Slide

Power Automate と
Power Virtual Agents で
ゲームを作ってます
⚫ オセロ
⚫ 神経衰弱
⚫ どうぶつしょうぎ
⚫ WORDL

View Slide

本日のゴール
Power Automate における
Adaptive Cards の Tips
について知ろう

View Slide

本日の参考サイト
■ 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/

View Slide

注意
プレミアムコネクタを利用します。有料ライセンスが必要です。
運用環境での使用は許可されていませんが、開発向けプランや
開発者テナントであれば無償でお試しいただけます。
■ 開発者向けプラン
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

View Slide

免責事項
当スライドは、
2022年7月現在のバージョンでの情報です
今後のアップデート等により、
仕様変更する可能性があります
また、私の見解による内容が含まれます
間違いなどありましたらご指摘ください

View Slide

Adaptive Cards
とは

View Slide

Adaptive Cards とは
◼ ユーザーに対して、Adaptive（適応）した Card 形式のメッセージ
◼ JSONで記載され、マルチプラットフォームに最適化されるフォーマット
Adaptive
Card
JSON
Your Apps
Adaptive
Card Designer
Adaptive
Cards
Management
System
templates

View Slide

Adaprive Cards のメリット
➢ ユーザーがメッセージに対しアクションできる
➢ 使い慣れたインターフェースでアクション（応答）可能
➢ リッチな形式でメッセージを送信可能
➢ CSSやHTMLを前提としないデザイン
➢ “Templating”（カードレイアウトとデータの分離）で再現性が高い

View Slide

Power Automateでの
Adaprive Cards
➢ Teams のチャネル、チャットに送信し応答
➢ Outlook へメール送信し応答
➢ Power Virtual Agents にプロアクティブなメッセージを送信

View Slide

DEMOします
1. Adaptive Card Designer でアダプティブカードをデ
ザインする
2. Power Automate でフローを作成し、Teams のチャ
ネルへ Adaptive Card を送信する

View Slide

Adaptive Cards
をデザインする

View Slide

Adaptive Card Designer
https://adaptivecards.io/designer/ ①ツールバー
②カード要素
③デザインエリア
⑦サンプルデータ
エディタ
④カード構造 ⑤要素プロパティ
⑥カードペイロード
エディタ

View Slide

Adaptive Card Designer の
ツールバー
保存機能は存在しないため、
作成したカードのJSONを保存しよう
Teams に送信 : ver.1.4以下
Outlook に送信 : ver.1.0
新規作成
JSON をコピーカードのプレビューモード
送信するプラットフォームを選択 Docs へ Templating の Docs へ

View Slide

Teams Developer Portal
https://dev.teams.microsoft.com/
Developer Portal なら作成した
Adaptive Card を保存可能です

View Slide

Adaptive Card Designer の手順
2. カード要素から配置するパーツを
デザインエリアにdrag and drop
3. パーツのプロパティを設定
⑤要素プロパティ
②カード要素
③デザインエリア
4. Previw mode で表示を確認
5. Copy card payload で JSON をコピー
①ツールバー
①ツールバー
1. host app から送信する
プラットフォームを選択
①ツールバー

View Slide

Adaptive Cards
のパーツ

View Slide

Adaptive Cards
のパーツ
Cards

View Slide

Cards
■ AdaptiveCard
Adaptive Card の本体
Adaptive Card の土台となる必須のパーツ

View Slide

AdaptiveCard
Adaptive Cards の本体でありベース
ここに様々なパーツを配置し、カードをデザ
インする
➢ 背景画像を設定できる
PROPERTIES
Background image • 背景画像をURLで指定
Layout
• Minimum height in pixels
：カードの高さを設定
• Vertical content alignment
：各パーツの配置位置を指定
Selection action • クリック時のアクションを設定可能なボタン
（Action.ToggleVisibility は不可）

View Slide

Adaptive Cards
のパーツ
Elements

View Slide

Elements
■ TextBlock
■ RichTextBlock
■ Image
■ Media
単一のテキストやメディアを表示する要素

View Slide

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"

View Slide

RichTextBlock
ラベル、一行、複数行テキストを表示
PROPERTIES
Layout • サイズ、表示位置などを設定
➢ TextRun でプロパティを設定し、文字を修飾する
（カードペイロードエディタで編集する）
https://adaptivecards.io/explorer/TextRun.html
TextBlock ではできないこと
• Highlight（背景色反転）
• strikethrough（取り消し線）
• underline

View Slide

Image
画像表示
➢ クリック時のアクションを指定可能
PROPERTIES
Url • 画像のURL（匿名アクセス可能なURLであること）
• Data URIでも指定可能
Style • “Person”を指定すると丸く切り抜き
（アイコン表示時などに利用）
Background color • 背景色

View Slide

■ 画像URLの制限
– 匿名アクセス可能なURLであること
– URLはhttpsで始まり、ファイル自体への直接リンクである必要が
あります（jpg,png,jfifなどで終わるURL）
■ SharePoint Online や OneDrive に保存した画像を表示するには…
1. dataUri(file content) でbase64でエンコード
2. AZURE ストレージに保存
➢ 共有アクセストークンの生成または
➢ 「匿名読み取りアクセス」
Image の URL
ただし、Teamsのメッセージペイロードのサイズ上限は
25Kbなので注意

View Slide

Media
オーディオやビデオコンテンツ用のメディア
プレイヤー
PROPERTIES
Sources • URL：メディアのURL
• mimeType：” video/mp4” または "audio/mpeg"
Alternate text • オーディオまたはビデオを説明する代替テキスト
Poster URL • 再生する前に表示する画像のURL
Teams のアダプティブカードでは
現在サポートされていません
代替案としては、
サムネ画像＋ action. OpenUrl による動画へのアクセスなど

View Slide

Adaptive Cards
のパーツ
Containers

View Slide

Containers
■ Container
■ ColumnSet
■ Column
■ ImageSet
■ FactSet
複数のパーツやデータをまとめて表示する要素

View Slide

Container ①
複数パーツを一纏めにする
複数の要素を、ひとつのオブジェクトとして
まとめることが可能
➢ 背景画像や背景色を設定できる
PROPERTIES
Background image • 背景画像
Style • 背景色

View Slide

Container ②
Container は、中 (下位構造) にパーツを含むと、“items”: [] の配列形式のJSONデータとなる
⇒ 配列形式のデータを表示できる
配列
Container
リスト形式のデータを Adaptive Cards で表示する方法 https://mofumofupower.hatenablog.com/entry/2020/07/27/153632
親 Container：テーブル単位で
レコードを纏める
子 Container：
レコード単位でカラムを纏める
"[ ]"(ブラケット)は不要

View Slide

ColumnSet
段組みデザイン
➢ Columnを追加し、”段組み“表示
PROPERTIES
Style • 背景色

View Slide

PROPERTIES
Background image • 背景画像
Style • 背景色
Width
• Automatic
• Stretch
• Weight（おすすめ）
• Pixels
Weight • Width：Weightの場合、幅を割合で指定
Selection action • クリック時のアクションを設定可能
Column
段組みデザイン
➢ ColumnSet上で追加し”段組み”表示
➢ ColumnはContainerと同様に
“columns”: [] の配列形式のJSONデータ

View Slide

Container と ColumnSet
Container：
レコード単位
で情報を纏め
て、上から順
並べることが
できる
ColumnSet：レコード単位で情報を纏めて、
左から右に並べることができる

View Slide

ImageSet
画像を並べて配置
PROPERTIES
➢ ColumnSet と同様、画像を横に並べて配置可能
ImageSetは自動的にwrapする
➢ Elements の Image は配置できない
（Containerを利用する）
➢ Image でプロパティを設定し、画像を並べる
（カードペイロードエディタで編集する）

View Slide

FactSet
Name：Value のペアを複数表示
Nameを行頭文字にすると箇条書きを表現で
きる
PROPERTIES
Facts • Name：Value の組み合わせ（Fact）を複数表示可能

View Slide

ここでハンズオン ①
Adaptive Cards を作成してみよう！
➢ Select host app：Microsoft Teams
➢ Container を配置し、Style で背景色
➢ ColumnSet で段組み
➢ Image を含む Column で、
Width を Automatic
➢ TextBlock を含む Column で、
Vertical content alignment を Center

View Slide

Adaptive Cards
のパーツ
Inputs

View Slide

Inputs
■ Input.Text
■ Input.Date
■ Input.Time
■ Input.Number
■ Input.ChoiceSet
■ Input.Toggle
ユーザーの入力が可能な要素
ユーザーが入力した内容は、
後述の Action.Submit や Action.Http で
Power Automate へ返ります

View Slide

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/

View Slide

Input.Date
ユーザーが日付を入力可能
➢ YYYY-MM-DD 形式で返ります
PROPERTIES
Label • ラベル
Minimum value • 入力可能な期間を設定する場合の開始日
YYYY-MM-DD 形式で指定する
Maximum value • 入力可能な期間を設定する場合の終了日
範囲外の日付は Date Picker で選択不可能となる

View Slide

Input.Time
ユーザーが時刻を入力可能
➢ HH:MM 形式で返ります
PROPERTIES
Label • ラベル
Minimum value • 入力可能な時間を設定する場合の開始時刻
HH:MM 形式で指定する
Maximum value • 入力可能な時間を設定する場合の終了時刻
HH:MM 形式で指定する
範囲外の時刻を入力すると Validation Error となる

View Slide

Input.Number
ユーザーが数値を入力可能
PROPERTIES
Label • ラベル
Minimum value • 入力可能な最小値を設定
Maximum value • 入力可能な最大値を設定
float() ，int() 関数を使おう
➢ 文字列型で返るので、フロー側で変換します

View Slide

Input.ChoiceSet ①
ユーザーが選択肢を入力可能
PROPERTIES
Label • ラベル
（Title と Value の、Value を設定する）
Allow multi
selection • 複数選択可能
Style • Compact：ドロップダウン形式
• Expanded：ラジオボタン形式
Choices • 選択肢を設定
Style：Compact
Style：Expanded
Allow multi selection：On

View Slide

Input.ChoiceSet ②
Choices プロパティ
• 選択肢はTitle と Value で設定します
Title：カードで表示される値
Value：フローに戻る値
• Allow multi selection On 時に複数選択した場合も、
カンマ区切りの文字列で返ります
split( ‘’ , ’, ’ ) で配列に変換しよう

View Slide

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」の値
を設定する

View Slide

バリデーションについて
■ 各 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

View Slide

Id プロパティについて
■ 各 Input は Id プロパティを備えています
■ Adaptive Card で応答する場合、Id プロパティの入力が必要です
■ Power Automate へ、”[Idプロパティ]”:”入力値” の形式で返ります
■ 各 Id プロパティの値は、カード内でユニークである必要があります

View Slide

Adaptive Cards
のパーツ
ActionSet

View Slide

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 時点）

View Slide

Action.OpenUrl
設定されたURLを展開する
（ブラウザで表示）
PROPERTIES
Title • ボタンの文字
Url • 展開するURL
Icon URL • ボタンのアイコン

View Slide

Action.Submit
Teamsでユーザーの入力を送信する
PROPERTIES
Data • 設定した値を送信可能
ユーザーの入力情報と、
Action.Submit のData プロパティ値
がフローに返る
{ "Key" : "Value" } 形式で指定
"key"の値が、Input. パーツの Id プロパティ値
と重複しないように注意

View Slide

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

View Slide

Action. ToggleVisibility
他の要素を表示/非表示する
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Toggle!",
"targetElements": [
"imageToToggle"
]
},
{
"title": "Show!",
"targetElements": [
{
"elementId": "imageToToggle",
"isVisible": true
}
]
},
{
"title": "Hide!",
"targetElements": [
{
"elementId": "imageToToggle",
"isVisible": false
}
]
}
]
Id：imageToToggle
トグル表示
表示
非表示
PROPERTIES

View Slide

Action.Http
Outlookでユーザーの入力を送信する（HTTPリクエスト）
PROPERTIES
Method • HTTPリクエストメソッド
GET or POST）
Url • HTTP リクエスト URL
Body • HTTP リクエスト Body
HTTP headers • HTTP リクエストヘッダ
Meshod が “POST” の場合、表示

View Slide

Schema Explorer
Adaptive Cards 各 Elements のスキーマは、
Schema Explorerで確認できます
https://adaptivecards.io/explorer/AdaptiveCard.html

View Slide

ここでハンズオン
Adaptive Cards を
作成してみよう！
➢ 背景色は Container の Style
➢ 段組みは ColumnSet
幅の割合は Width や Weight
➢ Input.ChoiceSet で選択肢
➢ ActionSet の Action.Submit で
送信ボタン
➢ 各 Input に Id を設定する

View Slide

Teamsへ
Adaptive Cardsを
送信する

View Slide

Teamsでの
Adaptive
Cards

View Slide

Teams での Adaptive Cards
アクション
トリガー
New!!
New!!
誰かがアダプティブカードに応答した場合
フローのトリガーとして、
Adaptive Cardの応答を待ち受ける
Adaptive Card を送信する
Adaptive Card を送信し、応答を待つ
投稿されたメッセージに、Adaptive
Card で返信する
投稿済みの Adaptive Card の内容を更
新する
選択したメッセージに対して
メッセージのアクションから、
Adaptive Cardで応答を待ち受ける

View Slide

応答しない
Adaptive
Cards

View Slide

①ユーザー：実行ユーザーとして
フローボット：Power Automateとして送信
「応答しないカード」を送信
ユーザーの入力、Action.Submitを含まないカードを送信
Power Virtual Agentsは今回は対象外
②チャネル
グループチャット
フローボットとチャット(投稿者：フローボットの場合のみ)
③Adaptive Card の JSON を記入
[When someone responds to an adaptive card]
トリガーで待ち受ける際の Card Type Id
投稿者：フローボットの場合のみ表示
件名は、投稿者：ユーザー＆投稿先：チャネルの場合のみ表示
IsAlertは、投稿先：フローボットとチャットの場合のみ表示
はいの場合、アクティビティに通知
Action

View Slide

パンダ姐さん曰く。。。
フローは
• プッシュトリガーの場合は実行者
• ポーリングトリガーの場合は作成者（大体は）
で動くので気を付けてね

View Slide

応答する
Adaptive
Cards

View Slide

ユーザーの入力を待ち受ける
■方法１
送信し応答を待機
■方法２
「送信」フローで送信し、「待受け」フローのトリガーで応答する
待ち受けている間、
フローは実行状態となる
規定では30日間
制限と構成 - Power Automate | Microsoft Docs
https://docs.microsoft.com/ja-jp/power-automate/limits-and-config#duration-limits
送信フロー
カードを送信し終了
待受けフロー
インスタントトリガーで起動
1つのフローで実現
２つのフローで実現
Action
Action
Trigger

View Slide

応答を待機する

View Slide

①フローボット：Power Automateとして送信
「送信し応答を待機」する ①
ユーザーの入力、Action.Submitを受け取るカードを送信
Power Virtual Agentsは今回は対象外
② チャネル
フローボットとチャット＞個人チャット
③Adaptive Card の JSON を記入
⑤投稿先：チャネルの場合に表示
④ユーザーが Action.Submit した後に表示されるメッセージ
⑤投稿先：グループチャットの場合に表示
⑤投稿先：フローボットとチャットの場合に表示
Action

View Slide

「送信し応答を待機」する ②
「複数人に送信したAdaptive Cardに一人が応答すると、全員が応答済
みになってしまう問題」
やきにく！
回答してないのに！
回答してないのに！
チャネル・
に送信
回答
Action

View Slide

「送信し応答を待機」する ③
[送信者]配列＋ Apply to each ＋個別に[フローとチャットする]
outputs('作成')
③ ①の配列でApply to each
[
"[email protected]",
"[email protected]",
"[email protected]"
]
① 送信対象を配列化する
item()
④ Adaptive Cardを投稿し応答を待機
➢ フローとチャットする
➢ 宛先：item()
② コンカレンシー制御：ON
最大並列化多重度は50なので、
51人⽬以降で送信待が発生する
Action

View Slide

応答を
トリガーで
待ち受ける

View Slide

待受けフロー
送信フロー
応答をトリガーで待ち受ける ①
Teamsに投稿した Adaptive Card からの応答をきっかけとしてフロー
の実行が可能
インスタントトリガーで動作します
（ポーリングではない）
[アダプティブカード] と
[カードの種類 ID ] の
値を合わせる
Trigger

View Slide

応答をトリガーで待ち受ける ②
◼ 応答された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

View Slide

待受けフローA
送信フロー
応答をトリガーで待ち受ける ③
「複数人に送信したAdaptive Cardに一人が応答すると、全員が応答済みになっ
てしまう問題」は発生しませんが、応答後にカードは更新されません
やきにく！
サラダ！
笹
Action
は焼肉
はサラダ
は笹
Trigger
回答してもCardの
内容は変わらない
Trigger
3回実行する
(応答毎にトリガー)
Action

View Slide

待受けフローB
待受けフローA
待受けフローC
送信フロー
応答をトリガーで待ち受ける ④
一回の応答を、複数のトリガーで待ち受けることが可能です
やきにく！
サラダ！
Action Trigger
Trigger
Action
Trigger Action
Trigger Action
複数の待受けフローで平行
して処理を実行できる！

View Slide

Adaptive Card
で返信する

View Slide

Adaptive Card で返信する
チャネルで、特定のメッセージにアダプティブカードで返信する
③ メッセージID
①ユーザー：実行ユーザーとして
フローボット：Power Automateとして送信
② [カスタム項⽬の追加]から“channel” と入力（バグ？）
ルートメッセージにのみ、返信できます
(スレッドの返信に返信は不可)
Action

View Slide

メッセージID の取得方法
Teams へメッセージ送信するアクションや、応答を受信するトリガーなどでメッセー
ジIDが取得できます（動的コンテンツ）
https://teams.microsoft.com/l/message/ ～中略～ &parentMessageId= [メッセージID] &teamName= ～略
Teams コネクタのトリガーやアクションなど
「動的なコンテンツ」でメッセージID を取得可能
また、投稿したメッセージで「リンクをコピー」すると、URL内からも取得可能です

View Slide

Adaptive Card
を更新する

View Slide

Adaptive Card を更新する ①
チャネルで、特定のメッセージにアダプティブカードで返信する
①フローボットのみ
② チャネル
複数人に送信したAdaptive Cardを対象にこのアクションを実行すると、
全員のカードが更新されます。（同一のメッセージIDのため）
③ メッセージID
➢ 別ユーザーが送信したメッセージは、
更新できない
➢ アダプティブカード形式でないメッセージにも
一応、更新可能（メッセージの再表示が必要）
Power Automate から Teams に投稿したアダプティブカードを更新する https://qiita.com/MiyakeMito/items/9a50a38ddba37e8b4f65
Action
ルートメッセージにのみ更新可能

View Slide

メッセージの
アクションから
Adaptive Card
を送信

View Slide

メッセージのアクションから
[選択したメッセージの場合] (選択したメッセージに対して)トリガー
New Cardできない
JSONをペーストできない
ChoiceSetなど配置できない
…など割と使いにくい
使い道は・・・
メッセージの内容をDB等にOutputする際に、
付加情報をAdaptive Cardで問い合わせる
など
[チャネル内のメッセージで応答します] や
[チャネル内でアダプティブカードを使用し
て返信する] を後続に追加し、ルートメッ
セージ以外でAction実行はNG (エラー)
Trigger

View Slide

@メンション（Teams）する
方法１
UPN
方法２
「ユーザーの @mention トーク
ンを取得する」アクション
TextBlock 要素と FactSet 要素に
埋め込めます

View Slide

Teams の
Incoming Webhook
とAdaptive Cards

View Slide

Incoming Webhook ①
外部アプリからのデータを、Teams チャネルにリアルタイム
で送信
チャネルのメニューから[コネクタ]
Incoming Webhook を
[追加]し[構成]
Incoming Webhook を構成
フローボットのアイコン
を設定可能
リクエストURI

View Slide

Incoming Webhook ②
POST リクエストURI
{
"type": "message",
"attachments": [
{
"contentType":
"application/vnd.microsoft.card.adaptive",
"content" :
[Adaptive Card PAYLOAD]
}
]
}
Action.Submit と
UPN によるメンション
は動作しません

View Slide

Incoming Webhook で@メンション
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"body": [
{
"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

View Slide

Outlookと
Adaptive Cardsを
送受信する

View Slide

Outlook との送受信の手順
待ち受けフロー作成
アダプティブカード作成
送信のみ送信と応答
Action.Http 配置
プレミアムコネクタ
送信フローの作成
アダプティブカード作成

View Slide

[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 へ送信のみの
場合は不要な手順

View Slide

[HTTP 要求の受信時]トリガーの後に、[応答]アクションを実行すると
データ送信後のカードを更新できる
待ち受けフロー作成 ②
{
"$schema":
"http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"body": [
{
"text": "Thank you"
}
]
}
CARD-UPDATE-IN-BODY : true
200
応答後に表示するメッセージを
設定

View Slide

Outlook では入力を待機するアクションが提供されていない
(そもそもAction.Submitがサポート外)
➢ HTTPリクエストを行うアクション、[Action.Http] を利用する
Action.Http 配置 ①
[Action.Http] は
Outlook Actionable Messages
を選ぶと配置可能
Inputs にはカード内で
ユニークな ID を付与する

View Slide

[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

View Slide

[作成]アクションに、カードのJSONをコピー＆ペースト
送信フロー作成 ①
“version” : “1.0” に変更

View Slide

[メールの送信(v2)]アクションでカードを送信
送信フロー作成 ②
> でコード表示に切り替え

type='application/adaptivecard+json'>@{outputs('作成')}

View Slide

テナント
Outlook へ送信時の注意
■ メール送信フロー実行者以外のメールボックスへ送信（Actionable
Email）する場合、Actionable Email Developer Dashboard にプロ
バイダー登録が必要です。
https://outlook.office.com/connectors/oam/publish/
プロバイダー登録は不要
Organization でプロバイダー登録が必要
（承認者は組織のExchange管理者）
Global でプロバイダー登録が必要
（承認者は Microsoft ）
プロバイダー登録しないと
空白のメールが届きます

View Slide

Teamsでの
Adaptive Cards
Tips

View Slide

全幅 Adaptive Card
{
"$schema":
"http://adaptivecards.io/schemas/a
daptive-card.json",
"version": "1.4",
"body": [
{
"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

View Slide

画像のステージビュー
Imageの msteams - allowExpand 属性を true に設定すると、画像の拡
張アイコンが表示できる
モバイルアプリの場合は
allowExpand 属性に関係なく
拡張表示できます
{
"$schema":
"http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"body": [
{
"type": "Image",
"url": "https:/bbb/aaa.png",
"msteams": {
"allowExpand": true
}
}
]
}

View Slide

ユーザーピッカー
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
チャネルやグループチャットのメ
ンバーのみが候補となる

View Slide

動的な Input.ChoiceSet
Power Automate から ChoiceSet の選択肢を動的に設定可能
Body('選択')
title
value

View Slide

Hands-onしましょう！
全幅 Adaptive Cards
ユーザーピッカー
動的な Input.ChoiceSet
画像のステージビュー
ぜひ
ハンズオンしてください！

View Slide

まとめ
３週にわたり
Adaptive Cards の基本と応用、そしてTipsを
説明しました
業務や遊びで Adaptive Cards を活用し
便利で面白いフローを作成してみてください
そしてOutputしていただけたら
最高にうれしいです！

View Slide

ありがとうございました

View Slide

Power AutomateでのAdaptive Cards

Power AutomateでのAdaptive Cards

MiyakeMito

More Decks by MiyakeMito

Other Decks in Technology

Featured

Transcript