Power AutomateでTeamsにアダプティカードを投稿する方法

# :point_right: はじめに
Teamsでチャットするときに、ちょっとリッチなデザインの内容を投稿したいと思うことありませんか:thinking:
そんな悩みを解決してくれる機能がPower Automateで提供されています:open_mouth:
それこそアダプティカードです！
今回はアダプティカードの作成方法を紹介したいと思います
# :thinking: アダプティカードとは
アダプティカード（Adaptive Cards）は、Microsoftが提供する柔軟なカードベースのUIフレームワークです。これにより、開発者は視覚的にリッチで応答性の高いカードを作成し、複数のプラットフォームやデバイス上で統一されたデザインを提供できます。
### 主な特徴
1. 柔軟性 : JSON形式で記述され、カードのデザインやコンテンツを簡単にカスタマイズできます。
2. クロスプラットフォーム : Microsoft TeamsやOutlook、Windows通知、他のチャットボットやアプリケーションでも、同じカードを使って統一された表示を実現できます。
3. 応答性 : カードは、ユーザーの入力やアクションに応じて動的に変化し、インタラクティブなエクスペリエンスを提供します。
# :writing_hand: 手順
### 1. Power Automateにサインイン
まずOffice 365アカウントを使用して[Power Automate](https://www.microsoft.com/ja-jp/power-platform/products/power-automate)にサインインします。
### 2. Power Automateのホームページで「作成」をクリックし新しいフローを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/d72e0d4c-1803-9338-992e-94ffd7164488.png)
### 3.「インスタントクラウドフロー」をクリックし新しいフローを作成する。
手動で実行したいので、「インスタントクラウドフロー」でフローを新規作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/698d597d-6ba0-c0ea-ffba-b12ad843069a.png)

クリックすると、モーダルが表示されます。
「フローを手動でトリガーする」を選択し、右下の「作成」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/8b3fde76-eeaa-94be-3c81-7e27c0fd8a6a.png)

👇が表示されれば、フローをカスタマイズする準備は整いました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/26ea5417-e122-6543-0b9b-5d2310d4f05a.png)

### 4. アダプティカードを作成する
一旦、Power Automateでの作業は中断し、アダプティカードを作成します。
Microsoftは[アダプティカード専用の実行環境](https://adaptivecards.io/designer/)を準備してくれているので、そこで作業していきます。
今回はすでにテンプレートとして用意されているアダプティカードを使用します。
赤枠のJsonテキストは後ほど使うので、あらかじめコピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/b12a3437-08f6-3d09-63ca-300683ecd94f.png)


:::note info
他にも様々なテンプレートがあるので、参考にしたい方は[こちら](https://adaptivecards.io/samples/Agenda.html)を参照してください。
:::

### 5. フローを追加する
それでは仕上げに入ります！
Power Automateに戻り、アクションを追加します。
「＋」ボタンを押して、「Microsodt Teams」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/1ee17e37-319e-0853-0094-341472836357.png)

「チャットやチャネルにカードを投稿する」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/07ad9ce3-2935-5883-6c03-93ec4c49894c.png)

必須項目を入力します。
* 投稿先：フローボット
* 投稿先：Channel
* Team：投稿先のチーム
* Channel：投稿先のチャンネル
* Adaptive Card：4.でコピーしたJsonテキストを張り付ける
![スクリーンショット 2024-08-14 172539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/2fa335d4-9631-0808-5af3-2690ecf35a9b.png)
### 6. アダプティカードをTeamsに投稿する
「保存」ボタンを押下すると、「テスト」ボタンが押下できるようになるので、押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/eb2d91e0-3880-4233-ccaa-a0d1fc1dc3f4.png)

「テスト」ボタン押下後、指示に従って操作していくと、フローの実行が完了したことを確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/78bb64c8-fcd5-f924-db3b-445574a12c1c.png)

投稿先に指定したチャンネルを見に行くと、無事にアダプティカードが投稿されたことを確認できました！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788032/822f0e72-066e-56e4-7d30-712c69542165.png)
# :v: さいごに
今回はアダプティカードを作成しました。
カードのデザインはテンプレートを使用しましたが、他のテンプレートも観る限り、デザイン面でかなり融通の利くことが分かりました。
アダプティカードの作成には多少の慣れが必要かもしれもませんが、使いこなせれば見た目よし！機能性よし！のカードを作成できます:relaxed: