Teams でカードを書式設定する

[アーティクル]
03/26/2024

カードにリッチテキストの書式設定を追加する 2 つの方法を次に示します。

markdown
HTML

カードは、タイトルプロパティや字幕プロパティではなく、テキストプロパティでのみ書式設定をサポートします。カードの種類に応じて、XML または HTML のサブセット、または Markdown を使用して書式設定を指定できます。アダプティブカードの現在および将来の開発では、Markdown の書式設定をお勧めします。

書式設定のサポートはカードの種類によって異なります。カードのレンダリングは、デスクトップとモバイルの Microsoft Teams クライアントとデスクトップブラウザーの Teams で若干異なる場合があります。

Teams カードにはインライン画像を含めることができます。サポートされているイメージ形式は、.png、.jpg、または .gif 形式です。サイズは 1024 x 1024 ピクセル以内、ファイルサイズは 1 MB 未満にしてください。アニメーション .gif イメージはサポートされていません。詳細については、「カードの種類」を参照してください。

サポートされている特定のスタイルを含む Markdown を使用して、Microsoft 365 グループのアダプティブカードとコネクタカードを書式設定できます。

Markdown でカードを書式設定する

次のカードタイプは、Teams での Markdown 書式設定をサポートしています。

アダプティブカード: Markdown は[アダプティブカード Textblock ] フィールドと Fact.TitleFact.Valueでサポートされています。アダプティブカードでは HTML はサポートされていません。
Microsoft 365 グループ用コネクタカード: テキストフィールドのMicrosoft 365 グループ用コネクタカードでは、Markdown と制限付き HTML がサポートされています。

注:

Markdown は、ボットの OAuth サインインカードではサポートされていません。

リスト内の改行に \r または \n エスケープシーケンスを使用して、アダプティブカードに改行を使用できます。書式設定は、デスクトップ版とモバイル版のアダプティブカード用 Teams で異なります。カードベースのメンションは、Web、デスクトップ、およびモバイルクライアントでサポートされています。情報マスキングプロパティを使用して、アダプティブカード Input.Text 入力要素内のユーザーからのパスワードや機密情報などの特定の情報をマスクできます。 width オブジェクトを使用して、アダプティブカードの幅を拡張できます。アダプティブカード内で先行入力サポートを有効にし、ユーザーが入力を入力するときに入力選択肢のセットをフィルタリングできます。プロパティを msteams 使用して、Stageview で画像を選択的に表示する機能を追加できます。

書式設定は、アダプティブカードおよびコネクタカード用の Teams のデスクトップバージョンとモバイルバージョンで異なります。このセクションでは、アダプティブカードとコネクタカードの Markdown 書式の例を紹介します。

アダプティブカードの Markdown 書式
Microsoft 365 グループ用コネクタカードのマークダウン形式

次の表に、Textblock、Fact.Title、および Fact.Value でサポートされているスタイルを示します。

Style	例	Markdown
太字	Bold	`Bold`
斜体	Italic	`_Italic_`
記号付きリスト	text text	`- Item 1\r- Item 2\r- Item 3`
番号付きリスト	text text	`1. Green\r2. Orange\r3. Blue`
Hyperlinks	Bing	`[Title](url)`

次の Markdown タグはサポートされていません。

ヘッダー
テーブル
画像
事前書式設定済みのテキスト
Blockquotes

アダプティブカードの改行

リスト内の改行には、\r または \n のエスケープシーケンスを使用できます。リストで \n\n を使用すると、リスト内の次の要素がインデントされます。 TextBlock の他の場所で改行が必要な場合は、\n\n を使用してください。

アダプティブカードのモバイルとデスクトップの違い

デスクトップでは、アダプティブカードの Markdown 書式設定は、Web ブラウザーと Teams クライアントアプリケーションの両方で次の画像のように表示されます。

Teams デスクトップクライアントでのアダプティブカードマークダウンの書式設定の例を示すスクリーンショット。

iOS では、アダプティブカード Markdown の書式設定が次の図のように表示されます。

スクリーンショットは、Teams iOS プラットフォームでのアダプティブカードマークダウンの書式設定の例を示しています。

Android では、アダプティブカード Markdown の書式設定が次の図のように表示されます。

Teams Android プラットフォームでのアダプティブカードマークダウンの書式設定の例を示すスクリーンショット。

詳細については、「アダプティブカード」のテキスト機能を参照してください。

注:

このセクションで説明する日付とローカライズ機能は、Teams ではサポートされていません。

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

次のコードは、アダプティブカードの書式設定の例を示しています。

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.io)"
        }
    ]
}

アダプティブカードは、絵文字をサポートします。次のコードは、絵文字を使用したアダプティブカードの例を示しています。

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Publish Adaptive Card with emojis 🥰 ", "weight": "bolder", "size": "medium" }, ] }, ], }

