アダプティブ カード形式が使用される Outlook のアクション可能メッセージ カードのデザインDesigning Outlook Actionable Message cards with the Adaptive Card format

Outlook のアクション可能メッセージ カードは、アダプティブ カード形式を使用してデザインされます。Outlook Actionable Messages cards are designed using the Adaptive Card format. シンプルで強力な宣言型レイアウト形式であるアダプティブ カード形式は柔軟性に優れているため、カードでの表現の幅が広がります。The Adaptive Card format is a simple yet powerful declarative layout format that provides a lot of flexibility, allowing for visually rich cards. このトピックでは、アダプティブ カード形式の Outlook 固有の機能について扱います。In this topic we'll cover the Outlook-specific features of the Adaptive Card format.

重要

アダプティブ カード形式は、メール経由で送信される操作可能なメッセージのみに利用可能で、Outlook on iOS と Outlook on Android をサポートするには必須です。The Adaptive Card format is only available for Actionable Messages sent via email, and is required to support Outlook on iOS and Android. MessageCard 形式はまだサポートされていますが、重要視されなくなりました。The MessageCard format is still supported but is now de-emphasized. Office 365 コネクタと Microsoft Teams コネクタは、現時点ではアダプティブ カード形式をサポートしていません。Office 365 connectors and Microsoft Teams connectors do not currently support the Adaptive Card format. Office 365 コネクタまたは Microsoft Teams コネクタを実装している場合は、MessageCard 形式のリファレンスを参照してください。If you are implementing an Office 365 or Microsoft Teams connector, please refer to the MessageCard format reference.

アダプティブ カード形式をサポートしている Outlook のバージョンについては、アクション可能メッセージの Outlook バージョン要件を参照してください。For information on which Outlook versions support the Adaptive Card format, see Outlook version requirements for actionable messages.

カードのプレイグラウンドCard Playground

カードのプレイグラウンド ツールが更新されて、アダプティブ カード形式をサポートするようになりました。Our Card Playground tool has been updated to support the Adaptive Card format. 独自のアダプティブ カードの作成を始める際に役立つカードのサンプルがあります。以下に示されているのは、その 1 つです。それらのカードを自分の Office 365 のメール アカウントに送信し、Outlook でどのように表示されるかを確認できます。There you will find Adaptive Card samples (including the one below) that can help you get started crafting your own cards and also allows you to send those cards to your own Office 365 email account to see how they look in Outlook.

アダプティブ カード デザイナー (プレビュー)Adaptive Cards Designer (preview)

アダプティブ カード デザイナーのドラッグ アンド ドロップ機能を使用して、アダプティブ カードをすばやく構築し調整できます。The Adaptive Cards Designer provides a drag-and-drop experience to quickly build and tweak adaptive cards.

シンプルなアダプティブ カードの例A simple Adaptive Card example

アダプティブ カードのサンプル

前述のカードでは、アダプティブ カード形式に備わっている強力な以下の基本機能が示されています。The above card illustrates some of the core and most powerful capabilities of the Adaptive Card format:

  • さまざまなタイプの要素を任意の順序で並べる機能The ability to stack elements of various types in any order
  • それらの要素の間のスペースの大きさを制御する機能The ability to control the amount of space between those elements
  • 複数の列に要素を並べる機能The ability to layout elements in multiple columns
  • 要素を水平方向および垂直方向に配置する機能The ability to align elements horizontally and vertically

このカードの作成方法を以下に示します。Here is how this card is crafted:

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "speak": "<s>Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM</s>",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "width": "stretch",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "size": "medium",
              "text": "**FLIGHT ITINERARY - CONTOSO AIR**"
            },
            {
              "type": "TextBlock",
              "spacing": "none",
              "text": "Passenger: David Claux",
              "isSubtle": true
            }
          ]
        },
        {
          "width": "auto",
          "items": [
            {
              "type": "Image",
              "width": "48px",
              "url": "http://lh3.googleusercontent.com/ik5VKcUE5U7qGSpU3XWwAwe_zeOnHU5x_79o-VXf-C_EGrFPHp4-NcKRCtblrJM5iO61=w300"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "2 Stops",
      "weight": "bolder",
      "spacing": "medium"
    },
    {
      "type": "TextBlock",
      "text": "Fri, October 10 8:30 AM",
      "weight": "bolder",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "San Francisco",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "size": "extraLarge",
              "color": "accent",
              "text": "SFO",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "&nbsp;"
            },
            {
              "type": "Image",
              "url": "https://messagecardplayground.azurewebsites.net/assets/airplane.png",
              "size": "small",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "Amsterdam",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "size": "extraLarge",
              "color": "accent",
              "text": "AMS",
              "spacing": "none"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Non-Stop",
      "weight": "bolder",
      "spacing": "medium"
    },
    {
      "type": "TextBlock",
      "text": "Fri, October 18 9:50 PM",
      "weight": "bolder",
      "spacing": "none"
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "Amsterdam",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "size": "extraLarge",
              "color": "accent",
              "text": "AMS",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "&nbsp;"
            },
            {
              "type": "Image",
              "url": "https://messagecardplayground.azurewebsites.net/assets/airplane.png",
              "size": "small",
              "spacing": "none"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "text": "San Francisco",
              "isSubtle": true
            },
            {
              "type": "TextBlock",
              "horizontalAlignment": "right",
              "size": "extraLarge",
              "color": "accent",
              "text": "SFO",
              "spacing": "none"
            }
          ]
        }
      ]
    }
  ]
}

アダプティブ カードのデザインのヒントAdaptive Card design tips

アダプティブ カードは、希望するレイアウトに応じて、非常にシンプルにすることも、かなり複雑にすることもできます。An Adaptive Card can be very simple or quite complex depending on the layout you wish to achieve. アダプティブ カードのペイロードを作成する前に、ペイント ツールや、紙とペンなどを使ってデザインを計画するようにお勧めします。そうすることにより、イメージをアダプティブ カードの構造に反映しやすくなります。It is always a good idea to plan your design ahead of writing the Adaptive Card payload, using a paint tool for instance or even just pen and paper; this will make it a lot easier to translate visuals into the appropriate Adaptive Card constructs. デザインを始める際に役立ついくつかのヒントを以下に示します。Below are a few design tips to help you get started.

テキストの書式設定Text formatting

カード内のすべての TextBlock 要素は、Markdown を使用して書式設定されます。All TextBlock elements in a card can be formatted using Markdown. Outlook は基本的な Markdown をサポートしています。Outlook supports basic Markdown.

重要

