Power AutomateでAdaptive CardsにメンションをつけてTeamsに投稿してみる

suzukiサムネ20221220.png

こんにちは!

フロッグポッドの鈴木です。

今回はタイトルにあるようにアダプティブカードを使ってTeamsにメンション付きで投稿しようとおもいます。

はじめにアダプティブカードの概要ですが、下記が公式にのっている概要の一部を引用したものです。

アダプティブ カードは、ボットまたはメッセージの拡張機能を介してスレッドに追加できる、アクション可能なコンテンツのスニペットです。 これらのカードは、テキスト、グラフィック、ボタンを使用して、対象ユーザーにリッチなコミュニケーションを提供します。

引用元:アプリのアダプティブ カードのデザイン - Teams | Microsoft Learn

 

ざっくりとした説明にはなってしまいますがAutomateでチャットや通知を送信する際にアダプティブカードを使用することで、カードタイプのメッセージを自作してTeamsに投稿できるのですが、その中に画像を挿入したり、文字だけでなくテキストボックスやボタン等のコントロールを使用して入力フォームのようなものを作成したりお洒落なメッセージを作成したり...といったことがアダプティブカードを使用することで可能になります。

 

ということで、さっそく本題のアダプティブカードにメンションをつけて送信してみたいと思います。

まず初めに、以下のパターンがあると思います。

  • メンションをつけたい相手が決まっていて固定な場合
  • メンションをつける相手が不特定多数の場合

不特定多数の場合はちょっと手順が増えるので、まずは固定の場合を説明させていただきます。

メンションをつけたい相手が決まっていて固定な場合

アダプティブカードを作成します。

Adaptive Card DesignerというGUIベースでアダプティブカードを作成できるサイトがあり、そちらを使用して作成しました。

Designer | Adaptive Cards

下記が作成したアダプティブカードとJsonです。

アダプティブカード

suzukiスクリーンショット 2022-12-18 222500.png

Json

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "ここにメンションをいれる",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "【業務連絡】メンション送信用テストです。",
            "wrap": true
        }
    ]
}

いろいろとコントロールを追加するとごちゃごちゃしてしまうので、シンプルイズベストなものを作成しました。
(概要説明でアダプティブカードはコントロールが~とかお洒落な~とか言っていたのに手のひらクルクルですみません。笑)
 
さっそくこちらを使ってAutomateの作成をしていこうと思います。

ユーザーの@mentionトークンを取得

Teamsコネクタの「ユーザーの@mentionトークンを取得する」アクションを使います。
 
suzukiスクリーンショット 2022-12-18 223153.png
こちらにはユーザーIDかユーザープリンシパルネーム(メールアドレス)を入力する必要があります。
このアクションをメンション付けたい人数分、作成してください!
 
上記のアクションでメンションの取得ができます。
  

チャットやチャネルにアダプティブカードを投稿する

続きまして「チャットやチャネルにアダプティブカードを投稿する」アクションを選択してください。
  
suzukiスクリーンショット 2022-12-18 224020.png
こちらのプロパティは用途に応じて設定してください!
  
  • 投稿者:メッセージの送信元のことです。フローボットもしくはユーザーを選択します。
  • 投稿先:メッセージをどこに投稿したいかを選択します。チャット・グループチャット・チャネルのいずれかを選択します。
  • 上記で選択した内容によって入力項目が変わります。チームIDやメールアドレス等適切なものを入力・選択してください。
  • アダプティブカード:Adaptive Card Designerで作成したJsonを貼り付けます。

Jsonの一部を上記で取得した@mentionトークンと入れ替える

貼り付けたJsonの一部の文言を上記のアクションで取得した@mentionトークンと入れ替えます!
Json内の"text": "ここにメンションをいれる",の「ここにメンションをいれる」の部分のみ削除してください。
*ダブルクォーテーションは必要なので一緒に消さないようにしてください!


suzukiスクリーンショット 2022-12-18 225349.png
 
削除した場所に「動的なコンテンツ」内の@mentionを追加します。
 
suzukiスクリーンショット 2022-12-18 225707.png
suzukiスクリーンショット 2022-12-18 230033.png
*複数人のメンションを付ける場合は、事前に取得していた人数分「動的なコンテンツ」内に@mentionの項目があるとおもいますので全て追加します。
 
*個人個人に敬称(さん・様など)を付けたい場合もダブルクォーテーション内に記述してください。
suzukiスクリーンショット 2022-12-19 223429.png
suzukiスクリーンショット 2022-12-18 231240.png
こちらで実際にフローが実行されると、アダプティブカードにメンションを付けて投稿できたかと思います。
 
