Power AutomateでのAdaptive Cards

Transcript

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