すべての TextBlock 要素は Markdown として処理されるため、Markdown 特殊文字 (* または # など) は必要に応じてエスケープしてください。Since all TextBlock elements are processed as Markdown, be sure to escape Markdown special characters (such as * or #) if needed.

効果Effect Markdown 構文Markdown syntax
斜体Italics *This text is in italics*
太字Bold **This text is bold**
太字 + 斜体Bold + italics ***This text is bold and in italics***
取り消し線Strike-through ~~This text is struck through~~
リンクLink [Microsoft](http://www.microsoft.com)
見出し (レベル 1 から 6)Headings (level 1 through 6) # Heading から ###### Heading# Heading through ###### Heading
箇条書きBulleted list * List item または - List item* List item or - List item

ヒント

  • テキストの書式設定には Markdown をご使用くださいDo use Markdown to format text.
  • カードには HTML マークアップを使用しないでください。HTML は無視され、プレーン テキストとして扱われます。Don't use HTML markup in your cards. HTML is ignored and treated as plain text.

小さい画面のためのデザインDesign for a narrow screen

メールの HTML 本文をデザインする場合と同じように、アダプティブ カードは大きい画面と小さい画面 (デスクトップと携帯電話など) の両方で表示されることを想定する必要があります。Just like when designing the HTML body of an email, you have to assume that your Adaptive Card might be displayed on both wide and narrow screens (e.g. a desktop and a mobile phone.)

ヒント

  • アダプティブ カードは小さい画面で見栄えが良くなるようにデザインしてくださいDo design your Adaptive Card in such a way that it looks great on a narrow screen. 大抵の場合、小さい画面に合わせてデザインされたカードは、大きい画面に合わせてサイズ調整できます。Typically, a card designed for a narrow screen will scale well to a wide screen. その逆は困難です。The opposite is however not true.
  • デスクトップで Outlook を使用しているユーザーだけを想定してアダプティブ カードをデザインしないでくださいDon't design your Adaptive Card assuming that only users of Outlook on the desktop will see it.

高 DPI 画面での画像を考慮した作成Craft your images with high DPI screens in mind

少し前までは、ほとんどの画面は解像度が少し低く (1024x768 ピクセルなど)、96 DPI (Dots Per Inch) で動作していました。これは、画面の実際の 1 インチの中に 96 ピクセルが収まるということです。Not so long ago, most screens had a somewhat low resolution (1024x768 pixels for instance) and were operating at 96 DPI (Dots Per Inch), meaning that 96 pixels would fit within an actual inch of the screen. しかしこの数年で、特にモバイル デバイスで、画面は解像度と DPI がかなり向上し、192 DPI 以上で動作するのが普通になりました。But in the past few years, screens have grown considerably in terms of resolution and DPI, especially on mobile devices, and it is now very common for a screen to operate at 192 DPI or even more.

アダプティブ カードをデザインする際に、DPI に関係なく、画像がどのような画面でも見栄えが良くなるようにしてください。When designing your Adaptive Cards, you need to make sure your images will look good on any screen regardless of its DPI.

ヒント

  • 高 DPI 画面で表示されることを想定して、画像をデザインしてくださいDo design your images assuming they will be displayed on a high DPI screen. 低 (96) DPI 画面用にデザインされた画像は高 DPI 画面では引き延ばされて表示されるため、モザイクが目立つようになります。An image designed for a low (96) DPI screen will be blown up when displayed on a higher DPI screen and will therefore look pixelated. 高 DPI 画面用にデザインされた画像は、低 DPI 画面では縮小して表示されるため、通常は良好な結果になります。An image designed for a high DPI screen will be shrunk on a lower DPI screen which usually yields good results. 言い換えると、100x100 ピクセルでデザインされた画像を 50x50 ピクセルで表示する方が、50x50 ピクセルでデザインされた画像を 100x100 ピクセルで表示することよりも良いということです。In other words, it is better to design a 100x100 pixels image and display it at 50x50 pixels than to design a 50x50 pixels image and display it at 100x100 pixels.
  • カードで画像の実際のサイズを正確に制御する必要がある場合は、Image 要素の width および height プロパティを使用してくださいDo use the width and height properties of the Image element if you need to precisely control the actual size of the images in your card.
  • 背景色がユーザーに表示されることを想定する場合を除き、固定の背景色 (白など) で画像をデザインしないでくださいDon't design your images with a fixed background color, like white, unless that background color is supposed to be visible to the user. Outlook では、アダプティブ カードは必ずしも背景色が白で表示されるとは限らないため、画像はどのような背景色の上にも重ねて表示されるようにする必要があります。In Outlook, your Adaptive Cards will not necessarily be displayed on top of a white background, and your images should be able to superimpose themselves on top of any background color. そのため、画像の背景色は透過的にしてくださいFor that reason, do make the background of your images transparent.
  • 画像を作成する際に、埋め込みのスペースを使用しないてくださいDon't craft your images with built-in paddings. そのような埋め込みを使用すると、大抵の場合、意図していないスペースが画像に入れられてしまい、全体的なレイアウトの妨げとなります。Such paddings usually interfere with the overall layout by introducing undesirable spacing on the side of your image.

コンテナーの使用Use of containers

Container 要素は、必要な場合に限って使用してください。Use the Container element only when necessary. Container 要素を使用すると、要素のセットを 1 つにまとめることができます。The Container element makes it possible to group a set of elements together.

ヒント

  • 要素のグループを強調する場合Container を使用してくださいContainerstyle プロパティを emphasis に設定することで、Container と、そこに含まれる要素を目立たせることができます。Do use a Container to emphasize a group of elements: by setting the style property of the Container to emphasis you can make that Container, and the elements it contains, stand out.
  • 操作を要素のグループに関連付ける場合Container を使用してくださいContainerselectAction プロパティを設定することで、Container とそのコンテンツを 1 つのクリック可能な領域にできます。その領域をクリックすると、指定されたアクションがトリガーされます。Do use a Container to associate an action with group of elements: by setting the selectAction property of a Container, the Container and its content become a single clickable area that triggers the specified action.
  • カードの一部分を折りたたみ可能にする場合、Container を使用してください。対象を Container にした Action.ToggleVisibility を使用することで、簡単に要素のグループを折りたたみ可能にできます。Do use a Container to make a portion of your card collapsible: by using an Action.ToggleVisibility targeted to a Container, you can easily make a group of elements collapsible.
  • それ以外の理由では、Container を使用しないでくださいDon't use Container for any other reason.

列の使用Use of columns

いくつかの要素を 1 つの水平線上に配置する必要がある場合にのみ、ColumnSet を使用してください。Use ColumnSet only when you need to align several elements on a single horizontal line.

ヒント

  • 一般的に、表のようなレイアウトには ColumnSet を使用してくださいDo use ColumnSet for table-like layouts in general.
  • カードの左端に画像を表示し、同じ行の右端に何らかのテキストを表示する場合などに、ColumnSet を使用してくださいDo use ColumnSet if you need to, for example, display an image of the far left of the card and some text on the same line at the far right of the card.
  • 以下のように、列に対して適切なサイズ変更方法を使用してくださいDo use the appropriate sizing approach for columns:
    • コンテンツに合うように必要な幅を使用する場合、Column"width": "auto" を使用してください。Use "width": "auto" for a Column to use as much width as is necessary to fit its content.
    • ColumnSet で残りの幅を使用する場合、Column"width": "stretch" を使用してください。Use "width": "stretch" for a Column to use the remaining width in the ColumnSet. 複数の Columns"width": "stretch" がある場合、それらのすべてで均等に残りの幅が共有されます。When multiple Columns have "width": "stretch", they all equally share the remaining width.
    • ColumnSet で使用可能な幅の比率を使用する場合、Column"width": <number> を使用します。Use "width": <number> for a Column to use a proportion of the available width in the ColumnSet. 3 つの列で width プロパティをそれぞれ 145 に設定すると、それぞれの列で使用可能な幅のそれぞれ 10%、40%、50% が使用されます。If you have three columns with their width property set to 1, 4 and 5 respectively, they will end up using 10%, 40% and 50% of the available width, respectively.
    • 特定のピクセルの幅にするには、"width": "<number>px" を使用します。Use "width": "<number>px" to have a specific pixel width. これは特に、表のレイアウトを作成する場合に役立ちます (必須の場合もあります)。This is particularly useful (and necessary) when creating table layouts.
  • 要素を単に垂直方向に積み重ねる場合は、ColumnSet を使用しないでくださいDon't use ColumnSet if all you need is stack elements vertically.

Outlook 固有のアダプティブ カードのプロパティと機能Outlook-specific Adaptive Card properties and features

Outlook では、アクション可能メッセージのコンテキストで使用される、アダプティブ カードのプロパティと機能の追加セットが導入されています。Outlook introduces a set of additional Adaptive Card properties and features for use in the context of Actionable Messages.

重要

Outlook 固有のアダプティブ カードのプロパティと機能は、アクション可能メッセージのコンテキストのみで機能しますOutlook-specific Adaptive Card properties and features only work in the context of Actionable Messages. これは他のアダプティブ カード対応アプリケーションでは機能しないため、アダプティブ カードの公式サイトでは記述されていません。They will NOT work in other Adaptive Card enabled applications and are therefore not documented on the official Adaptive Cards site.

Outlook のアクション可能メッセージでサポートされていないアダプティブ カードの機能Adaptive Card features not supported with Outlook Actionable Messages

Action.SubmitAction.Submit

Action.Submit アクション タイプは、Outlook のアクション可能メッセージでサポートされていませんThe Action.Submit action type is NOT supported with Outlook Actionable Messages. カードに Action.Submit を含めても、表示はされません。If you include an Action.Submit in your card, it will not be displayed.

Input.TimeInput.Time

Input.Time 要素タイプは、Outlook のアクション可能メッセージでサポートされていませんThe Input.Time element type is NOT supported with Outlook Actionable Messages. カードに Input.Time 要素を含めても、表示はされません。If you include an Input.Time element in your card, it will not be displayed. ユーザーが時間を入力できるようにする必要がある場合、代わりに Input.Text を使用し、その値をサーバー側で検証します。If you need to allow users to input a time, use an Input.Text instead and validate its value server-side.

Action.HttpAction.Http

Outlook のアクション可能メッセージでは、Action.Http タイプで HTTP ベースのアクション モデルが使用されます。Outlook Actionable Messages use an HTTP-based action model via the Action.Http type. Action.Http では、ユーザーがカード内のアクションを行った結果として、特定のターゲット URL への GET または POST 要求を行うことができます。Action.Http makes it possible to make a GET or POST request to a specific target url as a result of a user taking an action in a card.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes Action.Http に設定する必要があります。Must be set to Action.Http.
title StringString いいえNo ボタン コントロールなどの画面上に表示されるアクションのタイトル。The title of the action as it will appear on screen on a button control, for instance.
method StringString はいYes 有効な値は GETPOST です。Valid values are GET and POST. methodPOST に設定される場合、body プロパティが指定されなければなりません。When method is set to POST the body property must be specified.
url StringString はいYes 要求のターゲット エンドポイントの URL。The url of the request's target endpoint. url プロパティは入力値の置換をサポートしています。The url property supports input value substitution. 注: この URL はインターネットからアクセスできなければなりません。localhost を使用することはできません。Note: this URL must be accessible from the internet, you cannot use localhost.
headers HttpHeader オブジェクトの配列Array of HttpHeader objects いいえNo ターゲット エンドポイントに送信する必要があるヘッダーのオプションのリスト。An optional list of headers that should be sent to the target endpoint .
body StringString methodPOST に設定されている場合のみOnly if method is set to POST POST 要求の本文。The body of the POST request. body プロパティは入力値の置換をサポートしています。The body property supports input value substitution.

HttpHeaderHttpHeader

プロパティ名Property name TypeType 必須Required 説明Description
name StringString はいYes HTTP ヘッダーの名前。The name of the HTTP header. たとえば、Content-Type などです。For example, Content-Type.
value StringString はいYes HTTP ヘッダーの値。The value of the HTTP header. たとえば、application/json などです。For example, application/json. value プロパティは入力値の置換をサポートしています。The value property supports input value substitution.

Action.Http の例Action.Http example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hello world!"
    }
  ],
  "actions": [
    {
      "type": "Action.Http",
      "title": "Click me!",
      "method": "POST",
      "url": "https://contoso.com/api/...",
      "body": "<body of the POST request>",
      "headers": [
        { "name": "Content-Type", "value": "application/json" }
      ]
    }
  ]
}

