はじめてのアダプティブカードデザイナー

はじめに

Teamsに投稿するリッチなメッセージ、アダプティブカードを作成する場合、
JSON形式ですし、作成しているときに「今どんな感じなんだろう。。。」と心配になります。
そんなとき、アダプティブカードデザイナーを使用すると簡単にアダプティブカードを作れます。

使い方

とりあえずURLにアクセスする

これがURLをたたいた時の初期表示でした。ごちゃってしています。

・黄色：配置できるエレメント
・オレンジ：アダプティブカードのデザイナー
・黄緑：作ったアダプティブカードのソース
・水色：カードに配置しているエレメント。選ぶと右にプロパティが表示される。
・ピンク：アダプティブカードに渡すサンプルデータ。

新しいアダプティブカードを作成する

左上の「New Card」を選択

テンプレートを選択

今回は1から作ってみたいので中央の「Blank card」を選択します

アプリを選択する

今回はTeamsに投稿するので、Microsoft Teams - Lightを選択します。

こんな画面になりました

エレメントを配置する

画面左側のエレメントを選んで、配置していく
テキストと画像を配置した例

エレメントのプロパティを設定する

お祝いカードを作っていきます。

TextBlock

TextBlockを選択すると、プロパティがTextBlockのプロパティになります。

文字の色やサイズなど変更できます

Image

設定したい画像のURLをURLプロパティに設定します
この画像はMicrosoftの公式にもリンクがありましたGIPHYから取得しました。

できあがり！

CARD PAYLOAD EDITORの部分のソースをコピーして、
Power Automateにコピペしてください。

ちなみに今回作ったカードのソースは以下の通りです。

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "HAPPY BIRTHDAY！！",
            "wrap": true,
            "color": "Accent",
            "weight": "Bolder",
            "size": "ExtraLarge",
            "fontType": "Monospace",
            "horizontalAlignment": "Center"
        },
        {
            "type": "Image",
            "url": "https://media.giphy.com/media/L1bPUAMXIqXpPoWk9R/giphy.gif"
        }
    ]
}

おわりに

次はVisual Studio Codeのプラグインも試してみたいです