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

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

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

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

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

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

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

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

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

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

アダプティブ カードの日付と時刻の書式設定とローカライズの詳細については、「 アダプティブ カードのテキスト機能」を参照してください。

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

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

{
    "$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.microsoft.com/?topic=welcome)"
        }
    ]
}

アダプティブ カードでは絵文字がサポートされています。 次のカード ペイロードには、絵文字付きのアダプティブ カードが表示されます:

{
  "$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"
        }
      ]
    }
  ]
}

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

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

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

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

• サポートされているアダプティブカード要素の <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"
          }
        }
      ]
    }
  }
}

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

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

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

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

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

例

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

{
  "$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 でのユーザー メンションの例を次に示します。

{
    "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 でのユーザー メンションを示しています。

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

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

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

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

  次の JSON コードは、ペルソナ カードの例です。

  {
    "$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 コードは、ペルソナ セットの例です。

  {
    "$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"
            }
          ]
        }
      }
    ]
  }
  

  注:

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

次の画像は、アダプティブ カードの人物アイコンの例です。

Schema

次の表に、 Component 要素のプロパティを示します。

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

ボットは、メンバーのリストと、Teams ユーザー ID やMicrosoft Entra情報 (name、id、userPrincipalNameなど) を含むメンバーの基本的なユーザー プロファイルを照会できます。 詳細については、「 名簿またはユーザー プロファイルの取得」を参照してください。

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

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

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

モバイル クライアント

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

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

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

アダプティブ カードで情報をマスクするには、 style プロパティを typeinput.text に追加し、その値を 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"
}

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

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

アダプティブ カードのレスポンシブ レイアウト

アダプティブ カードは、ホスト アプリケーションのスタイルに外観を自動的に適応させますが、Teams モバイル クライアントとデスクトップ クライアント間で同じ固定レイアウトを持ちます。 チャット、チャネル、会議チャット全体で強化されたユーザー エクスペリエンスを提供するには、あらゆるデバイスで美しく表示されるようにアダプティブ カードを設計する必要があります。 この記事では、レスポンシブ アダプティブ カードの設計について説明します。

アダプティブ カードのレスポンシブ レイアウトは、さまざまなカード幅を対象とするさまざまなレイアウトのカードをデザインするのに役立ちます。

レスポンシブ アダプティブ カードをデザインする

任意の要素で targetWidth プロパティを使用すると、次のことができます。

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

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

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

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

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

  例	説明
  "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 プロパティを使用して、ステージビューで画像を選択的に表示する機能を追加できます。 ユーザーが画像にカーソルを合わせると、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 に画像が表示されます。

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

コネクタ カードでは、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/)
画像リンク		

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

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

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

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

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

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

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

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"
        }
     ]
  }
}

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

ユーザーがモバイルでオーバーフロー メニューを選択すると、アダプティブ カードには定義されているボタンが表示されます。 メッセージ オプション付きのカード関連タスクを含むオーバーフロー メニューを表示する統合シートがあります。 メッセージを長押しすると、関連するメッセージの一覧が表示されます。 このオプションは、アクションにのみ使用できます。

コネクタ カードでは、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 書式設定が表示されます。

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

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

• インライン画像は、コネクタ カードの Markdown または HTML を使用して iOS ではレンダリングされません。
• 事前に書式設定されたテキストはレンダリングされますが、背景は灰色ではありません。

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 書式設定が表示されます。

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

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

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

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

簡易カードの書式の例

このコードを変更することで、独自のカードの書式設定をテストできます。ここで、ヒーロー カードの text プロパティは次の文字列に設定されています。

<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>