はじめに
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のプラグインも試してみたいです