Action.Http のカードの例

Web API の実装Implementing the Web Part

url プロパティで指定する URL は、次の要件を満たしている必要があります。The URL specified in the url property must conform to the following requirements.

  • エンドポイントは POST 要求を受け入れる必要がある。The endpoint must accept POST requests.
  • エンドポイントは body プロパティのコンテンツを受け入れる必要がある。The endpoint should accept the contents of the body property.
  • エンドポイントは Authorization ヘッダーで送信された JWT を使用して、要求が Microsoft から送信されたことを確認する必要がある。The endpoint should use the JWT sent in the Authorization header to verify that requests come from Microsoft.

入力値の置換Input value substitution

アダプティブ カードには入力を含めることができます。Action.Http アクションで、これらの入力の値をターゲット エンドポイントへ渡さなければならない場合があります。Adaptive Cards may contain inputs, and it may be necessary to pass the values of these inputs to the target endpoint via an Action.Http action. これは、入力値の置換で行えます。This is done using input value substitution. 次の例について考えます。Consider the following example:

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "What's your name?"
    },
    {
      "type": "Input.Text",
      "id": "nameInput",
      "placeholder": "Type your name"
    }
  ],
  "actions": [
    {
      "type": "Action.Http",
      "title": "Say hello",
      "method": "GET",
      "url": "https://contoso.com/sayhello?name={{nameInput.value}}"
    }
  ]
}