注:

REST API を使用している場合は、要求ヘッダーを設定 charset=UTF-8 してアダプティブカードに絵文字を追加します。

アダプティブカード内でのサポートのメンション

アダプティブカード本文内で、ボットとメッセージ拡張機能の応答を追加 @mentions できます。カードを追加 @mentions するには、チャネルやグループチャットの会話で、メッセージベースのメンションと同じ通知ロジックとレンダリングに従います。

ボットとメッセージ拡張機能には、カードコンテンツ内の TextBlock 要素と FactSet 要素に言及を含めることができます。

注:

メディア要素は、Teams プラットフォーム上のアダプティブカードではサポートされていません。
チャネルとチームのメンションは、ボットメッセージではサポートされていません。
ただし、1 つのアダプティブカードメッセージに複数のユーザーを含めることができます @mention 。ただし、受信 Webhook の場合はメッセージサイズの制限が 28 KB、ボットメッセージの場合は 40 KB を超えないようにしてください。
受信 Webhook から送信されたアダプティブカードでは、ユーザーメンションのみがサポートされ、ボットメンションはサポートされません。

アダプティブカードにメンションを含めるには、アプリに次の要素を含める必要があります。

サポートされているアダプティブカード要素の <at>username</at>。
カードコンテンツの msteams プロパティ内の mention オブジェクトには、言及されているユーザーの Teams ユーザー ID が含まれています。
userId は、ボット ID と特定のユーザーに固有です。特定のユーザーに @mention 使用できます。 userId は、ユーザー ID の取得で説明されているオプションの 1 つを使用して取得できます。

メンション付きアダプティブカードのサンプル

次のコードは、アダプティブカードとメンションの例を示しています。

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

ユーザーメンションでのオブジェクト ID と UPN のMicrosoft Entra

Teams プラットフォームを使用すると、既存のメンション ID に加えて、Microsoft Entra オブジェクト ID とユーザープリンシパル名 (UPN) を使用してユーザーをメンションできます。アダプティブカードを備えたボットと受信 Webhook を備えたコネクタは、2 つのユーザーメンション ID をサポートします。

次の表に、新しくサポートされたユーザーメンション ID を示します。

ID	サポート機能	説明	例
Microsoft Entra オブジェクト ID	ボット、コネクタ	ユーザーのオブジェクト ID をMicrosoft Entraする	49c4641c-ab91-4248-aebb-6a7de286397b
UPN	ボット、コネクタ	ユーザーの UPN をMicrosoft Entraする	`john.smith@microsoft.com`

アダプティブカードを使用したボットでのユーザーメンション

ボットは、既存の ID に加えて、Microsoft Entra オブジェクト ID と UPN を使用したユーザーメンションをサポートします。 2 つの新しい ID のサポートは、テキストメッセージ、アダプティブカード本体、およびメッセージ拡張応答のボットで利用できます。ボットは、会話および invoke シナリオでの言及 ID をサポートします。ユーザーは、ID を使用しているときに @mentioned アクティビティフィード通知を受け取ります。

注:

ボットのアダプティブカードを使用したユーザーメンションには、スキーマの更新と UI/UX の変更は必要ありません。

例

アダプティブカードを使用するボットでのユーザーメンションの例は次のとおりです。

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Microsoft Entra ID</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

次の画像は、ボットのアダプティブカードでのユーザーメンションを示しています。

アダプティブカードを使用したボットのユーザーメンションを示すスクリーンショット。

アダプティブカードを使用した受信 Webhook でのユーザーメンション

受信 Webhook は、Microsoft Entra オブジェクト ID と UPN を使用してアダプティブカードのユーザーメンションをサポートし始めます。

注:

受信 Webhook のスキーマでユーザーメンションを有効にして、オブジェクト ID と UPN Microsoft Entraサポートします。
UI/UX の変更は、Microsoft Entra オブジェクト ID と UPN を持つユーザーメンションには必要ありません。

例

受信 Webhook でのユーザーメンションの例を次に示します。

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso.onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele Microsoft Entra ID</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

次の図は、受信 Webhook でのユーザーメンションを示しています。

受信 Webhook のユーザーメンションを示すスクリーンショット。

アダプティブカードのPeople アイコン

Peopleアイコンは、ユーザーがアダプティブカード内のユーザーの画像を表示するのに役立ちます。イメージを挿入し、イメージでサポートされているすべてのプロパティを適用できます。

アダプティブカードでサポートされるユーザーアイコンには、次の 2 種類があります。

ペルソナ: アダプティブカードに 1 人のユーザーを表示する場合は、ユーザーアイコンとユーザーの名前が表示されます。

