次の方法で共有

ツールとサンプル

  • [アーティクル]

カード デザイナー

カードを設計するためのツールが必要ですか? ブラウザーベースのアダプティブ カード デザイナーをお探しでしたら、https://adaptivecards.io/designer をご覧ください

designer screenshot

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

JavaScript ライブラリを使用して、Web アプリにカード デザイナーを直接埋め込むことができるため、ユーザーに上記のページを紹介する必要はありません。

adaptivecards-designer パッケージを確認して、作業を開始しましょう。

スキーマの検証

スキーマの検証は、作成を容易にし、ツールを有効にするための強力な手段です。

json でアダプティブ カードを編集および検証するための JSON スキーマ ファイルが提供されています。 スキーマの URL はバージョン管理されており、新しいバージョンのアダプティブ カードに対応する URL があることに注意してください。

Visual Studio および Visual Studio Code では、$schema リファレンスを含めることにより、自動の Intellisense を取得できます。

bad

autocomplete

例

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

Visual Studio Code の拡張機能

Adaptive Cards Studio

marketplace

Adaptive Cards Studio を使用すると、Visual Studio Code で直接カードを作成できます。 この拡張機能では、作業領域にあるすべてのアダプティブ カードが自動的に検出されるので、カード テンプレートとサンプル データを簡単に編集できます。

詳細を確認し、Visual Studio Code Marketplace からインストールする

Adaptive Card Viewer

エディター自体の中で、編集中のカードをリアルタイムで視覚化できるようにする Visual Studio Code の拡張機能を作成しました。

extension

インストールするには、拡張機能のマーケットプレースを開き、Adaptive Card Viewer を検索します。

marketplace

使用

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

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

オプション

AdaptiveCards Viewer に対して、以下の Visual Studio Code 設定を使用できます。 これは、[ユーザー設定] または [ワークスペースの設定] で設定できます。

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

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

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

wpf visualizer

WPF ImageRender のサンプル

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