入力値の置換のカードの例

上記のカードでは、テキストの入力が定義され、id プロパティが nameInput に設定されます。The above card defines a text input and sets it id property to nameInput. さらに、ドメイン contoso.com 上のエンドポイントへの GET 呼び出しを行う Action.Http アクションが定義されます。It also defines an Action.Http action that makes a GET call to an endpoint on domain contoso.com. ターゲット URL に ?name={{nameInput.value}} を含めると、ユーザーがアクションを行ったときに、ID が nameInput の入力の値が動的に置換されます。With the inclusion of ?name={{nameInput.value}} on the target URL, the value of the input with id nameInput will be dynamically substituted at the time the action is taken by the user. そのため、ユーザーがテキスト入力に名前 David を入力した場合、置換後のターゲット URL は https://contoso.com/sayhello?name=David になります。So if the user had entered the name David in the text input, the target URL after substitution would be https://contoso.com/sayhello?name=David

入力値の置換は、Action.Http アクションの本文プロパティでも機能します。Input value substitution also works in the body property of an Action.Http action. 次に例を示します。For example:

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "What's your name?"
    },
    {
      "type": "Input.Text",
      "id": "nameInput",
      "placeholder": "Type your name"
    }
  ],
  "actions": [
    {
      "type": "Action.Http",
      "title": "Say hello",
      "method": "POST",
      "url": "https://contoso.com/sayhello",
      "body": "{{nameInput.value}}"
    }
  ]
}

Action.Http の実行の成功または失敗をレポートするReporting Action.Http execution success or failure

サービスが正常に Action.Http アクションを実行した場合、HTTP 200 ステータス コードを返す必要があります。Your service should return an HTTP 200 status code when it successfully executes an Action.Http action. アクションの実行が失敗した場合、サービスは HTTP 4xx ステータス コードを返す必要があります。さらに、カスタム エラー メッセージを示すために、応答に CARD-ACTION-STATUS HTTP ヘッダーを含めます。If the action execution fails, your service should return an HTTP 4xx status code, and it should also include the CARD-ACTION-STATUS HTTP header in its response to specify a custom error message. Action.Http の実行が失敗した場合、そのヘッダーの値がエンドユーザーに表示されます。The value of that header will be displayed to the end-user in case the Action.Http fails to execute.

ヒント

Action.Http アクションに対する応答を返す場合には、これらのガイドラインに従ってください。Follow these guidelines when returning a response to Action.Http actions.

  • エラーの応答で CARD-ACTION-STATUS ヘッダーを返してくださいDo return the CARD-ACTION-STATUS header in your error responses.
  • このヘッダー内のメッセージを可能な限り意味ある役立つ情報にしてくださいDo make the message in that header as informative and meaningful as possible.
  • CARD-ACTION-STATUS ヘッダーでは、アクションの実行者の名前も実行時刻についても言及しないでくださいDon't mention either the name of the person taking the action nor the time the action is being taken in your CARD-ACTION-STATUS header.

カードの更新Refresh cards

カードの更新は非常に強力なメカニズムで、Action.Http アクションが正常に完了するとすぐにカードを完全に更新できるようにします。カードの更新が役立つシナリオは次のように多岐に及びます。Refresh cards are a very powerful mechanism that allow Action.Http actions to fully update the card on the fly as the action successfully completes. There are many scenarios that benefit from refresh cards:

  • 承認シナリオ (例: 経費報告書)Approval scenario (e.g. expense report)
    • 要求が承認または拒否されると、カードは更新されて承認/拒否アクションが削除され、承認または拒否されたというファクトが反映されるようにコンテンツが更新されます。Once the request is approved or rejected, the card is refreshed to remove the approve/decline actions and update its content so it reflects the fact that it's been approved or declined.
  • タスクの進捗状況Task status
    • タスクに対して期限の設定などのアクションが実行されると、カードが更新されて、ファクトに更新済み期限が含まれるようになります。When an action is taken on a task, such as setting its due date, the card refreshes to include the updated due date in its facts.
  • アンケートSurvey
    • 質問に対して回答されると、カードが次のように更新されます。Once the question has been answered, the card is refreshed so:
      • ユーザーが回答できないようになります。It no longer allows the user to respond.
      • ユーザーの実際の回答の横に、「このアンケートに回答してくださり、ありがとうございます」などの更新済み状態が表示されます。It shows updated status, like "Thanks for responding to this survey" alongside the user's actual response.
      • ユーザーがそのアンケートをオンラインで閲覧できるようにする、新しい Action.OpenUrl アクションを含めることもできます。Potentially include a new Action.OpenUrl action that allows the user to consult the survey online.

Action.Http アクションの結果としてカードを更新するには、サービスで以下を実行する必要があります。To refresh a card as a result of an Action.Http action, a service needs to do the following:

  • 受信した HTTP POST 要求への応答本文に新しいカードの JSON ペイロードを含めます。Include the JSON payload of the new card in the body of the response to the HTTP POST request it received.
  • 応答本文を解析して新しいカードを抽出する必要があることを受信側クライアントに知らせるため、応答に CARD-UPDATE-IN-BODY: true HTTP ヘッダーを追加します (これにより、カードの更新がまったく含まれないときに不要な処理が行われないようになります)。Add the CARD-UPDATE-IN-BODY: true HTTP header to the response, in order to let the receiving client know that it should parse the response body and extract a new card (this is to avoid unnecessary processing when no refresh card is included.)

ヒント

カードの更新を返す場合にはこれらのガイドラインに従ってください。Follow these guidelines when returning refresh cards.

  • 1 回だけ実行できるアクションにカードの更新をご使用くださいDo use refresh cards with actions that can only be taken a single time. このようにすると、それ以上実行できないアクションがカードの更新に含まれなくなります。In those cases, the refresh card would not include any action that cannot be taken anymore.
  • 実行対象のエンティティの状態を変更するアクションでカードの更新をご使用くださいDo use refresh cards with actions that change the state of the entity they are performed on. このようにすると、カードの更新にエンティティの更新済み情報が含まれ、実行できるアクション セットが変更される可能性があります。In those cases, the refresh card should include updated information about the entity, and MAY change the set of actions that can be performed.
  • ユーザーと会話するためにカードの更新を使用しないでくださいDon't use refresh cards to lead a conversation with the user. たとえば、複数の手順で構成される「ウィザード」にカードの更新を使用しないでください。For instance, don't use refresh cards for a multi-step "wizard".
  • エンティティを元の外部アプリで表示するには、少なくとも 1 つの Action.OpenUrl アクションを含めてくださいDo include at least an Action.OpenUrl action to view the entity in the external app it comes from.