次の JSON コードは、Persona カードの例です。

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0.0",
  "body": [
{
      "type": "TextBlock",
      "text": "Persona",
      "weight": "bolder"
    },
    {
      "type": "Component",
      "name": "graph.microsoft.com/user",
      "view": "compact",
      "properties": {
        "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
        "displayName": "Daniela Mandera",
        "userPrincipalName": "damandera@microsoft.com"
      }
    }
  ]
}

ペルソナセット: アダプティブカードに複数のユーザーを表示する場合は、ユーザーのユーザーアイコンのみが表示されます。

次の JSON コードは、Persona Set の例です。

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Persona Set",
      "weight": "bolder"
    },
    {
      "type": "Component",
      "name": "graph.microsoft.com/users",
      "view": "compact",
      "properties": {
        "users": [
          {
            "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
            "displayName": "Daniela Mandera",
            "userPrincipalName": "damandera@microsoft.com"
          },
          {
            "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
            "displayName": "Daniela Mandera",
            "userPrincipalName": "damandera@microsoft.com"
          }
        ]
      }
    }
  ]
}

注:

アダプティブカードのペルソナとペルソナセットのスタイルをカスタマイズすることはできません。

次の図は、アダプティブカードの people アイコンの例です。

クエリパラメーター

次の表に、クエリパラメーターの一覧を示します。

プロパティ名	説明
`type`	`component`
`name`	を使用して`graph.microsoft.com/users`、organization全体のすべてのメンバーを検索します
`view`	`compact`
`properties`	コンポーネントテンプレートに渡される
`id`	ユーザーの MRI
`displayName`	ユーザーの名前
`userPrincipalName`	Microsoft Entra IDのアカウントのユーザーのプリンシパル名

アダプティブコンポーネントは、テンプレートとネイティブのアダプティブカード要素を利用した高レベルのコンポーネントです。型componentは、カード本文内の任意の場所で使用でき、コンポーネントデータは属性でproperties定義されます。のコンポーネント properties データは、コンポーネントに直接渡されます。プロパティは properties Persona と Persona Set の形式を定義し、その properties 他のすべてのプロパティはアダプティブカードスキーマの型によって component 無視されます。

ボットは、Teams ユーザー ID や、などのnameiduserPrincipalNameMicrosoft Entra情報など、メンバーとその基本的なユーザープロファイルの一覧を照会できます。詳細については、「名簿またはユーザープロファイルをフェッチする」を参照してください。

次の画像は、Teams デスクトップクライアントとモバイルクライアントのアダプティブカードのユーザーアイコンを示しています。

デスクトップクライアント:

ユーザーがユーザーアイコンにカーソルを合わせると、そのユーザーのカードユーザーが表示されます。

モバイルクライアント

ユーザーがユーザーアイコンを選択すると、そのユーザーのユーザーカードが表示されます。

アダプティブカードの情報マスキング

情報マスキングプロパティを使用して、アダプティブカード Input.Text 入力要素内のユーザーからのパスワードや機密情報などの特定の情報をマスクします。

注:

この機能は、クライアント側の情報マスキングのみをサポートします。マスキングされた入力テキストは、ボット構成中に指定された HTTPS エンドポイントアドレスにクリアテキストとして送信されます。

アダプティブカードで情報をマスクするには、入力input.textするプロパティをstyle追加し、その値を Password に設定します。

マスキングプロパティを備えたアダプティブカードのサンプル

次のコードは、マスキングプロパティを持つアダプティブカードの例を示しています。

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

次の画像は、アダプティブカードのマスキング情報の例です。

アダプティブカードのマスク情報ビューを示すスクリーンショット。

全幅アダプティブカード

プロパティを msteams 使用すると、アダプティブカードの幅を広げ、余分なキャンバス領域を使用できます。次のセクションでは、プロパティの使用方法について説明します。

注:

モバイルや会議側パネルなどの狭いフォームファクターで全幅アダプティブカードをテストして、コンテンツが切り捨てられないようにします。

全幅カードを作成する

全幅アダプティブカードを作成するには、カードコンテンツの msteams プロパティの width オブジェクトを Full に設定する必要があります。

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

全幅アダプティブカードを作成するには、アプリに次のコードサンプルの要素を含める必要があります。

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

次の画像は、全幅アダプティブカードを示しています。

全幅アダプティブカードを示すスクリーンショット。

次の図は、プロパティを Full に設定していない場合のアダプティブカードの既定のビューをwidth示しています。

小さい幅のアダプティブカードを示すスクリーンショット。

アダプティブカードの応答性の高いレイアウト

