【Power Automate】初心者向けアダプティブカードの作り方【Teams】

この記事でやること

アダプティブカードとは？ （Teams）

TeamsやOutlookで共通して使えるメッセージのデータフォーマットのひとつです。JSONによって表現します。アダプティブカードデザイナー（後述）を使えば、HTMLやCSSの知識がなくても直感的に作成できます。

▲こんな感じで画像付きでアクションボタンが付いたリッチなメッセージカードを作成できます。

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "speak": "Tom's Pie is a Pizza restaurant which is rated 9.3 by customers.",
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 2,
// ～　以下略　～

▲カードの実体はJSONです。

アダプティブカードを使うメリット

アダプティブカードデザイナーとは？

アダプティブカードデザイナー（Microsoft Adaptive Cards Designer）

アダプティブカードデザイナーの画面の見方と説明

プレビュー画面

公式の呼び方が不明だったので当サイトではプレビュー画面と呼ぶことにします。現在のカードの見た目が表示される画面です。このプレビュー画面にカード要素ペインから部品をドラッグ&ドロップで部品を付けたしながらカードを作成します。

Card Elements（カード要素ペイン）

カードの中で使用できる要素（部品）群が表示された画面です。ここから使いたい部品を選んでプレビュー画面にドラッグ&ドロップするとカード要素を追加できます。

Card Structure（カード構造ペイン）

現在作成中のカードに使用しているカード要素が一覧される画面です。

要素のトップは必ずAdaptiveCardになります。その中にTextBlockなど現在作成中のカード要素が表示されていることが分かります。特定のカード要素を選択して何かする時はここをクリックして選択することができます。このペインから要素を削除したり並べ替えたりすることはできません。

Element Properties（要素のプロパティ画面）

カード要素のプロパティ画面です。

この画面で現在選択中のカード要素のパラメータを調整します。カード要素によって調整できるパラメータは異なります。例えば、画像ブロックでしたら画像URLや画像サイズなどを調整できます。テキストブロックでしたらフォントサイズや水平配置やテキストなどを調整できます。

Sample Data Editor（サンプルデータエディタ）

サンプルデータを張り付ける画面です。

Power Automateから使用するアダプティブカードを作成する範囲では使わないかと思います。私も使ったことがないため説明は省略させていただきます。

Card Payload Editor（カードペイロードエディタ）

JSONが表示される画面です。プレビュー画面でドラッグ&ドロップでカードを作成していくと、ここにJSONがリアルタイムで自動出力されます。カードのデザインとプロパティがすべて完成したら、ここのJSONをコピーしてPower Automateに渡します。このペインのデータを直接手で編集することもできますが、知識がない中で触っているとデータが壊れてしまう可能性もありますので、慣れないうちはやめた方が良いかなと思います。

ツールバー

• New Card：カードを新規作成します。
• Select Host App：どのアプリケーション用のカードを作成するのかを選択します。Teams用のカードを作成する場合はTeamsを選択します。
• Host App Docs：アプリケーションのドキュメントを確認します。
• Templating Docs：テンプレート言語のドキュメントです。
• Undo,Redo：アンドゥ、リドゥをします。
• Copy card Payload：JSONをクリップボードにコピーします。
• Preview Mode：現在のカードをプレビューします。実際のTeamsなどのアプリケーション投稿されたときの見た目に近い感じで表示されます。プレビューモードでは、カードの編集はできません。

▲ツールバー右側の説明です。

• Target version：アダプティブカードのバージョンを選択できます。

アダプティブカードデザイナーで作業を保存するには？

アダプティブカードデザイナーは、作業を途中保存することができません。
一旦作業を中断し、時間経過後に再開したい場合はカードペイロードエディタのJSONを自分でどこかに保存しておき、作業再開時に カードペイロードエディタ にJSONを張り付けることで継続して作業ができます。

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

Power Automateでフローを作成します。

アダプティブカード サンプル

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "来週のスケジュール送信依頼",
            "wrap": true,
            "size": "ExtraLarge",
            "color": "Attention",
            "isSubtle": true
        },
        {
            "type": "TextBlock",
            "text": "お疲れさまです。来週のスケジュールを送信お願いします。",
            "wrap": true
        },
        {
            "type": "Image",
            "url": "http://1.bp.blogspot.com/-gqRVYh1GDtk/U-8HCTnbliI/AAAAAAAAk-I/MHQDeHu8Qso/s800/business_ojigi_woman.png",
            "size": "Large",
            "horizontalAlignment": "Center"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.OpenUrl",
                    "title": "画像ページを開く",
                    "url": "http://www.irasutoya.com/2014/09/blog-post_894.html"
                }
            ]
        }
    ]
}

▲画像はいらすとやさんからお借りしています。

（番外編）TeamsのIncoming Webhook宛てにアダプティブカードを投稿する方法

アダプティブカードのその他の表現方法

アダプティブカードはMarkdown記法に対応しています。Markdownでテキストの装飾をしたり、テキストリンクを挿入したりすることができます。

参考：Microsoftドキュメント
https://docs.microsoft.com/ja-jp/adaptive-cards/authoring-cards/text-features

アダプティブカードのエラー

Teamsに対応していないカード要素があります。

▲アダプティブカードの一部のカード要素などはTeamsに対応していないものもあるようです。上の図はmediaタイプの要素を含むアダプティブカードを投稿したときのエラーメッセージです。

「We’re sorry this card couldn’t be displayed.」

▲「We’re sorry this card couldn’t be displayed.」というメッセージが表示された場合はアダプティブカードのバージョンを確認してください。アダプティブカードデザイナーを開いたときのデフォルトで適用されるバージョンは1.5ですが、1.5のまま作成してしまうとTeamsで表示できないことがありました（2021/10/24）。この場合はバージョンを下げてアダプティブカードを作成してみてください。

Teamsで全幅（フルワイド）表示にするには？

テキストを折り返したくないときなど、カードを全幅表示にしたい時があるかもしれません。Teamsで全幅表示にするには、下記のように"msTeams": { "width": "full" }という文言をJSONに含めます。現在アダプティブカードデザイナーのGUI操作でこの文言を含めることはできないようなので手入力で挿入する必要があります。

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "msTeams": {
        "width": "full"
    },
    "body": [
以下省略

widthキーワードを挿入しあとにアダプティブカードデザイナーでの編集をつづけてしまうと手入力した部分が消えてしまうことがあるかもしれません。カードデザインが完成した後にwidthキーワードを挿入した方がいいかもしれません。

アダプティブカードのドキュメント

• Microsoft Teams のカードの書式設定

まとめ

Power Automate学習教材

Microsoft 365/ Power Automate / Power Platform / Google Apps Script…