Action.InvokeAddInCommandAction.InvokeAddInCommand

Action.InvokeAddInCommand アクションは Outlook アドインの作業ウィンドウを開きます。The Action.InvokeAddInCommand action opens an Outlook add-in task pane. アドインがインストールされていない場合、ユーザーは、シングルクリックでアドインをインストールするように要求されます。If the add-in is not installed, the user is prompted to install the add-in with a single click.

Action.InvokeAddInCommand アクションが実行されると、まず Outlook では要求されたアドインがインストールされ、ユーザーに対して有効になっているかどうかをチェックします。When an Action.InvokeAddInCommand action is executed, Outlook first checks if the requested add-in is installed and turned on for the user. インストールされていない場合、アクションにアドインが必要であり、シングルクリックでアドインをインストールおよび有効にできることがユーザーに通知されます。If it is not, the user is notified that the action requires the add-in, and is able to install and enable the add-in with a single click. Outlook では要求された作業ウィンドウが開き、アクションによって指定されたすべての初期化コンテキストがアドインで使用可能になります。Outlook opens the requested task pane, making any initialization context specified by the action available to the add-in.

詳細については、「アクション可能メッセージからの Outlook アドインの呼び出し」を参照してください。For more information, see Invoke an Outlook add-in from an actionable message.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes Action.InvokeAddInCommand に設定する必要があります。Must be set to Action.InvokeAddInCommand.
title StringString いいえNo ボタン コントロールなどの画面上に表示されるアクションのタイトル。The title of the action as it will appear on screen on a button control, for instance.
addInId StringString はいYes 要求されたアドインのアドイン ID を指定します。Specifies the add-in ID of the required add-in. アドイン ID はアドイン マニフェストの ID 要素にあります。The add-in ID is found in the Id element in the add-in's manifest.
desktopCommandId StringString はいYes 要求された作業ウィンドウを開くアドイン コマンド ボタンの ID を指定します。Specifies the ID of the add-in command button that opens the required task pane. コマンド ボタン ID は、アドイン マニフェストのボタンを定義するコントロール要素id 属性にあります。The command button ID is found in the id attribute of the Control element that defines the button in the add-in's manifest. 指定された Control 要素は MessageReadCommandSurface 拡張点の内部で Button の種類として定義し、コントロールの ActionShowTaskPane の種類として定義する必要があります。The specified Control element MUST be defined inside a MessageReadCommandSurface extension point, be of type Button, and the control's Action must be of type ShowTaskPane.
initializationContext オブジェクトObject はいYes 開発者は、このフィールドに任意の有効な JSON オブジェクトを指定できます。Developers may specify any valid JSON object in this field. 値は文字列にシリアル化され、アクションが実行されるときにアドインで使用可能になります。The value is serialized into a string and made available to the add-in when the action is executed. これにより、アクションによって初期化データがアドインに渡されます。This allows the action to pass initialization data to the add-in.

Action.DisplayMessageFormAction.DisplayMessageForm

Action.DisplayMessageForm アクションは、メッセージの ID が指定された、そのメッセージの読み取りフォームを開きます。The Action.DisplayMessageForm action opens the read form of a message given that message's ID. メッセージ ID は Outlook REST API で取得できます。Message IDs can be retrieved via the Outlook REST APIs.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes Action.DisplayMessageForm に設定する必要があります。Must be set to Action.DisplayMessageForm.
title StringString いいえNo ボタン コントロールなどの画面上に表示されるアクションのタイトル。The title of the action as it will appear on screen on a button control, for instance.
itemId StringString はいYes 開くメッセージの ID を指定します。Specifies the ID of the message to open.

Action.DisplayAppointmentFormAction.DisplayAppointmentForm

Action.DisplayAppointmentForm アクションは、予定表アイテムの ID が指定された、その予定表アイテムの読み取りフォームを開きます。The Action.DisplayAppointmentForm action opens the read form of a calendar item given that calendar item's ID. 予定表アイテムの ID は Outlook REST API で取得できます。Calendar item IDs can be retrieved via the Outlook REST APIs.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes Action.DisplayAppointmentForm に設定する必要があります。Must be set to Action.DisplayAppointmentForm.
title StringString いいえNo ボタン コントロールなどの画面上に表示されるアクションのタイトル。The title of the action as it will appear on screen on a button control, for instance.
itemId StringString はいYes 開く予定表アイテムの ID を指定します。Specifies the ID of the calendar item to open.

Action.ToggleVisibilityAction.ToggleVisibility

Action.ToggleVisibility アクションは、ユーザーがボタンなどのアクション可能要素をクリックした結果として、カードの特定の要素を表示または非表示にできます。The Action.ToggleVisibility action makes it possible to show and/or hide specific elements of a card as a result of a user clicking on a button or other actionable element. isVisible プロパティと一緒に Action.ToggleVisibility を使用することにより、1 つのカード内で対話性を高めることができます。Coupled with the isVisible property, Action.ToggleVisibility allows for an extra degree of interactivity within a single card.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes Action.ToggleVisibility に設定する必要があります。Must be set to Action.ToggleVisibility.
title StringString いいえNo ボタン コントロールなどの画面上に表示されるアクションのタイトル。The title of the action as it will appear on screen on a button control, for instance.
targetElements TargetElement の文字列の配列Array of String or TargetElement はいYes 表示を切り替える必要がある要素のリスト。The list of elements that should have their visibility toggled. targetElements 配列の要素が文字列として指定されている場合、それらはカード内の要素の ID を表す必要があります。アクションが実行されたときに、それらの要素が非表示であれば表示になり、表示であれば非表示になります。When elements of the targetElements array are specified as strings, they must represent the Id of an element in the card; when the action is executed, these elements become visible if they were not, and invisible otherwise. 配列の要素が TargetElement オブジェクトとして指定されている場合、ターゲットの各要素の表示は、TargetElement オブジェクトの isVisible プロパティで定義されます。When elements of the array are specified as TargetElement objects, the visibility of each targeted element is defined by the isVisible property of the TargetElement object.

TargetElementTargetElement

プロパティ名Property name TypeType 必須Required 説明Description
elementId StringString はいYes ターゲット要素の ID。The Id of the target element.
isVisible ブール型Boolean はいYes アクションの完了後にターゲット要素を表示可能にするかどうかを指定します。Specifies whether the target element should be visible once the action has completed.

