松本典子の「はじめよう！Azure Logic Apps／Power Automateでノーコード／ローコード」第22回

TeamsやOutlookに送信できる“情報カード”でリッチなコミュニケーションを実現する

「アダプティブカード」の作り方とPower Automateからの送信

2023年02月02日 08時00分更新

文● 松本典子　編集● 大塚／TECH.ASCII.jp

　こんにちは、Microsoft MVP（Azure / Business Applications）の松本典子です。

　今回は、「Microsoft Teams」や「Microsoft Outlook」などのコミュニケーションプラットフォーム上でさまざまな情報をグラフィカルに表示できる「アダプティブカード（Adaptive Cards）」の作り方と、「Power Automate」から送信する基本的な方法についてご紹介します。

1. アダプティブカードとは

　アダプティブカードは、プラットフォームに依存せず、情報ブロックを共有／表示するための方法です。botやメッセージの拡張機能を介してスレッドに追加でき、テキスト、グラフィック、ボタンを使用して、対象ユーザーにリッチなコミュニケーションを提供します。作成時は複雑なCSSやHTMLのカスタマイズなどは不要で、JSON形式で作成可能です。

アダプティブカードの表示例

　たとえば、アダプティブカードがTeamsなどの特定のホストに配信されると、JSONはそのホストに適応するネイティブUIに自動変換されて表示されます。これにより、プラットフォーム側の一貫したUIで情報を表示できるようになります。

2. アダプティブカードデザイナー

　リッチなコンテンツを手軽に作成できるアダプティブカードですが、決められた書式に沿ってJSONを記述する必要があります。「複雑なCSSやHTMLの記述が不要」とは言っても、JSONを自力で記述するのはなかなかに大変です。

アダプティブカードデザイナーの画面

　そこで「アダプティブカードデザイナー」という、ブラウザで見た目を確認しながらアダプティブカードが作成できるツールが用意されています。

●アダプティブカードデザイナー（マイクロソフト）

2-1. アダプティブカードデザイナーの使い方

アダプティブカードデザイナーの設定

　アダプティブカードデザイナーは無料かつ登録なしで、すぐに使えます。今回はTeams向けのアダプティブカードを作成してみましょう。

　アダプティブカードデザイナーのページを開いたら、まずは上部のメニューを設定します。

　（1）Select host app：一覧から「Microsoft Teams」を選択
　（2）Target version：デフォルトのまま（利用時に適宜変更）

新しいアダプティブカードの作成

　上部メニューの「New Card」をクリックし、アダプティブカードを新規作成してみましょう。

新規カード選択画面

　上図のような画面が開きます。今回はテンプレートをベースに新規カードを作成したいと思いますので、下にスクロールして「Explore」のテンプレートを見ていきます。

Simple Feedbackテンプレート

　さまざまなテンプレートが用意されていますが、今回は一番シンプルな、テキストのみのテンプレート「Simple fallback」をクリックして利用します。

2-2. アダプティブカードのデザイン変更

アダプティブカードの編集

　選択した「Simple Feedback」テンプレートがデザインエリアに表示されます。

　「Fallback test:」と書かれている部分をクリックすると、画面右端に「ELEMENT PROPERTIES」というウィンドウが表示されます。「Initially visible」チェックボックスの下の「Text」を編集することで、最初に表示されるテキストを変更できます。今回は「アダプティブカードテスト」と入力します。

要素を追加する

　アダプティブカードに要素を追加したい場合は、画面左の「CARD ELEMENTS」から項目をドラッグ＆ドロップすることで追加できます。

　たとえば「TextBlock」は、テキスト型のデータを入力できます。今回はTextBlockを追加して、「この内容がTeamsに投稿されます。」と入力してみます。

JSONをコピーする

　作成したアダプティブカードのJSONコードは、画面下の「CARD PAYLOAD EDITOR」に表示されます。この後、Power Automateで利用するので、JSON全文を選択してコピーします。

3. Microsoft Teamsでアダプティブカードを利用するための準備

　今回は、Power AutomateからMicrosoft Teamsへアダプティブカードを送信します。そのためには、事前にMicrosoft Teamsの「アプリ」でPower Automateの連携アプリをインストールしておく必要があります。

Microsoft Teamsの「アプリ」で追加

　Microsoft Teamsの左側のメニューにある「アプリ」をクリックし、検索に「Power」と入力すると、リストに「Power Automate」が表示されるのでクリックします。

Power Automateのインストール

　次の画面で「追加」をクリックすると、Microsoft TeamsにPower Automateがインストールされます。

　また、アダプティブカードを作成する場合は、以下の点に注意してください。

　・Power Automateの「既定（デフォルト）」環境にしか作れない^※注
　・Power Automateアプリの可用性が必要なため、Teams管理センターで「許可」状態を確認しておく

※注：厳密に言えば、アダプティブカードを投稿する「アクション」については環境を問わないが、アダプティブカードの「トリガー」を使う場合は既定の環境でしか動かない。（2023/02/10 追記）

4. アダプティブカードをTeamsに投稿する

ワークフローの全体図

　ワークフローの全体図は上のようになります。今回は、「モバイルフローのボタン」をトリガーにします。

4-1. トリガーの設定

トリガーの設定

　タブの「組み込み」を選択し、「モバイルフローのボタン」を選択します。
「手動でフローをトリガーします」を選択します。

4-2. アクションの設定：Microsoft Teams

アクションの追加

　検索窓に「Teams」と入力し「Microsoft Teams」をクリックし、アクションの一覧から「チャットやチャネルにアダプティブカードを投稿する」を選択します。

アクションの設定

　（1）投稿者：今回は「フローボット」を選択
　（2）投稿先：「Channel」を選択
　（3）Team：投稿先の「チーム」を選択
　（4）Channel：投稿先の「チャネル」を選択（今回は事前に「PowerAutomateテスト」チャネルを作成済み）
　（5）Adaptive Card：アダプティブカードデザイナーで作成したJSONをコピー＆ペースト

　ここまで入力できたらワークフローの名前を設定して「保存」をクリックします。