Power Automate の Teams コネクタでアダプティブカードを利用する際の TIPS②【アダプティブカードにプロフィール画像を表示する方法】

## はじめに
みなさま、こんにちは！
日本マイクロソフトでサマーインターンをしております秋山と申します。
今回、アダプティブカードの中でプロフィール画像を使用する方法を説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/2d887dc1-e06f-a1f9-6564-a9c615222cc6.png)



### アダプティブカードとは
まず、アダプティブカードの説明は「Power Automate の Teams コネクタでアダプティブカードを利用する際の TIPS①」の「アダプティブカードとは」という部分を参考にしてください。

アダプティブカードを使うことにより、例えば、Power Automate から Teams に通知やメッセージを送る際に、単にテキスト メッセージを送るだけではなく、画像を付与したり、ボタンや入力フィールドを配置して、入力フォームとしたりすることが可能になります。
今回の記事では、Power Automate を使用して、Office 365 で使用しているユーザーのプロフィール画像を取得し、Teams にプロフィール画像を埋め込んだアダプティブカードを送信する方法を説明します。

こちらの方法について、少し工夫が必要になります。


## Power Automateでフローを作成する

### フローを作成する
Power Automate のページを開きます。

作成タブから「インスタント　クラウドフロー」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/0777f089-a8d8-f5d9-4eef-4e0341e5503c.png)
インスタントクラウドフローを構築の画面から「手動でフローをトリガーします」を選択し、「作成」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/cb6a4a51-6340-b516-b7f0-26da816b8dae.png)



### 「手動でフローをトリガーします」の設定をしていく
今回、「メールアドレス」という変数を設定します。ここに入力されたメールアドレスに紐づいているプロフィール画像が、アダプティブカードに表示されるように実装していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/6c621676-e40c-5eec-66fd-7dcc03f4fba6.png)

### 変数の設定
検索窓に「変数」と入力し、「変数を初期化する」アクションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/94089b1c-8a0e-e8da-9e8d-a58ccd3bdab0.png)
各項目を以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/f4d3c474-0a1a-c435-43a7-c9a82666bf71.png)

|名前|値|
|-|-|
|名前|url（任意の名前）|
|種類|文字列|
|値|（今回は空白で大丈夫です）|



### 写真のメタデータを取得する
「ユーザーの写真のメタデータを取得します」アクションを選択します。
そして、値を以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/b3eaf8e0-a71e-f26e-1234-4995657e0ce2.png)

|名前|値|
|-|-|
|ユーザー(UPN)|「手動でフローをトリガーします」アクションの「メールアドレス」|

###  写真のあるなしを判定する
ユーザーのプロフィール画像がある場合とない場合で処理を分けるために（プロフィール画像がない場合は後続の処理を実行しない）、「条件」アクションを追加します。
そして、値を以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/8ddafa05-a6d1-0585-3bd9-2649b0928452.png)


|値の選択|式|値の選択|
|-|-|-|
|「ユーザーの写真のメタデータを取得します」アクションの「写真があります」|次の値に等しい|true|

プロフィール画像が設定されている場合の処理を行っていきたいため、これから先は「はいの場合」の中にアクションを追加していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/a1e967ef-3edb-d7c5-f842-c40b2724ce6f.png)

### SharePoint に HTTP 要求を送信する
ユーザーのプロフィール画像のコンテンツ自体は Sharepoint Online 側から取得します。
「SharePoint に HTTP 要求を送信します」というアクションを選択し、各項目を以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/0978c58e-fd89-c9a4-c1bd-6f87897904d2.png)


|名前|値|
|-|-|
|サイトのアドレス|https://【テナント名】.sharepoint.com|
|方法|GET|
|URI|_layouts/15/userphoto.aspx?size=S&username=【「手動でフローをトリガーします」アクションの「メールアドレス」】|

### 変数の値を設定していく
先ほど初期化した変数に値を設定していきます。
値は以下のように設定します。**値の部分がややこしいのでよく見比べて入力してください。**

|名前|値|
|-|-|
|名前|url|
|値|**data:【「ユーザーの写真のメタデータを取得します」アクションのContentType】;base64,base64(【「SharePoint に HTTP 要求を送信します」アクションのbody】)**|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/c5201d0c-dc92-94be-4353-eadf134d4895.png)


ポイントは、最後の**base64(【「SharePoint に HTTP 要求を送信します」アクションのbody】)**の部分になります。「SharePoint に HTTP 要求を送信します」アクションの「body」を関数base64()の中身に入れてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/10b1ad8f-8d2d-2a71-44c9-763df9a9fbf9.png)

しばらくすると、この部分の表示が変わることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/d8f20c1a-6eec-26cb-2b56-d72bbad094b7.png)


この部分にカーソルを重ねたときに、**body**('SharePoint に HTTP 要求を送信します')?['body']となっていることを確認してください。（**outputs**('SharePoint に HTTP 要求を送信します')?['body']**ではありません**）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/60d5f4bf-cfa8-8003-f3e5-7642b1dcdd02.png)


### アダプティブカードを投稿するアクションを設定する
「チャットやチャネルにアダプティブ カードを投稿する」アクションを選択します。
各項目を以下のように設定して下さい。

|名前|値|
|-|-|
|投稿者|Flow bot|
|投稿先|Channel|
|Team|【投稿したいチーム】|
|Channel|【投稿したいチャンネル】|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464309/20d7518e-bbb7-920c-e736-8c60e14cb102.png)


「メッセージ」の項目には今回アダプティブカードを設定しています。アダプティブカードは以下のような形になっています。複雑に見えますが、実はアダプティブカードデザイナーというものを使うことで、視覚的にカードをデザインし、コードを生成することができます。（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"
}
```
今回作成したアダプティブカードは以下のようなデザインになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/74d29911-68de-0090-9010-eb43c5ceab5c.png)




### 全体の確認
全体がこのような構成になっているか確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/8864b326-7f4a-080a-8eb0-2a361b1815af.png)


## 実際にフローを実行してみる
右上の「テスト」をクリックし、「手動」で「テスト」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/5dced22b-dd65-930f-8d77-ff67518fc7d2.png)


しばらくすると準備が完了するので、「メールアドレス」に画像を表示したい人のメールアドレスを入力し、「フローの実行」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/4d0aa8d7-93c3-9f17-9edb-a1fbef7d4a11.png)

Teams 上で、アダプティブカードが送信されていることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999895/51e0280c-8fa8-314a-d12a-419c83a7a693.png)


## 終わりに

こちらはあくまで一例ですが、間に Web アプリケーションなどを介さずに、 Power Automate からユーザーのプロフィール画像など、画像データを取得し、そちらを埋め込んだアダプティブカードを Teams に送信することができます。
つまり、アダプティブカードを使用することで、Teams 上の会話をより豊かにすることができます。
是非、こちらのTIPSを業務負担の軽減にお役立てください。

※本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。