Action.ToggleVisibility の例Action.ToggleVisibility example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "**Action.ToggleVisibility example**: click the button to show or hide a welcome message"
    },
    {
      "type": "TextBlock",
      "id": "helloWorld",
      "isVisible": false,
      "text": "**Hello World!**",
      "size": "extraLarge"
    }
  ],
  "actions": [
    {
      "type": "Action.ToggleVisibility",
      "title": "Click me!",
      "targetElements": [ "helloWorld" ]
    }
  ]
}

カードの例は、ボタンをクリックする前は以下のように表示されます。The example card renders similar to the following before the button is clicked:

折りたたまれた状態の Action.ToggleVisibility カードの例のスクリーンショット

カードの例は、ボタンをクリックした後は以下のように表示されます。The example card renders similar to the following after the button is clicked:

展開された状態の Action.ToggleVisibility カードの例のスクリーンショット

Action.TransactionAction.Transaction

重要

Action.Transaction アクションは廃止されました。The Action.Transaction action has been deprecated. 代わりに、ActionRequest 形式を使用して支払い要求メッセージを送信する必要があります。Payment request messages should be sent using the ActionRequest format instead.

Action.Transaction アクションは Outlook での支払エクスペリエンスをトリガーします。The Action.Transaction action triggers the payments in Outlook experience. ユーザーがこのアクションを呼び出すと、Outlook は、業者からの最新の請求書の詳細を取得します。When the user invokes the action, Outlook retrieves the latest invoice details from the merchant. この情報は、Outlook のウィンドウに表示されるので、ユーザーは Microsoft Pay エクスペリエンスでクリックして、請求書に対する支払いができます。This information is displayed in a pane in Outlook, allowing the user to click through the Microsoft Pay experience to pay the invoice. 詳細については、「Outlook での支払を使い始める」を参照してください。See Get started with payments in Outlook for more information.

注意

Action.Transaction タイプを使用する前に、Outlook での支払のパートナー ダッシュボードに登録して、業者 ID と表示 ID を受け取る必要があります。Before you can use the Action.Transaction type, you must register in the partner dashboard for payments in Outlook to receive a merchant ID and display ID.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes Action.Transaction に設定する必要があります。Must be set to Action.Transaction.
title StringString いいえNo ボタン コントロールなどの画面上に表示されるアクションのタイトル。The title of the action as it will appear on screen on a button control, for instance.
initializationContext オブジェクトObject はいYes Outlook での支払エクスペリエンスで必要な情報が含まれます。Contains required information for the payments in Outlook experience.
initializationContext.merchantId GUIDGUID はいYes Outlook での支払のパートナー ダッシュボードへの登録によって取得される業者 ID。Your merchant ID obtained by registering in the partner dashboard for payments in Outlook.
initializationContext.displayId GUIDGUID はいYes Outlook での支払のパートナー ダッシュボードへの登録によって取得される表示 ID。Your display ID obtained by registering in the partner dashboard for payments in Outlook.
initializationContext.productContext オブジェクトObject はいYes 開発者は、このフィールドに任意の有効な JSON オブジェクトを指定できます。Developers may specify any valid JSON object in this field. 値は、支払要求と支払完了 Webhook に送信されたペイロードに含まれます。The value is included in the payloads sent to your payment request and payment complete webhooks.

Action.Transaction の例Action.Transaction example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "weight": "bolder",
      "size": "large",
      "color": "accent",
      "text": "Invoice from Contoso"
    },
    {
      "type": "TextBlock",
      "weight": "bolder",
      "size": "medium",
      "text": "$57.28 due on May 30, 2018"
    }
  ],
  "actions": [
    {
      "type": "Action.Transaction",
      "title": "Review and pay",
      "initializationContext": {
          "merchantId": "6b810c7b-4dc5-40dd-82b2-916189ed4524",
          "displayId": "0a55e631-60b1-4bad-b77a-3c3b1749a12f",
          "productContext": {
              "invoiceId": "INV-0115"
          }
      }
    }
  ]
}

ActionSet 要素ActionSet element

Outlook のアクション可能メッセージでは、カード内の任意の場所にアクション ボタンを追加できる ActionSet 要素のサポートが追加されます。Outlook Actionable Messages add support for the ActionSet element that makes it possible to add action buttons anywhere in a card.

プロパティ名Property name TypeType 必須Required 説明Description
type StringString はいYes ActionSet に設定する必要があります。Must be set to ActionSet.
id StringString いいえNo 要素の一意の ID。The unique ID of the element.
spacing StringString いいえNo この要素と直前の要素の間のスペースの大きさを制御します。Controls the amount of spacing between this element and the previous element.
separator ブール型Boolean いいえNo この要素と直前の要素の間で区切り線を表示するかどうかを制御します。Controls whether or not a separator line should be displayed between this element and the previous element. spacing プロパティによって定義されたスペースの中央に区切り線が表示されます。The separator line is displayed in the middle of the space defined by the spacing property.
horizontalAlignment StringString いいえNo コンテナー内での、この要素の水平方向の配置を制御します。Controls the horizontal alignment of this element within its container.
actions Action オブジェクトの配列Array of Action objects いいえNo セット内に表示されるアクション。The actions to be displayed in the set.

ActionSet は、カード内の任意の場所に配置できるという点のほかは、AdaptiveCard のアクション プロパティと全く同じように動作します。Aside from the fact that ActionSet can be placed anywhere in the card, it behaves exactly like the actions property of an AdaptiveCard.

ActionSet の例ActionSet example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
      {
        "type": "ActionSet",
        "actions": [
          {
            "type": "Action.ToggleVisibility",
            "title": "Click me!",
            "targetElements": [ "helloWorld" ]
          }
        ]
      },
      {
        "type": "TextBlock",
        "text": "**Action.ToggleVisibility example**: click the button above to show or hide a welcome message"
      },
      {
        "type": "TextBlock",
        "id": "helloWorld",
        "isVisible": false,
        "text": "**Hello World!**",
        "size": "extraLarge"
      }
  ]
}

ActionSet のカードの例のスクリーンショット

アダプティブ カードのすべての要素タイプの追加のプロパティAdditional properties on all Adaptive Card element types

プロパティ名Property name TypeType 必須Required 説明Description
isVisible ブール型Boolean いいえ。No. 既定は true です。Defaults to true. 要素の初期表示状態。The initial visibility state of the element. isVisiblefalse に設定されている場合、初期状態では要素はカードに表示されません。When isVisible is set to false, the element is initially not visible in the card. 前述のように、Action.ToggleVisibility アクションで表示可能にできます。It can be made visible using an Action.ToggleVisibility action, as documented above.

