作業の開始

  • [アーティクル]

アダプティブ カードは、JSON でシリアル化されたカード オブジェクト モデルです。

アダプティブ カードの構造

カードの基本的な構造は次のとおりです。

  • AdaptiveCard - ルート オブジェクトは、要素マークアップ、アクション、読み上げ方法、レンダリングに必要なスキーマのバージョンなど、AdaptiveCard 自体を記述します。
  • body - カードの本体は elements と呼ばれる構成要素でできています。 さまざまな種類のカードを作成するために、ほぼ無限の配置で要素を構成することができます。
  • actions - 多くのカードには、ユーザーが実行できる一連のアクションがあります。 このプロパティは、通常は下部の "アクション バー" にレンダリングされるアクションを記述します。

カードの例

このサンプル カードには、1 行のテキストとそれに続く画像が含まれています。

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type プロパティ

すべての要素には、それがどのような種類のオブジェクトであるかを識別する type プロパティがあります。 上のカードを見てみると、2 つの要素 TextBlock と Image があることがわかります。

アダプティブ カードのすべての要素は垂直方向に積み重ねられ、その親の幅にまで広がります (HTML の display: block を考えてください)。 ただし、ColumnSet を使用すれば、コンテナーを並べて列を作成できます。

アダプティブ要素

最も基本的な要素は次のとおりです。

  • TextBlock - テキストの見た目を制御するプロパティ付きのテキスト ブロックを追加します
  • Image - 画像の見た目を制御するプロパティ付きの画像を追加します

コンテナー要素

カードは、子要素のコレクションを配置するコンテナーを持つこともできます。

  • Container - 要素のコレクションを定義します
  • ColumnSet/Column - 列のコレクションを定義します。各列はコンテナーです
  • FactSet - ファクトのコンテナー
  • ImageSet - 画像のコレクションに対して UI で適切なフォト ギャラリー エクスペリエンスを表示できるようにする画像のコンテナー。

入力要素

入力要素を使用すると、単純なフォームを構築するためのネイティブ UI を要求できます。

  • Input.Text - テキスト コンテンツをユーザーから取得します
  • Input.Date - 日付をユーザーから取得します
  • Input.Time - 時刻をユーザーから取得します
  • Input.Number - 数値をユーザーから取得します
  • Input.ChoiceSet - 選択肢のセットをユーザーに提示して選択させます
  • Input.Toggle - 2 つの項目のうち 1 つの選択肢をユーザーに提示して選択させます

操作

アクションはボタンをカードに追加します。 これらは、URL を開く、何らかのデータを送信するなど、さまざまなアクションを実行できます。

  • Action.OpenUrl - ボタンは表示のための外部 URL を開きます
  • Action.ShowCard - ユーザーに表示するサブカードを要求します。
  • Action.Submit - すべての入力要素を 1 つのオブジェクトにまとめ、ホスト アプリケーションによって定義された何らかの方法で送信するように要求します。

Action.Submit の例: Skype での Action.Submit は、すべての入力データをまとめた 1 つのオブジェクトを Value プロパティに入れた状態で、Bot Framework のボット アクティビティをボットに送り返します。

詳細情報