アダプティブカードデザイナーの使い方：その4　アダプティブカードを新規作成してみる

アダプティブカードデザイナーについてご紹介するシリーズ記事です。

4回目は、アダプティブカードデザイナーを使って、実際にアダプティブカードを作成してみます。

はじめに
作成するアダプティブカードイメージ
作成準備
パーツの配置
パーツの設定方法
それぞれの設定部分
作成したアダプティブカードのJSON確認、コピー
終わりに

はじめに

過去のシリーズ記事については以下をご覧ください。

また、本記事を執筆している2026年1月時点で、2つのアダプティブカードデザイナーが存在しています。

本記事で記載するアダプティブカードデザイナーのリンクは、以下からご確認ください。

adaptivecards.microsoft.com

作成するアダプティブカードイメージ

以下のような、アンケート形式のアダプティブカードを作成します。

「選んでください」を選択すると、以下のように表示されます。

作成準備

アダプティブカードデザイナーを開きます。

開いた時点で、アダプティブカードが新規作成出来る状態になっています。

パーツの配置

以下、3つのパーツを利用しました。

TextBlock
Input.ChoiceSet
Action.Submit

記載した順番で、そのまま配置しています。

パーツの設定方法

アダプティブカードデザイナー上で、画面から設定したいパーツを選択します。

※ CARD STRUCTURE部分から設定したいパーツを選択する事も出来ます

選択すると、ELEMENT PROPERTIESに選択したパーツのプロパティが表示されるので、ここから詳細設定を行っていきます。

それぞれの設定部分

ここから、それぞれのパーツでの設定値を記載します。

TextBlock

TextBlockは、アダプティブカード内にテキストを表示させることが出来ます。

下記画像、赤枠部分の設定です。

今回は以下3つの設定を行いました。

表示テキストの変更
文字サイズの変更
色の変更

表示テキストの入力

表示テキストは「TextBlock」内の「Text」から変更出来ます。

今回は「懇親会アンケート」と入力します。

文字サイズ、色の変更

文字サイズと色は「Style」から変更出来ます。また、文字サイズは「Size」、色は「Color」で設定出来ます。

今回は文字サイズを「ExtraLarge」、色を「Good」に設定します。

Input.ChoiceSet

Input.ChoiceSetは、アダプティブカード内で選択肢を表示させることが出来ます。

下記画像、赤枠部分の設定です。

今回は以下3つの設定を行いました。

表示テキストの変更
IDの設定
選択肢と選択肢数の追加

表示テキストの変更、IDの設定

表示テキストは「Input.ChoiceSet」内の「Label」と「Placeholder」から設定出来ます。「Label」は選択肢外のテキスト、「Placeholder」は選択肢にデフォルトで表示されるテキストです。

IDは「Id」から設定出来ます。IDを明示的に設定しないと、回答結果を格納することが出来ないため、IDを設定する必要があります。

参考：Power Automate：「アダプティブカードを投稿して応答を待機する」で応答情報が取得できない場合の対応策 - JBS Tech Blog

今回は「Label」に「次回の懇親会では、どのようなメニューを食べたいですか？」、「Placeholder」に「選んでください」、「Id」に「choice」と設定します。

選択肢と選択肢数の追加

選択肢と選択肢数の追加させるのは、「Choices」から設定出来ます。

まず、「Name」部分には、表示させる選択肢を記載します。

続いて、「Value」部分に選択した回答と紐づける任意の値を記載します。ここで設定した内容が実際にデータとして送信されるため、それぞれの回答に対して一意の値で設定します。

なお、デフォルトで選択肢の数は2つですが「Add a new choice」を選択すると、選択肢の数を増やすことが出来ます。

今回は「Add a new choice」を選択して、選択肢の数を4つにします。また、「Name」と「Value」は同じ値で設定します。*1

Action.Submit

Action.Submitは、ユーザーが選択した回答を送信することが出来ます。

このパーツを使うことでデータを送信できるため、今回のようにアンケート形式でアダプティブカードを作成する際は、Action.Submitを使うようにしてください。

下記画像、赤枠部分の設定です。

今回は、表示テキストのみ「回答を送信」に変更します。

表示テキストは「Action.Submit」内の「Title」から設定出来ます。

作成したアダプティブカードのJSON確認、コピー

以上で、アダプティブカードの作成は終了しました。最後に、作成したアダプティブカードのJSONを確認します。

「CARD PAYLOAD EDITOR」に作成したアダプティブカードのJSONが表示されています。

選択してJSONをコピーすることも出来ますし、画面上部の「Copy card payload」ボタンを選択してコピーすることも出来ます。

コピーしたJSONを用いて、ご自身が利用したいところでアダプティブカードを使ってみてください。

参考までに、今回作成したアダプティブカードのJSONは以下です。

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "懇親会アンケート",
            "size": "ExtraLarge",
            "color": "Good"
        },
        {
            "type": "Input.ChoiceSet",
            "label": "次回の懇親会では、どのようなメニューを食べたいですか？",
            "choices": [
                {
                    "title": "和食",
                    "value": "和食"
                },
                {
                    "title": "洋食",
                    "value": "洋食"
                },
                {
                    "title": "中華",
                    "value": "中華"
                },
                {
                    "title": "何でも良い",
                    "value": "何でも良い"
                },
                {}
            ],
            "placeholder": "選んでください",
            "id": "choice"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "回答を送信"
        }
    ]
}