- [アーティクル]
-
-
カードを設計するためのツールが必要ですか? ブラウザーベースのアダプティブ カード デザイナーをお探しでしたら、https://adaptivecards.io/designer をご覧ください
JavaScript ライブラリを使用して、Web アプリにカード デザイナーを直接埋め込むことができるため、ユーザーに上記のページを紹介する必要はありません。
adaptivecards-designer パッケージを確認して、作業を開始しましょう。
スキーマの検証は、作成を容易にし、ツールを有効にするための強力な手段です。
json でアダプティブ カードを編集および検証するための JSON スキーマ ファイルが提供されています。 スキーマの URL はバージョン管理されており、新しいバージョンのアダプティブ カードに対応する URL があることに注意してください。
Visual Studio および Visual Studio Code では、$schema
リファレンスを含めることにより、自動の Intellisense を取得できます。
{
"$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": []
}
Adaptive Cards Studio を使用すると、Visual Studio Code で直接カードを作成できます。 この拡張機能では、作業領域にあるすべてのアダプティブ カードが自動的に検出されるので、カード テンプレートとサンプル データを簡単に編集できます。
詳細を確認し、Visual Studio Code Marketplace からインストールする
エディター自体の中で、編集中のカードをリアルタイムで視覚化できるようにする Visual Studio Code の拡張機能を作成しました。
インストールするには、拡張機能のマーケットプレースを開き、Adaptive Card Viewer を検索します。
アダプティブ カードの $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 ビジュアライザーのサンプル プロジェクトにより、Windows マシンで WPF/Xaml を使用してカードを視覚化できます。
hostconfig
エディターはホストの構成設定を編集および表示するために組み込まれています。 これらの設定を JSON として保存し、アプリケーションでのレンダリングに使用します。
ImageRender のサンプル プロジェクトでは、WPF を使用して、コマンド ラインから任意のカードを PNG に変換します。