作業の開始Getting Started

アダプティブ カードは、JSON でシリアル化されたカード オブジェクト モデルです。An Adaptive Card is a JSON-serialized card object model.

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

カードの基本的な構造は次のとおりです。The basic structure of a card is as follows:

  • AdaptiveCard - ルート オブジェクトは、要素マークアップ、アクション、読み上げ方法、レンダリングに必要なスキーマのバージョンなど、AdaptiveCard 自体を記述します。AdaptiveCard - The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.
  • body - カードの本体は elements と呼ばれる構成要素でできています。body - The body of the card is made up of building-blocks known as elements. さまざまな種類のカードを作成するために、ほぼ無限の配置で要素を構成することができます。Elements can be composed in nearly infinite arrangements to create many types of cards.
  • actions - 多くのカードには、ユーザーが実行できる一連のアクションがあります。actions - Many cards have a set of actions a user may take on it. このプロパティは、通常は下部の "アクション バー" にレンダリングされるアクションを記述します。This property describes those actions which typically get rendered in an "action bar" at the bottom.

カードの例Example Card

このサンプル カードには、1 行のテキストとそれに続く画像が含まれています。This sample card which includes a single line of text followed by an image.

{
    "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 property

すべての要素には、それがどのような種類のオブジェクトであるかを識別する type プロパティがあります。Every element has a type property which identifies what kind of object it is. 上のカードを見てみると、2 つの要素 TextBlockImage があることがわかります。Looking at the above card, you can see we have two elements, a TextBlock and an Image.

アダプティブ カードのすべての要素は垂直方向に積み重ねられその親の幅にまで広がります (HTML の display: block を考えてください)。All Adaptive Card elements stack vertically and expand to the width of their parent (think display: block in HTML). ただし、ColumnSet を使用すれば、コンテナーを並べて列を作成できます。However, you can use a ColumnSet to create side-by-side columns of containers.

アダプティブ要素Adaptive Elements

最も基本的な要素は次のとおりです。The most fundamental elements are:

  • TextBlock - テキストの見た目を制御するプロパティ付きのテキスト ブロックを追加しますTextBlock - adds a block of text with properties to control what the text looks like
  • Image - 画像の見た目を制御するプロパティ付きの画像を追加しますImage - adds an image with properties to control what the image looks like

コンテナー要素Container elements

カードは、子要素のコレクションを配置するコンテナーを持つこともできます。Cards can also have containers, which arrange a collection of child elements.

  • Container - 要素のコレクションを定義しますContainer - Defines a a collection of elements
  • ColumnSet/Column - 列のコレクションを定義します。各列はコンテナーですColumnSet/Column - Defines a collection of columns, each column is a container
  • FactSet - ファクトのコンテナーFactSet - Container of Facts
  • ImageSet - 画像のコレクションに対して UI で適切なフォト ギャラリー エクスペリエンスを表示できるようにする画像のコンテナー。ImageSet - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.

入力要素Input elements

入力要素を使用すると、単純なフォームを構築するためのネイティブ UI を要求できます。Input elements allow you to ask for native UI to build simple forms:

  • Input.Text - テキスト コンテンツをユーザーから取得しますInput.Text - get text content from the user
  • Input.Date - 日付をユーザーから取得しますInput.Date - get a Date from the user
  • Input.Time - 時刻をユーザーから取得しますInput.Time - get a Time from the user
  • Input.Number - 数値をユーザーから取得しますInput.Number - get a Number from the user
  • Input.ChoiceSet - 選択肢のセットをユーザーに提示して選択させますInput.ChoiceSet - Give the user a set of choices and have them pick
  • Input.Toggle - 2 つの項目のうち 1 つの選択肢をユーザーに提示して選択させますInput.Toggle - Give the user a single choice between two items and have them pick

操作Actions

アクションはボタンをカードに追加します。Actions add buttons to the card. これらは、URL を開く、何らかのデータを送信するなど、さまざまなアクションを実行できます。These can perform a variety of actions, like opening a URL or submitting some data.

  • Action.OpenUrl - ボタンは表示のための外部 URL を開きますAction.OpenUrl - the button opens an external URL for viewing
  • Action.ShowCard - ユーザーに表示するサブカードを要求します。Action.ShowCard - Requests a sub-card to be shown to the user.
  • Action.Submit - すべての入力要素を 1 つのオブジェクトにまとめ、ホスト アプリケーションによって定義された何らかの方法で送信するように要求します。Action.Submit - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.

Action.Submit の例: Skype での Action.Submit は、すべての入力データをまとめた 1 つのオブジェクトを Value プロパティに入れた状態で、Bot Framework のボット アクティビティをボットに送り返します。Example Action.Submit: With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the Value property containing an object with all of the input data on it.

詳細情報Learn More