次の方法で共有

はじめに

アダプティブ カードは、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 プロパティがあります。 上記のカードを見ると、 TextBlock と Imageの 2 つの要素があります。

すべてのアダプティブ カード要素は 垂直方向にスタック し、 親の幅に拡張 します (HTML では display: block 考えてください)。 ただし、 ColumnSet を使用して、コンテナーの列を並べて作成できます。

アダプティブ要素

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

  • TextBlock - テキストの外観を制御するプロパティを含むテキストブロックを追加します
  • Image - イメージの外観を制御するプロパティを持つイメージを追加します

コンテナー要素

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

  • コンテナー - 要素のコレクションを定義します
  • 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 - すべての入力要素をオブジェクトに収集するように依頼します。その後、ホスト アプリケーションによって定義されたメソッドを使用して送信されます。

Action.Submit の例: Skype では、Action.Submit は、すべての入力データを含むオブジェクトを含む Value プロパティを持つ Bot Framework ボット アクティビティをボットに送信します。

詳細情報