次の方法で共有


アダプティブ カードテンプレート

アダプティブ カードの 作成再利用、共有に役立つ新しいツールのプレビューを 共有 することに興奮しています。

Von Bedeutung

2020 年 5 月リリース候補破壊的変更

テンプレート リリース候補には、以前のパッケージを使用している場合に注意する必要がある、いくつかの重大な変更が含まれています。 詳細については、以下をご覧ください。

2020 年 5 月時点の破壊的変更

  1. バインド構文が {...} から ${...}に変更されました。
    • 例: "text": "Hello {name}" は次のようになります。 "text": "Hello ${name}"
  2. JavaScript API にはEvaluationContextオブジェクトが含まれなくなりました。 expand関数にデータを渡すだけです。 詳細については、 SDK のページ を参照してください。
  3. .NET API は、JavaScript API とより密接に一致するように再設計されました。 詳細については、 SDK のページ を参照してください。

テンプレートが役立つ方法

テンプレートを使用すると、アダプティブ カードのレイアウトからデータを分離できます。

カードを 1 回設計し、実際のデータを入力するのに役立ちます

現在、 アダプティブ カード デザイナー を使用してカードを作成し、その JSON を使用して ペイロードに動的コンテンツを設定することは不可能です。 これを実現するには、JSON 文字列をビルドするカスタム コードを記述するか、オブジェクト モデル SDK を使用してカードを表す OM をビルドし、それを JSON にシリアル化する必要があります。 どちらの場合も、デザイナーは 1 回限りの一方向操作であり、後でコードに変換した後でカードデザインを簡単に調整することはできません。

それはワイヤー上の伝達をより小さくする

テンプレートとデータを クライアント上で直接組み合わせることができる世界を想像してみてください。 つまり、同じテンプレートを複数回使用する場合や、新しいデータで更新する場合は、新しいデータをデバイスに送信するだけで、同じテンプレートを何度も再利用できます。

指定したデータから見栄えの良いカードを作成するのに役立ちます

アダプティブ カードは優れていると思いますが、ユーザーに表示するすべてのアダプティブ カードを記述する必要がない場合はどうでしょうか。 テンプレート サービス (以下で説明) を使用すると、あらゆる種類のデータにテンプレートを投稿、検出、共有できる世界を作成できます。

独自のプロジェクト、組織、またはインターネット全体で共有します。

AI やその他のサービスによってユーザー エクスペリエンスが向上する可能性がある

データをコンテンツから分離することで、AI やその他のサービスが、表示されるカード内のデータに対して "推論" するための扉を開き、ユーザーの生産性を高めたり、物事を見つけるのに役立ちます。

アダプティブカードのテンプレートとは何ですか?

これは、3 つの主要なコンポーネントで構成されています。

  1. テンプレート言語は、テンプレートの作成に使用される構文です。 デザイナーでは、"サンプル データ" を含めることで、デザイン時にテンプレートをプレビューすることもできます。
  2. テンプレート SDK は、サポートされているすべてのアダプティブ カード プラットフォームに存在します。 これらの SDK を使用すると、バックエンドまたはクライアント上で直接、実際のデータをテンプレートに設定できます。
  3. テンプレート サービスは概念実証サービスであり、すべてのユーザーが一連の既知のテンプレートを検索、投稿、共有できます。

テンプレート言語

テンプレート言語は、アダプティブ カード テンプレートの作成に使用される構文です。

次の例に従って、新しいタブを開いて次の操作を行います。

https://adaptivecards.io/designer

[ プレビュー モード ] ボタンをクリックして、デザイン モードとプレビュー モードを切り替えます。

デザイナーのスクリーンショット

新しく更新されたデザイナーでは、テンプレートの作成と、デザイン時にカードをプレビューするための サンプル データ の提供のサポートが追加されました。

次の例を カード ペイロード エディター ウィンドウに貼り付けます。

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

次に、以下の JSON データを サンプル データ エディターに貼り付けます。

サンプル データ は、実際のデータが渡されたときに実行時にカードがどのように表示されるかを正確に確認するのに役立ちます。

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

[ プレビュー モード ] ボタンをクリックします。 上記のサンプル データに従ってカードのレンダリングが表示されます。 サンプルデータを自由に調整し、リアルタイムでカードの更新を見てください。

これで、初めてのアダプティブ カード テンプレートを作成できました。 次に、テンプレートに実際のデータを設定する方法について説明します。

テンプレート言語の詳細を確認する

SDK のサポート

テンプレート SDK を使用すると、テンプレートに実際のデータを設定できます。

現時点では、.NET と NodeJS でテンプレート SDK を使用できます。 時間の経過と同時に、iOS、Android、UWP など、残りのすべてのアダプティブ カード プラットフォーム用のテンプレート SDK をリリースします。

プラットホーム パッケージ 取り付ける ドキュメンテーション
JavaScript npm install npm install adaptivecards-templating ドキュメント
.NET Nuget のインストール dotnet add package AdaptiveCards.Templating ドキュメント

JavaScript の例

次の JavaScript は、テンプレートにデータを設定するために使用される一般的なパターンを示しています。

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

C# の例

次の C# は、テンプレートにデータを設定するために使用される一般的なパターンを示しています。

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

テンプレート SDK の詳細を確認する

テンプレートサービス

アダプティブ カード テンプレート サービスは概念実証サービスであり、すべてのユーザーが一連の既知のテンプレートを検索、投稿、共有できます。

これは、データを表示したいが、カスタムアダプティブカードを作成したくない場合に便利です。

テンプレートを取得するための API は簡単ですが、実際には、データを分析し、自分に適したテンプレートを見つける機能など、より多くのサービスが提供されます。

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

すべてのテンプレートは GitHub リポジトリに格納されたフラットな JSON ファイルであるため、他のオープン ソース コードと同様に誰でも投稿できます。

カード テンプレート サービスの詳細

次の内容とフィードバックの送信

テンプレートの作成とデータからのプレゼンテーションの分離は、"アプリとサービス間のエコシステムによって標準化されたコンテンツ交換" というミッションに完全に近づきます。 この分野では多くのコンテンツを提供する予定ですので、楽しみにしていてください。そして、それがどのように機能しているかをGitHubでお知らせください。