はじめに
みなさま、こんにちは！
日本マイクロソフトでサマーインターンをしております秋山と申します。
今回、アダプティブカードの中でプロフィール画像を使用する方法を説明します。
アダプティブカードとは
まず、アダプティブカードの説明は「Power Automate の Teams コネクタでアダプティブカードを利用する際の TIPS①」の「アダプティブカードとは」という部分を参考にしてください。
アダプティブカードを使うことにより、例えば、Power Automate から Teams に通知やメッセージを送る際に、単にテキスト メッセージを送るだけではなく、画像を付与したり、ボタンや入力フィールドを配置して、入力フォームとしたりすることが可能になります。
今回の記事では、Power Automate を使用して、Office 365 で使用しているユーザーのプロフィール画像を取得し、Teams にプロフィール画像を埋め込んだアダプティブカードを送信する方法を説明します。
こちらの方法について、少し工夫が必要になります。
Power Automateでフローを作成する
フローを作成する
Power Automate のページを開きます。
作成タブから「インスタント クラウドフロー」を選択します。
インスタントクラウドフローを構築の画面から「手動でフローをトリガーします」を選択し、「作成」ボタンを押します。
「手動でフローをトリガーします」の設定をしていく
今回、「メールアドレス」という変数を設定します。ここに入力されたメールアドレスに紐づいているプロフィール画像が、アダプティブカードに表示されるように実装していきます。
変数の設定
検索窓に「変数」と入力し、「変数を初期化する」アクションを選択します。
各項目を以下のように設定します。
| 名前 | 値 |
|---|---|
| 名前 | url（任意の名前） |
| 種類 | 文字列 |
| 値 | （今回は空白で大丈夫です） |
写真のメタデータを取得する
「ユーザーの写真のメタデータを取得します」アクションを選択します。
そして、値を以下のように設定します。
| 名前 | 値 |
|---|---|
| ユーザー(UPN) | 「手動でフローをトリガーします」アクションの「メールアドレス」 |
写真のあるなしを判定する
ユーザーのプロフィール画像がある場合とない場合で処理を分けるために（プロフィール画像がない場合は後続の処理を実行しない）、「条件」アクションを追加します。
そして、値を以下のように設定します。
| 値の選択 | 式 | 値の選択 |
|---|---|---|
| 「ユーザーの写真のメタデータを取得します」アクションの「写真があります」 | 次の値に等しい | true |
プロフィール画像が設定されている場合の処理を行っていきたいため、これから先は「はいの場合」の中にアクションを追加していきます。
SharePoint に HTTP 要求を送信する
ユーザーのプロフィール画像のコンテンツ自体は Sharepoint Online 側から取得します。
「SharePoint に HTTP 要求を送信します」というアクションを選択し、各項目を以下のように設定します。
| 名前 | 値 |
|---|---|
| サイトのアドレス | https://【テナント名】.sharepoint.com |
| 方法 | GET |
| URI | _layouts/15/userphoto.aspx?size=S&username=【「手動でフローをトリガーします」アクションの「メールアドレス」】 |
変数の値を設定していく
先ほど初期化した変数に値を設定していきます。
値は以下のように設定します。値の部分がややこしいのでよく見比べて入力してください。
| 名前 | 値 |
|---|---|
| 名前 | url |
| 値 | data:【「ユーザーの写真のメタデータを取得します」アクションのContentType】;base64,base64(【「SharePoint に HTTP 要求を送信します」アクションのbody】) |
ポイントは、最後の**base64(【「SharePoint に HTTP 要求を送信します」アクションのbody】)**の部分になります。「SharePoint に HTTP 要求を送信します」アクションの「body」を関数base64()の中身に入れてください。
しばらくすると、この部分の表示が変わることがあります。
この部分にカーソルを重ねたときに、body('SharePoint に HTTP 要求を送信します')?['body']となっていることを確認してください。（outputs('SharePoint に HTTP 要求を送信します')?['body']ではありません）
アダプティブカードを投稿するアクションを設定する
「チャットやチャネルにアダプティブ カードを投稿する」アクションを選択します。
各項目を以下のように設定して下さい。
| 名前 | 値 |
|---|---|
| 投稿者 | Flow bot |
| 投稿先 | Channel |
| Team | 【投稿したいチーム】 |
| Channel | 【投稿したいチャンネル】 |
「メッセージ」の項目には今回アダプティブカードを設定しています。アダプティブカードは以下のような形になっています。複雑に見えますが、実はアダプティブカードデザイナーというものを使うことで、視覚的にカードをデザインし、コードを生成することができます。（https://www.adaptivecards.io/designer/）。
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Publish Adaptive Card Schema"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url":" 【「変数」の「url」】",
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "stretch"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
今回作成したアダプティブカードは以下のようなデザインになっています。
全体の確認
全体がこのような構成になっているか確認してください。
実際にフローを実行してみる
右上の「テスト」をクリックし、「手動」で「テスト」を選択します。
しばらくすると準備が完了するので、「メールアドレス」に画像を表示したい人のメールアドレスを入力し、「フローの実行」をクリックします。
Teams 上で、アダプティブカードが送信されていることを確認してください。
終わりに
こちらはあくまで一例ですが、間に Web アプリケーションなどを介さずに、 Power Automate からユーザーのプロフィール画像など、画像データを取得し、そちらを埋め込んだアダプティブカードを Teams に送信することができます。
つまり、アダプティブカードを使用することで、Teams 上の会話をより豊かにすることができます。
是非、こちらのTIPSを業務負担の軽減にお役立てください。
※本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。