アダプティブカードは、外観をホストアプリケーションのスタイルに自動的に適応させますが、固定レイアウトは Teams モバイルクライアントとデスクトップクライアント間で同じままです。チャット、チャネル、会議チャット全体でユーザーエクスペリエンスを強化するには、アダプティブカードを設計して、どのデバイスでも見栄えの良いカードを設計する必要があります。この記事では、応答性の高いアダプティブカードの設計について説明します。

アダプティブカードの応答性の高いレイアウトを使用すると、異なるカード幅を対象とする異なるレイアウトのカードを設計できます。

応答性の高いアダプティブカードを設計する

次の場合は、 targetWidth 任意の要素のプロパティを使用します。

カードの幅に基づいて要素を表示または非表示にします。

異なる要素に異なるターゲット幅を設定して、異なるレイアウトを作成します。

次の表に、使用可能な targetWidth 値の一覧を示します。

値	説明
`veryNarrow`	アダプティブカードの幅が会議チャットのように非常に狭い場合は、要素が表示されます。
`narrow`	この要素は、アダプティブカードの幅が狭い場合に表示されます (縦モードの携帯電話など)。
`standard`	要素は、アダプティブカードの幅が標準である場合 (横向きモードの携帯電話、縦向きモードのタブレット、デスクトップ上のチャットなど) に表示されます。
`wide`	要素は、アダプティブカードの幅が横向きモードのタブレット、チャネル、デスクトップのチャットなど、カードを全幅に設定すると表示されます。

プロパティをtargetWidth設定して、と atMost プレフィックスを使用して、カード幅の範囲の要素をatLeast表示することもできます。たとえば、要素を表示できるのは、カードの幅が '標準以上' の場合、またはカードの幅が "狭いまたは下" の場合のみです。次の表は、カード幅の範囲で要素を表示する方法に関するガイダンスを示しています。

例	説明
`"targetWidth": "atLeast:standard"`	要素は、アダプティブカードの幅が標準以上である場合にのみ表示されます。これは、標準またはワイドを意味します。
`"targetWidth": "atMost:narrow"`	要素は、アダプティブカードの幅が最も狭い場合にのみ表示されます。これは、非常に狭いまたは狭いを意味します。

注:

すべての要素に設定 targetWidth する必要はありません。要素に設定targetWidthしない場合、要素は常にカードの幅に関係なく表示されます。

使用せずに targetWidth 設計され、使用するように変更されたアダプティブカードの JSON サンプルを次にtargetWidth示します。

を使用 targetWidthせずに設計されたアダプティブカード:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "Image",
              "style": "Person",
              "url": "https://aka.ms/AAp9xo4",
              "size": "Small"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "medium",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "weight": "Bolder",
              "text": "David Claux",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "medium",
          "items": [
            {
              "type": "TextBlock",
              "text": "Platform Architect",
              "isSubtle": true,
              "wrap": true
            }
          ],
          "width": "stretch",
          "verticalContentAlignment": "center"
        }
      ]
    }
  ],
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5"
}

次の画像は、さまざまなカード幅のアダプティブカードのレンダリングを示しています。

カードの幅が広いと、カードが適切に表示されます。
カードの幅が標準または狭い場合、ロールは絞り込まれます。
カードの幅が非常に狭い場合、名前とロールが大幅に絞り込まれます。

