Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Power AutomateでのAdaptive Cards

Power AutomateでのAdaptive Cards

MiyakeMito

June 26, 2022
Tweet

More Decks by MiyakeMito

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  8. Adaptive Cards
    とは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Adaptive Cards
    をデザインする

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Adaptive Cards
    のパーツ

    View full-size slide

  19. Adaptive Cards
    のパーツ
    Cards

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Adaptive Cards
    のパーツ
    Elements

    View full-size slide

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

    View full-size slide

  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"

    View full-size slide

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

    View full-size slide

  26. Image
    画像表示
    ➢ クリック時のアクションを指定可能
    PROPERTIES
    Url • 画像のURL(匿名アクセス可能なURLであること)
    • Data URIでも指定可能
    Style • “Person”を指定すると丸く切り抜き
    (アイコン表示時などに利用)
    Background color • 背景色
    Layout • サイズ、表示位置などを設定
    Selection action • クリック時のアクションを設定可能なボタン

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. Adaptive Cards
    のパーツ
    Containers

    View full-size slide

  30. Containers
    ■ Container
    ■ ColumnSet
    ■ Column
    ■ ImageSet
    ■ FactSet
    ■ Table
    複数のパーツやデータをまとめて表示する要素
    Ver.1.5から利用可能

    View full-size slide

  31. Container ①
    複数パーツを一纏めにする
    複数の要素を、ひとつのオブジェクトとして
    まとめることが可能
    ➢ 背景画像や背景色を設定できる
    ➢ クリック時のアクションを指定可能
    PROPERTIES
    Background image • 背景画像
    Style • 背景色
    Layout • サイズ、表示位置などを設定
    Selection action • クリック時のアクションを設定可能なボタン

    View full-size slide

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

    View full-size slide

  33. ColumnSet
    段組みデザイン
    ➢ Columnを追加し、”段組み“表示
    ➢ クリック時のアクションを指定可能
    PROPERTIES
    Layout • サイズ、表示位置などを設定
    Selection action • クリック時のアクションを設定可能なボタン
    Style • 背景色

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. ImageSet
    画像を並べて配置
    PROPERTIES
    Layout • サイズ、表示位置などを設定
    ➢ ColumnSet と同様、画像を横に並べて配置可能
    ImageSetは自動的にwrapする
    ➢ Elements の Image は配置できない
    (Containerを利用する)
    ➢ Image でプロパティを設定し、画像を並べる
    (カードペイロードエディタで編集する)

    View full-size slide

  37. Table
    データを表形式で表示する
    PROPERTIES
    firstRowAsHeader • テーブルの最初の行をヘッダー行として扱う
    showGridLines • リッド線を表示するかどうかを指定
    gridStyle • グリッドのスタイルを定義(現在はグリッド線の色の
    み変更可能)
    ➢ Type プロパティは 上階層から順に
    Table > TableRow (rows) > TableCell (cells) で定義
    ➢ 列の数と幅は columns プロパティで定義
    ➢ 行は rows プロパティで定義(ヘッダー行も含む)
    Ver.1.5で利用可能だが、
    TeamsではVer.1.4でも表示されます

    View full-size slide

  38. FactSet
    Name:Value のペアを複数表示
    Nameを行頭文字にすると箇条書きを表現で
    きる
    PROPERTIES
    Facts • Name:Value の組み合わせ(Fact)を複数表示可能
    Layout • サイズ、表示位置などを設定

    View full-size slide

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

    View full-size slide

  40. Adaptive Cards
    のパーツ
    Inputs

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide

  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 で選択不可能となる

    View full-size slide

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

    View full-size slide

  45. Input.Number
    ユーザーが数値を入力可能
    PROPERTIES
    Label • ラベル
    Placeholder • 入力の説明(プレースホルダー) 非推奨
    Default value • 初期値を設定
    Validation • バリデーション
    Minimum value • 入力可能な最小値を設定
    Maximum value • 入力可能な最大値を設定
    float() ,int() 関数を使おう
    ➢ 文字列型で返るので、フロー側で変換します

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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 • バリデーション

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  51. Adaptive Cards
    のパーツ
    ActionSet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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 • ボタンのアイコン

    View full-size slide

  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 • ボタンのアイコン

    View full-size slide

  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” の場合、表示

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. Version 1.5

    新機能について

    View full-size slide

  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上で動作します

    View full-size slide

  62. Teamsへ
    Adaptive Cardsを
    送信する

    View full-size slide

  63. Teamsでの
    Adaptive
    Cards

    View full-size slide

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

    View full-size slide

  65. 応答しない
    Adaptive
    Cards

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. 応答する
    Adaptive
    Cards

    View full-size slide

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

    View full-size slide

  70. 応答を待機する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  77. 待受けフローA
    送信フロー
    応答をトリガーで待ち受ける ③
    「複数人に送信したAdaptive Cardに一人が応答すると、全員が応答済みになっ
    てしまう問題」は発生しませんが、応答後にカードは更新されません
    やきにく!
    サラダ!

    Action
    は焼肉
    はサラダ
    は笹
    Trigger
    回答してもCardの
    内容は変わらない
    Trigger
    3回実行する
    (応答毎にトリガー)
    Action

    View full-size slide

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

    View full-size slide

  79. Adaptive Card
    で返信する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. Adaptive Card
    を更新する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. @メンション(Teams)する
    方法1
    UPN
    方法2
    「ユーザーの @mention トーク
    ンを取得する」アクション
    TextBlock 要素と FactSet 要素に
    埋め込めます

    View full-size slide

  87. Teams の
    Incoming Webhook
    とAdaptive Cards

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. 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

    View full-size slide

  91. Outlookと
    Adaptive Cardsを
    送受信する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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
    応答後に表示するメッセージを
    設定

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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


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




    View full-size slide

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

    View full-size slide

  100. Teamsでの
    Adaptive Cards
    Tips

    View full-size slide

  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

    View full-size slide

  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
    }
    }
    ]
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  107. ありがとうございました

    View full-size slide