続いて不特定多数の場合のフローを説明します。
 

メンションをつける相手が不特定多数の場合

アダプティブカードの作成部分は前述と同様なので省略します。
メンバーが固定の場合は@mentionトークンを取得~貼り付け~完成!だったのですが不特定多数の場合はここから手順が変わります。
  
*DataverseやSharePointなどのデータソースから不特定多数のメンバーのメールアドレス(もしくはID)を取得、取得したメンバーに対してメンションを付けてアダプティブカードを送信する。といった場合等は前述の方法では実現できません。(メンション作成するメンバーや人数が未確定のため「ユーザーの@mentionトークンを取得する」アクションがいくつ必要なのかといった条件がわからない
 
ということで、メンションの作成を自分で行う必要があります!
 
参考になった公式ページへのリンクを下記に載せておきます。
 

チャットやチャネルにアダプティブカードを投稿する

固定メンバーのときとこちらの内容は被るのですが「チャットやチャネルにアダプティブカードを投稿する」アクションを選択してください。
  
suzukiスクリーンショット 2022-12-18 224020.png
こちらのアクションのプロパティは用途に応じて設定してください!
  
  • 投稿者:メッセージの送信元のことです。フローボットもしくはユーザーを選択します。
  • 投稿先:メッセージをどこに投稿したいかを選択します。チャット・グループチャット・チャネルのいずれかを選択します。
  • 上記で選択した内容によって入力項目が変わります。チームIDやメールアドレス等適切なものを入力・選択してください。
  • アダプティブカード:Adaptive Card Designerで作成したJsonを貼り付けます。

Jsonの一部を下記の情報に置き換える

固定メンバーの時に@mentionの項目を置いた場所に<at>表示名</at>の形でJsonの中身を変更します。

"body"の後ろに"msteams"の項目も追加します!

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "<at>【表示名】</at>",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "【業務連絡】メンション送信用テストです。",
            "wrap": true
        }
    ],
"msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>【表示名】</at>",
          "mentioned": {
            "id": "【メールアドレス】",
            "name": "【表示名】"
          }
        }
      ]
    }
}

表示名の取得方法は?

メンションの作成で表示名が欲しいので、「チャットやチャネルにアダプティブカードを投稿する」アクションより前の段階でOfficeコネクタを使用してユーザー情報を取得します。
こちらもユーザーIDかユーザープリンシパルネーム(メールアドレス)を入力してください。
これで後続のアクションのときに「動的なコンテンツ」の中に表示名の項目が追加されていると思います。
suzukiスクリーンショット 2022-12-19 225219.png
 
suzukiスクリーンショット 2022-12-19 232039.png
あとは変数・JsonとかForEach等を駆使すれば作成可能だと思います。
いろいろな方法で実現できると思いますのでぜひ試してみてください。
サンプル程度に私が作成したフローを下記に載せておきます。
*枠外では変数の初期化とかをしています。

メンションつけたい人のメールアドレスを取得して、アダプティブカードに最終的に設置するために配列変数に追加していきます。
suzukiスクリーンショット 2022-12-19 235353.png
各配列に入れた値をJoinしていきます!
*下記はサンプルです。
join(variables('メンション表示用の配列'),'、')
suzukiスクリーンショット 2022-12-20 000616.png
 
join(variables('メンションプロパティ用の配列'),',')
suzukiスクリーンショット 2022-12-20 000800.png
これであとはアダプティブカード(Json)の一部を変更すれば完成です!

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "@{variables('メンション表示用文字列')}",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "【業務連絡】メンション送信用テストです。",
            "wrap": true
        }
    ],
"msteams": {
      "entities": [
       @{variables('メンションプロパティ文字列')}
      ]
    }
}
suzukiスクリーンショット 2022-12-20 001020.png
最終的にはこんな感じのフローになりました
suzukiスクリーンショット 2022-12-20 001359.png
以上です。
 
今回はアダプティブカードにメンションをつけてTeamsに投稿してみました。
実際に作成するときには変数の部分をJsonにしたり、Joinもアクション使ったり...といろいろと置き換えて利用することになるとは思いますが、
ご興味持たれた方がいればぜひぜひお試しください!
 
フロッグポッドの鈴木でしたー!

お気軽にご依頼・ご相談ください

前へ

iOSでXamarin.FormsのMaterial Visualを使用している際にUI更新で例外が発生する場合の回避策

次へ

.NET Upgrade Assistantを試す