isVisible を使用する方法については、前述の例を参照してください。Please refer to the previous example for an illustration of how to use isVisible.

AdaptiveCard タイプの追加のプロパティAdditional properties on the AdaptiveCard type

Outlook のアクション可能メッセージのコンテキストで、AdaptiveCard オブジェクトに以下の追加プロパティを指定できます。The following additional properties can be specified on an AdaptiveCard object in the context of Outlook Actionable Messages:

プロパティ名Property name TypeType 必須Required 説明Description
autoInvokeAction Action.HttpAction.Http いいえNo autoInvokeAction プロパティは、メッセージ内の既存のペイロードを置き換えるために更新されたアダプティブ カード ペイロードを提供する URL を指定します。The autoInvokeAction property specifies a URL that supplies an updated Adaptive Card payload to replace the existing payload in the message. Action.Http アクションの methodPOST にする必要があります。The method of the Action.Http action MUST be POST. これにより、操作可能なメッセージに最新の情報を提供するサービスが可能になります。This allows your service to supply up-to-date information in the actionable message. 詳細については、「ユーザーが開いたときに操作可能なメッセージを更新する」を参照してください。For more information, see Refresh an actionable message when the user opens it.
correlationId 文字列String いいえNo correlationId プロパティは、トラブルシューティングの問題のログを検索するプロセスを簡素化します。The correlationId property simplifies the process of locating logs for troubleshooting issues. 操作可能なカードを送信する場合、サービスでこのプロパティに一意の UUID を設定してログ記録することをお勧めします。We recommend that when sending an actionable card, your service should set and log a unique UUID in this property. ユーザーがカード上で Action.Http アクションを呼び出すと、Office 365 はサービスに対して Card-Correlation-Id ヘッダーと Action-Request-Id ヘッダーを含む POST 要求を送信します。When the user invokes an Action.Http action on the card, Office 365 sends the Card-Correlation-Id and Action-Request-Id headers in the POST request to your service. Card-Correlation-Id にはカードの correlationId プロパティと同じ値が含まれます。Card-Correlation-Id contains the same value as the correlationId property in the card. Action-Request-Id は、Office 365 で生成された一意の UUID であり、ユーザーによって実行された特定のアクションを見つけるのに役立ちます。Action-Request-Id is a unique UUID generated by Office 365 to help locate specific action performed by a user. アクションの POST 要求を受信するとき、サービスではこの両方の値をログ記録する必要があります。Your service should log both of these values when receiving action POST requests.
expectedActors 文字列の配列Array of String いいえNo expectedActors には、カードで Action.Http アクションを行う可能性があるユーザーの必要なメール アドレスのリストが含まれます。expectedActors contains a list of expected email addresses of the users that may take Action.Http actions on the card. ユーザーは複数のメール アドレスを持つことができ、Action.Http ターゲット エンドポイントには、ベアラー トークンの sub クレームに提示するための特定のメール アドレスは必要でない場合があります。A user can have multiple email addresses and the Action.Http target endpoint might not be expecting the particular email address presented in the sub claim of the bearer token. たとえば、ユーザーは john.doe@contoso.com または john@contoso.com の両方のメール アドレスを持つことができますが、Action.Http ターゲット エンドポイントは、ベアラー トークンのサブ クレームで john@contoso.com を受信する必要があります。For example, a user could have both the john.doe@contoso.com or john@contoso.com email address, but the Action.Http target endpoint expects to receive john@contoso.com in the sub claim of the bearer token. expectedActors プロパティを ["john@contoso.com"] に設定すると、sub クレームに必要なメール アドレスが入ります。By setting the expectedActors property to ["john@contoso.com"], the sub claim will have the expected email address.
hideOriginalBody BooleanBoolean いいえ。No. 既定は false です。Defaults to false. true に設定すると、メッセージの HTML 本文が非表示になります。When set to true, causes the HTML body of the message to be hidden. これは、コンテンツの表現手段として HTML 本文自体よりもカードの方が優れていたり役に立ったりする場合に非常に便利です。カードにアクションが含まれている場合は特にそう言えます。This is very useful in scenarios where the card is a better or more useful representation of the content than the HTML body itself, which is especially true when the card contains actions. ユーザーに必要な情報すべてがカード自体に含まれる場合、またはカードの内容が本文の内容と重複している場合、元の HTML 本文を非表示にすることをご検討くださいConsider hiding the original HTML body if the card itself contains all the information a user would need, or if the content of the card is redundant with the content of the body. HTML 本文を非表示にする場合であっても、適切で意味のある HTML 本文を必ず含めてください。Do always include a nice, meaningful HTML body, even if it is going to be hidden. カードをサポートしていない電子メール クライアントは、HTML 本文しか表示できません。The HTML body is the only thing an email client that doesn't support cards will be able to display. また、電子メールに返信したり、それを転送したりする場合にカードは含まれず、HTML 本文のみが含まれます。Furthermore, cards are not included when replying to or forwarding emails, only the HTML body. カードに記されている情報を補完している場合、本文を非表示にしないでくださいDon't hide the body when it is complementary to the information presented in the card. たとえば、経費報告書の承認の本文には報告書の詳細を示し、カードには承認/拒否のアクションを含めた簡単な概要のみを表示できます。For example, the body of an expense report approval might describe the report in great details while the card just presents a quick summary along with approve/decline actions.
originator 文字列String はいYes 操作可能な電子メールの場合は、操作可能な電子メールの開発者ダッシュボードで生成されるプロバイダー ID に設定する必要があります。For actionable email, MUST be set to the provider ID generated by the Actionable Email Developer Dashboard.

Column タイプの追加のプロパティAdditional properties on the Column type

Outlook のアクション可能メッセージのコンテキストで、Column オブジェクトに以下の追加プロパティを指定できます。The following additional properties can be specified on a Column object in the context of Outlook Actionable Messages:

プロパティ名Property name TypeType 必須Required 説明Description
width Number または StringNumber or String いいえ (既定は auto)No (defaults to auto) このプロパティでは、ColumnSet 内で Column の幅を正確に制御できます。This property allows for precise control of the width of a Column within its ColumnSet. 詳細については、「Column の幅の値」を参照してください。See Column width values for details.
verticalContentAlignment 文字列。String. 有効な値は、topcenterbottom です。Valid values are top, center and bottom. いいえ。No. 既定値は top です。Defaults to top. verticalContentAlignment プロパティを使うと、列の内容 (すべての要素など) を垂直方向に配置できます。これは、表のようなレイアウトで特に便利です。The verticalContentAlignment property makes it possible to vertically position the content of the column (e.g. all its elements.) This is particularly useful for table-like layouts.
backgroundImage StringString いいえNo backgroundImage プロパティは、Column の背景として使用される画像の URL を示します。The backgroundImage property represents the URL to an image that is to be used as the background of the Column. 背景の画像は、Column の領域の全体をカバーし、元の縦横比を維持するように拡大または縮小します。The background image covers the entirety of the Column's surface and is scaled so as to preserve its original aspect ratio.

