ツールとサンプル

カードデザイナー

カードをデザインするためのツールが必要ですか? 最高の選択肢としてhttps://adaptivecards.microsoft.com/designerのブラウザーベースのアダプティブカードデザイナーをご利用ください。

デザイナーをアプリに埋め込む

しかし、JavaScript ライブラリを使用して カードデザイナーを Web アプリに直接埋め込むことができる ときに、ユーザーをそこに送信する理由は何ですか。

開始するには、 adaptivecards-designer パッケージを確認してください。

スキーマの検証

スキーマ検証は、作成を容易にし、ツールを有効にする強力な方法です。

json でアダプティブカードを編集および検証するための完全な JSON スキーマファイルが用意されています。スキーマ URL はバージョン管理されており、アダプティブカードの新しいバージョンには対応する URL が付きます。

Visual Studio と Visual Studio Code では、 $schema 参照を含めることで、自動 Intellisense を取得できます。

オートコンプリート

Example

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Visual Studio Code の拡張子

アダプティブカードスタジオ

マーケットプレイス

AdaptiveCards Studio を使用すると、Visual Studio Code でカードを直接作成できます。拡張機能は、作業空間内のすべてのアダプティブカードを自動的に検出し、カードテンプレートとサンプルデータを簡単に編集できます。

Visual Studio Code Marketplace で詳細を確認してインストールする

アダプティブカードビューアー

編集しているカードをエディター自体の内部でリアルタイムで視覚化できる Visual Studio コード拡張機能が作成されました。

拡張子

インストールするには、Extensions Marketplace を開き、 アダプティブカードビューアーを検索します。

マーケットプレイス

Usage

アダプティブカード $schema プロパティを使用して .json ファイルを編集する場合は、 Ctrl+Shift+V Aを使用して表示できます。

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

オプション

AdaptiveCards ビューアーでは、次の Visual Studio Code 設定を使用できます。これは、[ユーザー設定] または [ワークスペースの設定] で設定できます。

{
    // Open or not open the preview screen automatically
    "adaptivecardsviewer.enableautopreview": true,
}

WPF ビジュアライザーのサンプル

WPF ビジュアライザーのサンプルプロジェクトでは、Windows コンピューター上の WPF/Xaml を使用してカードを視覚化できます。 hostconfig エディターは、ホスト構成設定を編集および表示するために組み込まれています。これらの設定を JSON として保存して、アプリケーションでのレンダリングに使用します。

wpf ビジュアライザー

WPF ImageRender サンプル

ImageRender サンプルプロジェクトでは、WPF を使用してコマンドラインから任意のカードを PNG に変換します。

Last updated on 2025-12-18