アダプティブカードは、を使用して targetWidth応答性が向上するように更新されました。

  {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "ColumnSet",
        "columns": [
          {
            "type": "Column",
            "targetWidth": "atLeast:narrow",
            "items": [
              {
                "type": "Image",
                "style": "Person",
                "url": "https://aka.ms/AAp9xo4",
                "size": "Small"
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "verticalContentAlignment": "center",
            "items": [
              {
                "type": "TextBlock",
                "weight": "Bolder",
                "text": "David Claux",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "targetWidth": "atMost:narrow",
                "spacing": "None",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "targetWidth": "atLeast:standard",
            "spacing": "medium",
            "items": [
              {
                "type": "TextBlock",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "stretch",
            "verticalContentAlignment": "center"
          }
        ]
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
  }

さまざまなカード幅に対してプロパティを使用した後、targetWidth同じアダプティブカードがどのようにレンダリングされるかを見てみましょう。

カードの幅が広い場合でも、カードは良好に見えます。
カードの幅が標準または狭い場合、ロールは横に並べて表示するスペースがないため、名前の下に移動されます。
カードの幅が非常に狭い場合は、画像を非表示にして、最も意味のある情報のみを保持できます。

アダプティブカードを設計する方法の詳細については、「 Teams アプリのアダプティブカードの設計」を参照してください。

先行入力のサポート

Input.Choiceset スキーマ要素内で、かなりの数の選択肢をフィルタリングして選択するようにユーザーに求めると、タスクの完了が大幅に遅くなる可能性があります。アダプティブカード内の先行入力サポートは、ユーザーが入力を入力するときに入力選択肢のセットを絞り込んだりフィルタリングしたりすることで、入力選択を簡素化できます。

Input.Choiceset 内で先行入力を有効にするには、style を filtered に設定し、isMultiSelect が false に設定されていることを確認します。

先行入力をサポートするサンプルアダプティブカード

次のコードは、先行入力をサポートするアダプティブカードの例を示しています。

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

アダプティブカードの画像のステージビュー

アダプティブカードでは、プロパティを msteams 使用して、Stageview で画像を選択的に表示する機能を追加できます。ユーザーが画像にカーソルを合わせると、allowExpand 属性が true に設定されている拡張アイコンが表示されます。次のコードは、プロパティの msteams 例です。

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

ユーザーが画像の上にマウスポインターを置くと、次の図に示すように、右上隅に展開アイコンが表示されます。

次の図に示すように、ユーザーが展開アイコンを選択すると、イメージが Stageview に表示されます。

Stageview では、ユーザーは画像を拡大および縮小できます。この機能が必要なアダプティブカードの画像を選択できます。

注:

拡大および縮小機能は、アダプティブカードの画像の種類である画像要素にのみ適用されます。
Teams モバイルアプリの場合、アダプティブカードのイメージのステージビュー機能は既定で使用できます。ユーザーは、属性が存在するかどうかに関係なく、イメージをタップするだけで、Stageview でアダプティブカードイメージを allowExpand 表示できます。

コネクタカードでは、Markdown と HTML の書式設定が制限されています。

Style	例	Markdown
太字	text	`text`
斜体	text	`text`
ヘッダー (レベル 1 ~ 3)	Text	`### Text`
取り消し線	~~text~~	`~~text~~`
記号付きリスト	text text	`- Item 1\r- Item 2\r- Item 3`
番号付きリスト	text text	`1. Green\r2. Orange\r3. Blue`
事前書式設定済みのテキスト	`text`	`preformatted text`
Blockquote	>ブロッククォートテキスト	`>blockquote text`
Hyperlink	Bing	`[Bing](https://www.bing.com/)`
画像リンク		`![Duck](https://aka.ms/Fo983c)`

コネクタカードでは、改行は \n\n に対してレンダリングされますが、\n または \r に対してはレンダリングされません。

コネクタカードのモバイルとデスクトップの違い

デスクトップでは、次の図に示すように、コネクタカードの Markdown 書式設定が表示されます。

コネクタカードの Markdown の書式設定を示すスクリーンショット。

iOS では、次の図に示すように、コネクタカードの Markdown 書式設定が表示されます。

Teams iOS クライアントのコネクタカードのマークダウン形式を示すスクリーンショット。

iOS 用 Markdown を使用するコネクタカードには、次の問題があります。

Teams 用の iOS クライアントは、コネクタカードに Markdown または HTML インラインイメージをレンダリングしません。
ブロッククォートはインデントされてレンダリングされますが、背景は灰色ではありません。

Android では、次の図に示すように、コネクタカードの Markdown の書式設定が表示されます。

スクリーンショットは、Teams Android クライアントのコネクタカードのマークダウン形式を示しています。

Markdown コネクタカードの書式の例

次のコードは、Markdown コネクタカードの書式設定の例を示しています。

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card Markdown formatting",
    "sections": [
        {
            "text": "This is some **bold** text"
        },
        {
            "text": "This is some _italic_ text"
        },
        {
            "text": "# Header 1\r## Header 2\r### Header 3"
        },
        {
            "text": "- Bullet \r- List \r"
        },
        {
            "text": "1. Numbered\r1. List \r"
        },
        {
            "text": "Link: [Bing](https://www.bing.com)"
        },
        {
            "text": "embedded image link: ![Duck on a rock](https://aka.ms/Fo983c)"
        },
        {
            "text": "`preformatted text`"
        },
        {
            "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c"
        },
        {
            "text": ">This is a blockquote"
        }
     ]
  }
}

アダプティブカードの CodeBlock

要素 CodeBlock を使用すると、Teams のチャット、チャネル、会議で、リッチフォーマットのアダプティブカードとしてコードスニペットを共有できます。要素を持つアダプティブカードを CodeBlock 使用すると、インデント、番号付け、構文の強調表示がプログラミング言語と一致するため、コードスニペットを読みやすくなります。さらに、アクションボタンを追加して、ソースでコードを表示したり、Microsoft Visual Studio や Microsoft Visual Studio Code などの統合開発環境 (IDE) でコードを編集したりできます。

次のスクリーンショットは、コードスニペットを含むアダプティブカードを示しています。

コードスニペットを含むアダプティブカードを示すスクリーンショット。

要素は CodeBlock 、次の言語をサポートしています。

言語	サポート	言語	サポート
Bash	✔️	JSON	✔️
C	✔️	Perl	✔️
C++	✔️	PHP	✔️
C#	✔️	PowerShell	✔️
CSS	✔️	Python	✔️
Dos	✔️	SQL	✔️
Go	✔️	TypeScript	✔️
GraphQL	✔️	Visual Basic	✔️
HTML	✔️	Verilog	✔️
Java	✔️	Vhdl	✔️
JavaScript	✔️	XML	✔️

注:

スキーマのプロパティで列挙値をにPlainText設定すると、要素はCodeBlockプレーンテキストをlanguage言語として認識します。

次のコードは、コードスニペットを表示するアダプティブカードの例です。

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "editor.js",
            "style": "heading"
        },
        {
            "type": "TextBlock",
            "text": "Lines 61 - 76"
        },
        {
            "type": "CodeBlock",
            "codeSnippet": "/**\n* @author John Smith <john.smith@example.com>\n*/\npackage l2f.gameserver.model;\n\npublic abstract strictfp class L2Char extends L2Object {\n  public static final Short ERROR = 0x0001;\n\n  public void moveTo(int x, int y, int z) {\n    _ai = null;\n    log(\"Shouldn't be called\");\n    if (1 > 5) { // what!?\n      return;\n    }\n  }\n}",
            "language": "java",
            "startLineNumber": 61
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View in Azure Repos",
            "url": "https://azure.microsoft.com/en-us/products/devops/repos/"
        },
        {
            "type": "Action.OpenUrl",
            "title": "Edit in vscode.dev",
            "url": "https://vscode.dev/"
        }
    ]
}

要素は CodeBlock 、次のプロパティをサポートしています。

プロパティ	型	必須	説明
`codeSnippet`	String	はい	アダプティブカードに表示されるコードスニペット。
`language`	列挙	はい	アダプティブカードに表示されるコードスニペットの言語。
`startLineNumber`	番号	いいえ	コードスニペットが開始するソース内の行番号。空白のままにした場合、既定値は 1 になります。

ヒント

特殊文字は、プロパティ内に特定の関数を codeSnippet 持ちます。たとえば、改行文字 \n は改行をトリガーします。
アダプティブカードのコードスニペットの一部として改行文字\nを表示するには、プロパティのように\\ncodeSnippetエスケープしてください。それ以外の場合、Teams は、カードの次の行のの後\nにコードをレンダリングします。

制限事項

要素を CodeBlock 持つアダプティブカードは、Teams Web クライアントとデスクトップクライアントでのみサポートされます。
アダプティブカードのコードスニペットは読み取り専用であり、編集できません。
アダプティブカードでは、コードスニペットの最初の 10 行のみがプレビューされます。 10 行を超えるコードがある場合、ユーザーは [展開 ] を選択して、コードスニペットの残りの部分を表示する必要があります。

Teams のアダプティブカードでは、オーバーフローメニューがサポートされています。アダプティブカード内のすべてのセカンダリアクションのオーバーフローメニューを設定できます。アダプティブカードのオーバーフローメニューは、次のように追加できます。

アクション: アクションでは、プライマリボタンがアダプティブカードに表示され、セカンダリボタンはオーバーフローメニュー内にあります。
ActionSet: ActionSet は、アダプティブカード内の複数のアクションの組み合わせです。各アクションセットにはオーバーフローメニューを含めることができます。

注:

アダプティブカードでは、カードで表示される最大 6 つの主要なアクションがサポートされます。追加のプライマリアクションは、オーバーフローメニューに表示されます。

オーバーフローメニューを有効にするには、アダプティブカードスキーマのまたはのprimarysecondary値を使用してプロパティを構成modeします。次の表では、 mode プロパティについて説明します。

プロパティ	型	必須	説明
`mode`	列挙型 (プライマリ、セカンダリ)	いいえ	アクションがプライマリアクションかセカンダリアクションか。セカンダリアクションはオーバーフローメニューに折りたたまれます。

次の例は、 mode 型と要素の actions プロパティを ActionSet 示しています。

アクション

次の例では、2 つの主要なアクションと 1 つのセカンダリアクションがあります。セカンダリアクションによってオーバーフローメニューが作成されます。

{
   "type": "AdaptiveCard",
   "actions": [
        {
            "type": "Action.Submit",
            "title": "Set due date"
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.Submit",
            "title": "Delete",
            "mode": "secondary"
        }
    ]
}

注:

オーバーフローメニューは、カード送信されたボットと、アダプティブカードのルートレベルactionsのメッセージ拡張機能カードで動作が異なります。カード送信されたボットのオーバーフローメニューはポップアップコンテキストメニューとして表示され、メッセージ拡張機能カード右上隅の [その他のオプション (...)] アイコンの下に表示されます。この動作は、アダプティブカードのに ActionSet 適用されません。

次の図は、カード送信されたボットのオーバーフローメニューとメッセージ拡張機能カードの例です。

アクションセット

次の例では、すべてのアクションがセカンダリとしてマークされているため、カードに 1 つのオーバーフローメニューが表示されます。

{
    "type": "ActionSet",
     "actions": [

          {
           
            "type": "Action.Submit",
            "title": "view",
            "mode": "Secondary" 
       {
       },
            "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"

       },
       {
             "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"
       }
     ]
}

次の例は、Teams デスクトップクライアントとモバイルクライアントのオーバーフローメニューエクスペリエンスを示しています。

デスクトップ
モバイル

ユーザーがデスクトップでオーバーフローメニューを選択すると、セカンダリとして設定されているボタンがアダプティブカードに表示されます。

Teams デスクトップクライアントのアダプティブカードのボタンの例を示すスクリーンショット。

Teams デスクトップクライアントのオーバーフローメニューのアクションの一覧を含むアダプティブカードの例を示すスクリーンショット。

HTML を使用してカードを書式設定する

次のカードタイプは、Teams での HTML 書式設定をサポートしています。

Microsoft 365 グループ用コネクタカード: 制限付きマークダウンと HTML 形式は、Microsoft 365 グループのコネクタカードでサポートされています。
ヒーローカードとサムネイルカード: HTML タグは、ヒーローカードやサムネイルカードなどの簡易カードでサポートされています。

Microsoft 365 グループと単純なカードのコネクタカード用の Teams のデスクトップバージョンとモバイルバージョンでは、書式設定が異なります。このセクションでは、コネクタカードと簡易カードの HTML 書式の例を参照できます。

Microsoft 365 グループ用コネクタカードの HTML 形式
ヒーローカードとサムネイルカードの HTML 書式

コネクタカードでは、Markdown と HTML の書式設定が制限されています。

Style	例	HTML
太字	text	`<strong>text</strong>`
斜体	text	`<em>text</em>`
ヘッダー (レベル 1 ~ 3)	Text	`<h3>Text</h3>`
取り消し線	~~text~~	`<strike>text</strike>`
記号付きリスト	text text	`<ul><li>text</li><li>text</li></ul>`
番号付きリスト	text text	`<ol><li>text</li><li>text</li></ol>`
事前書式設定済みのテキスト	`text`	`<pre>text</pre>`
Blockquote	text	`<blockquote>text</blockquote>`
Hyperlink	Bing	`<a href="https://www.bing.com/">Bing</a>`
画像リンク		`<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>`

コネクタカードでは、改行は <p> タグを使用して HTML でレンダリングされます。

コネクタカードのモバイルとデスクトップの違い

デスクトップでは、次の画像に示すように、コネクタカードの HTML 書式設定が表示されます。

デスクトップクライアントのコネクタカードの HTML 形式を示すスクリーンショット。

iOS では、次の図に示すように HTML 書式設定が表示されます。

iOS クライアントのコネクタカードの HTML 形式を示すスクリーンショット。

iOS 用 HTML を使用するコネクタカードには、次の問題があります。

インラインイメージは、コネクタカードの Markdown または HTML を使用して iOS にレンダリングされません。
事前フォーマットされたテキストはレンダリングされますが、灰色の背景はありません。

Android では、次の図に示すように HTML 書式設定が表示されます。

Android クライアントのコネクタカードの HTML 形式を示すスクリーンショット。

HTML コネクタカードの書式のサンプル

次のコードは、HTML コネクタカードの書式設定の例を示しています。

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

HTML タグは、ヒーローカードやサムネイルカードなどの簡易カードでサポートされます。 Markdown はサポートされていません。

Style	例	HTML
太字	text	`<strong>text</strong>`
斜体	text	`<em>text</em>`
ヘッダー (レベル 1 ~ 3)	Text	`<h3>Text</h3>`
取り消し線	~~text~~	`<strike>text</strike>`
記号付きリスト	text text	`<ul><li>text</li><li>text</li></ul>`
番号付きリスト	text text	`<ol><li>text</li><li>text</li></ol>`
事前書式設定済みのテキスト	`text`	`<pre>text</pre>`
Blockquote	text	`<blockquote>text</blockquote>`
Hyperlink	Bing	`<a href="https://www.bing.com/">Bing</a>`
画像リンク		`<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>`

簡易カードのモバイルとデスクトップの違い

デスクトップとモバイルプラットフォームの間には解像度の違いがあるため、書式設定はデスクトップバージョンとモバイルバージョンの Teams の間で異なります。

デスクトップでは、次の図に示すように HTML 書式設定が表示されます。

デスクトップクライアントの HTML 形式を示すスクリーンショット。

iOS では、次の図に示すように HTML 書式設定が表示されます。

iOS クライアントの HTML 形式を示すスクリーンショット。

太字や斜体などの文字の書式設定は、iOS ではレンダリングされません。

Android では、次の図に示すように HTML 書式設定が表示されます。

Android クライアントの HTML 形式を示すスクリーンショット。

Android では、太字や斜体などの文字の書式設定が正しく表示されます。

簡易カードの書式の例

前のセクションの画像は、Teams App Studio を使用して作成されました。ここで、ヒーローカードのテキストプロパティは次の文字列に設定されています。

<p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>

このコードを変更することで、独自のカードの書式設定をテストできます。

コードサンプル

S.No。	説明	.NET	Node.js	マニフェスト
1	このサンプルアプリは、Teams でサポートされているさまざまなカード形式を示しています。	表示	表示	表示

Teams でカードを書式設定する

Markdown でカードを書式設定する

アダプティブカードの改行

アダプティブカードのモバイルとデスクトップの違い

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

アダプティブカード内でのサポートのメンション

メンション付きアダプティブカードのサンプル

ユーザーメンションでのオブジェクト ID と UPN のMicrosoft Entra

アダプティブカードを使用したボットでのユーザーメンション

例

アダプティブカードを使用した受信 Webhook でのユーザーメンション

例

アダプティブカードのPeople アイコン

クエリパラメーター

アダプティブカードの情報マスキング

マスキングプロパティを備えたアダプティブカードのサンプル

全幅アダプティブカード

全幅カードを作成する

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

アダプティブカードの応答性の高いレイアウト

応答性の高いアダプティブカードを設計する

先行入力のサポート

先行入力をサポートするサンプルアダプティブカード

アダプティブカードの画像のステージビュー

コネクタカードのモバイルとデスクトップの違い

Markdown コネクタカードの書式の例

アダプティブカードの CodeBlock

制限事項

アダプティブカードのオーバーフローメニュー

オーバーフローメニューを有効にする

HTML を使用してカードを書式設定する

コネクタカードのモバイルとデスクトップの違い

HTML コネクタカードの書式のサンプル

簡易カードのモバイルとデスクトップの違い

簡易カードの書式の例

コードサンプル

関連項目

フィードバック

その他のリソース

Teams でカードを書式設定する

Markdown でカードを書式設定する

アダプティブ カードの改行

アダプティブ カードのモバイルとデスクトップの違い

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

アダプティブ カード内でのサポートのメンション

メンション付きアダプティブ カードのサンプル

ユーザー メンションでのオブジェクト ID と UPN のMicrosoft Entra

アダプティブ カードを使用したボットでのユーザー メンション

例

アダプティブ カードを使用した受信 Webhook でのユーザー メンション

例

アダプティブ カードのPeople アイコン

クエリ パラメーター

アダプティブ カードの情報マスキング

マスキング プロパティを備えたアダプティブ カードのサンプル

全幅アダプティブ カード

全幅カードを作成する

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

アダプティブ カードの応答性の高いレイアウト

応答性の高いアダプティブ カードを設計する

先行入力のサポート

先行入力をサポートするサンプル アダプティブ カード

アダプティブ カードの画像のステージビュー

アダプティブ カードの CodeBlock

制限事項

アダプティブ カードのオーバーフロー メニュー

オーバーフロー メニューを有効にする

HTML を使用してカードを書式設定する

コネクタ カードのモバイルとデスクトップの違い

HTML コネクタ カードの書式のサンプル

コード サンプル

関連項目

フィードバック

その他のリソース

アダプティブカードの改行

アダプティブカードのモバイルとデスクトップの違い

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

アダプティブカード内でのサポートのメンション

メンション付きアダプティブカードのサンプル

ユーザーメンションでのオブジェクト ID と UPN のMicrosoft Entra

アダプティブカードを使用したボットでのユーザーメンション

アダプティブカードを使用した受信 Webhook でのユーザーメンション

アダプティブカードのPeople アイコン

クエリパラメーター

アダプティブカードの情報マスキング

マスキングプロパティを備えたアダプティブカードのサンプル

全幅アダプティブカード

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

アダプティブカードの応答性の高いレイアウト

応答性の高いアダプティブカードを設計する

先行入力をサポートするサンプルアダプティブカード

アダプティブカードの画像のステージビュー

アダプティブカードの CodeBlock

アダプティブカードのオーバーフローメニュー

オーバーフローメニューを有効にする

コネクタカードのモバイルとデスクトップの違い

HTML コネクタカードの書式のサンプル

コードサンプル