Column の幅の値Column width values

width が数値として表現される場合は、ColumnSet 内の Column の相対的な幅を表します。If width is expressed as a number, it represents the relative weight of the Column within its ColumnSet. 重み付けされた Column が実際に意味を持つようにするには、他に 1 つ以上の重み付けされた Column がセット内に存在している必要があります。For a weighted Column to really be useful, there should be at least one more weighted Column in the set. たとえば、列 A の width1 に設定され、列 B の width2 に設定されている場合、列 A ではセット内の使用可能な領域の 3 分の 1 が使用され、列 B では残りの 3 分の 2 が使用されます。For example, if column A has its width set to 1 and column B has its width set to 2, then column A will use a third of the available space in the set, while column B will use the remaining two-thirds.

width が文字列として表現される場合は、以下の値を持つことができます。If width is expressed as a string, it can have the following values:

  • auto: Column はコンテンツを収めるのに必要とされる量だけ、使用可能なスペースを使用します。auto: The Column will use as much of the available space as is required to fit its content.
  • stretch: Column はセット内に残されているすべてのスペースを使用します。stretch: The Column will use whatever space remains in the set. 複数の列で width プロパティが stretch に設定されている場合、それらのすべてで、残りのスペースが均等に共有されます。If multiple columns have their width property set to stretch, they all share the remaining space equally.
  • <number>px (例: <number>px (ex. 50px): 指定されたピクセル数に列が広げられます。50px): The column will spread across the specified number of pixels.
  • <number>* (例: <number>*, (ex. 1*): これは width を数として指定する場合と同じです。1*): This is equivalent to specifying width as a number.

Column の例Column example

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "width": "50px",
          "items": [
            {
              "type": "Image",
              "url": "https://adaptivecards.io/content/cats/1.png",
              "size": "stretch"
            }
          ]
        },
        {
          "width": "stretch",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "text": "This card has two ColumnSets on top of each other. In each, the left column is explicitly sized to be 50 pixels wide.",
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "width": "50px"
        },
        {
          "width": "stretch",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "text": "In this second ColumnSet, columns align perfectly even though there is nothing in the left column.",
              "wrap": true
            }
          ]
        }
      ]
    }
  ]
}

width のカードの例のスクリーンショット

Container タイプの追加のプロパティAdditional properties on the Container type

Outlook のアクション可能メッセージのコンテキストで、Container オブジェクトに以下の追加プロパティを指定できます。The following additional properties can be specified on a Container object in the context of Outlook Actionable Messages:

プロパティ名Property name TypeType 必須Required 説明Description
verticalContentAlignment 文字列。String. 有効な値は、topcenterbottom です。Valid values are top, center and bottom. いいえ。No. 既定値は top です。Defaults to top. verticalContentAlignment プロパティを使うと、列の内容 (すべての要素など) を垂直方向に配置できます。これは、表のようなレイアウトで特に便利です。The verticalContentAlignment property makes it possible to vertically position the content of the column (e.g. all its elements.) This is particularly useful for table-like layouts.
backgroundImage StringString いいえNo backgroundImage プロパティは、Container の背景として使用される画像の URL を示します。The backgroundImage property represents the URL to an image that is to be used as the background of the Container. 背景の画像は、Container の領域の全体をカバーし、元の縦横比を維持するように拡大または縮小します。The background image covers the entirety of the Container's surface and is scaled so as to preserve its original aspect ratio.

これらのプロパティは、Column タイプの対応するものと全く同じように動作します。These properties behave exactly like their counterpart on the Column type. 前述の例を参照してください。Please refer to the above example.

Image タイプの追加のプロパティAdditional properties on the Image type

Outlook のアクション可能メッセージのコンテキストで、Image オブジェクトに以下の追加プロパティを指定できます。The following additional properties can be specified on an Image object in the context of Outlook Actionable Messages:

プロパティ名Property name TypeType 必須Required 説明Description
width StringString いいえNo このプロパティでは、画像の幅をピクセル単位で正確に制御できます。This property allows for precise control over the width of an image, in pixels. 許可されている形式は <number>px です。ここで、<number> は整数です。The allowed format is <number>px where <number> is an integer. width が指定されている場合、size プロパティは無視されます。When width is specified, the size property is ignored. width が指定されているものの、height は指定されていない場合、画像の高さは縦横比に従って自動的に計算されます。If width is specified but height isn't, the height of the image is automatically computed so as to respect its aspect ratio.
height StringString いいえNo このプロパティでは、画像の高さをピクセル単位で正確に制御できます。This property allows for precise control over the height of an image, in pixels. 許可されている形式は <number>px です。ここで、<number> は整数です。The allowed format is <number>px where <number> is an integer. height が指定されている場合、size プロパティは無視されます。When height is specified, the size property is ignored. height が指定されているものの、width は指定されていない場合、画像の幅は縦横比に従って自動的に計算されます。If height is specified but width isn't, the width of the image is automatically computed so as to respect its aspect ratio.
backgroundColor StringString いいえNo backgroundColor プロパティは、画像の背景に表示される色を指定します。The backgroundColor property specifies the color the image should be rendered on top of. 1 つの画像の背景にさまざまな色が使用される場合、backgroundColor を使用すれば、1 つの画像の複数のバージョンを作成しなくて済むため、特に便利です。backgroundColor is particularly useful in cases where a single image should be used on top of a variety of background colors, as it removes the need to craft multiple versions of a single image. backgroundColor プロパティの形式は #RRGGBB です。ここで、RRGGBB は色のコンポーネントである赤、緑、青の 16 進数の値をそれぞれ示します。The format of the backgroundColor property is #RRGGBB where RR, GG and BB are the hexadecimal values of the red, green and blue components of the color, respectively.

Image プロパティの例Image properties example

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Below, the same image is presented on top of two different background colors."
    },
    {
      "type": "Image",
      "width": "64px",
      "url": "https://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png",
      "backgroundColor": "#FF0000"
    },
    {
      "type": "Image",
      "style": "person",
      "width": "64px",
      "url": "https://messagecardplayground.azurewebsites.net/assets/circleontransparentbackground.png",
      "backgroundColor": "#0000FF"
    }
  ]
}

Image プロパティのカードの例のスクリーン ショット

関連項目See also