アダプティブ カード デザイナーについて説明するシリーズの記事です。
3回目は、アダプティブ カード デザイナーの操作方法についてご紹介します。
はじめに
本記事はアダプティブ カード デザイナーについて説明するシリーズ記事となっています。
過去の記事については以下をご覧ください。
また、本記事を執筆している2026年1月時点で、2つのアダプティブ カード デザイナーが存在しています。
本記事で記載するアダプティブ カード デザイナーのリンクは、以下からご確認ください。
アダプティブ カード デザイナーの操作方法
ここから、アダプティブ カード デザイナーの基本操作方法を説明します。
新規パーツ配置
アダプティブ カード デザイナーでは、「CARD ELEMENTS」にあるパーツを画面中央の作成部分へドラッグアンドドロップすることで、アダプティブ カードを作成できます。例えば、「CARD ELEMENTS」にあるTextBlockを、画面中央にドラッグアンドドロップで移動させます。
すると、画面中央に「New TextBlock」が配置されました。
パーツを追加して、上下に並べることも可能です。
以下は、ドラッグアンドドロップでRatingを追加した画像です。
「ActionSet」の場合、配置した後に設定を行う必要があります。
「Add an action」から、実行したいアクションを選択します。
「Add an action」を選択した画像は以下です。
配置位置修正
配置したパーツの位置を変更したい場合も、ドラッグアンドドロップで変更することが出来ます。
ここでは、先ほど追加したRatingをドラッグアンドドロップで、TextBlockの上に移動させます。
配置が入れ替わり、TextBlockの上にRatingが表示されました。
パーツ削除
不要になったパーツは、削除したいパーツを選択し、×を選択すると削除することが出来ます。
ここでは、先ほど追加したRatingを削除します。
Ratingが削除され、New TextBlockだけになりました。
詳細設定変更
各パーツを選択すると、ELEMENT PROPERTIESからパーツの詳細設定をすることが出来ます。
ここでは、TextBlockの表示内容を変更してみます。
TextBlockを選択すると、ELEMENT PROPERTIESに設定できる内容が表示されます。
CARD STRUCTUREから選択して表示させることも可能です。
TextBlockでは、Text部分で表示内容を編集することが出来ます。
日本語表記でも問題なく記載することが出来ます。
今回は、Text部分に「こんにちは。お元気ですか？」と入力します。
アダプティブ カードを見ると、「こんにちは。お元気ですか？」と表示されています。
終わりに
本記事では、アダプティブ カード デザイナーの操作方法について、ご紹介しました。
次の記事で、実際に例を用いてアダプティブ カードを作成する方法をご紹介していきます。
