【Power Automate】Teamsでアダプティブカードを利用する方法

2023.02.21
【Power Automate】Teamsでアダプティブカードを利用する方法

こんにちは、MS開発部の加藤です。

今回はTeams上で使えるアダプティブカードについて
作成方法から、利用方法までご紹介していきます。

アダプティブカードは容易に画像や入力フォーム、ボタンが添付できるため、
簡単なアンケートや申請フォームなどをカスタマイズして作成することが可能です。

今回は実際に、Power Automateを利用した簡単な出張申請アダプティブカードの作成方法と利用方法、
SharePointリストに申請内容を保存する方法をご紹介していきたいと思います。

※アダプティブカードの作成には、Power Automateを利用するため
Power Automate(クラウドフロー)の利用権がある
Microsoft 365 E3以上や、PowerAutomate per user planなどが必要になります。

アダプティブカードとは

まずアダプティブカードとは、
TeamsやOutlook上で使えるメッセージのデータフォーマットです。
HTMLやCSSを使わず、JSON形式で作成しますが、※アダプティブカードデザイナーを用いることで
JSONの知識がなくても作成することが可能です。

Botやメッセージの拡張機能を介して、ダイアログのような形でチャットに表示することが可能です。
テキストや入力フォーム、ボタンの挿入などカードをカスタマイズすることで
用途に合ったアダプティブカードを作成することが可能です。

JSONの知識がなくても、アダプティブカードのデザインを視覚的に作成することができるツールです。
Power Automateの「チャットやチャネルにアダプティブカードを投稿する」アクション等は、
JSONの入力が必要なため、知識がない方はアダプティブカードデザイナーの利用をお勧めします。
利用方法については、
今回ご紹介するPower Automateの「作成ボックスから(V2)」トリガーのアダプティブカードの作成と
酷似しているので、是非アダプティブカードの作り方を参考にしてみてください。

アダプティブカードの作り方

今回はPower Automateの「作成ボックスから(V2)」トリガーを使用して、
Teamsのチャット上でアダプティブカードを表示し、
SharePointリストに申請内容を保存するフローを作成していきます。
※事前にデータベースとなるSharePointリストを作成しておきます。

①Teamsを開き、三点リーダー > Power Automateを選択してください。
アダプティブカードの作り方

②「+新しいフロー」を選択してください。
アダプティブカードの作り方

③「+一から作成」を選択してください。
アダプティブカードの作り方

④トリガー「作成ボックスから(V2)」を選択してください。
アダプティブカードの作り方

⑤「アダプティブカードの作成」を選択してください。
アダプティブカードの作り方

⑥「アンケートのお願い」というアダプティブカードの見本が用意されています。
作成画面は以下のようになっています。黄色枠にアダプティブカードを作成してください。
オレンジ枠:配置できるエレメント
黄色枠:アダプティブカードのデザイン
水色枠:カードに配置しているエレメントのプロパティ(選ぶと表示されます)
アダプティブカードの作り方

⑦新規で作成する場合は「New card」を選択してください。
アダプティブカードの作り方

⑧CARD ELEMENTSから必要なエレメントをドラッグ&ドロップしてデザインに挿入してください。

今回は、出張申請アダプティブカードとして以下の項目を挿入しました。
アダプティブカードのデザインが完成したら「カードの保存」を選択してください。
※入力フォームを挿入する場合は、水色枠からIdの設定をしてください。
アダプティブカードの作り方

アダプティブカードの作り方

⑨「項目の作成」アクションを追加してください。
アダプティブカードの作り方

⑩データベース用に作成したSharePointリストを選択し、各項目のIdを列ごとに指定していきます。
アダプティブカードの作り方

以上でフローの作成が完成です。

アダプティブカードの利用方法

次に、先ほど作成したアダプティブカードを実際に使っていきたいと思います。

①Teamsでチャットを開きます。
メッセージ作成ボックス下の三点リーダー>「Workflows」を選択してください。
アダプティブカードの利用方法

【Workflowsが表示されない場合】
Workflowsは追加しないと表示されません。
アプリ > Workflowsを選択 > 追加を選択してください(追加には管理者の許可が必要)
アダプティブカードの利用方法

②先ほど作成したフローが表示されるので選択してください。
アダプティブカードの利用方法

③先ほど作成したアダプティブカードが表示されるので項目を入力後、送信します。
アダプティブカードの利用方法

④SharePointリストには、以下のように申請内容が保存されています。
アダプティブカードの利用方法

まとめ

今回は、Power Automateを使ってTeamsでアダプティブカードを利用する方法をご紹介しました。

アダプティブカードは、専門的な知識がなくても好きなようにカスタマイズすることが可能なため、
Power Automateフローとの組み合わせで、
設定された時間にアラートが表示されるアダプティブカードや、
出退勤の打刻ができるアダプティブカード、誕生日のお祝いができるアダプティブカードなど
様々なパターンが作れるのが最大の魅力です。

是非、皆さんもアダプティブカードを試してみてください!

ここまでご愛読いただきありがとうございました。
Teams、Power Automateなどでお困りのことがございましたら是非お気軽にお問い合わせください!

以上、最後までご愛読いただき
ありがとうございました。

お問い合わせは、
以下のフォームへご連絡ください。

お問い合わせ

PAGETOP