Share via


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

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

カードは、タイトル プロパティや字幕プロパティではなく、テキスト プロパティでのみ書式設定をサポートします。 カードの種類に応じて、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 書式の例を紹介します。

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

Style Markdown
太字 Bold **Bold**
斜体 Italic _Italic_
記号付きリスト
  • text
  • text
- Item 1\r- Item 2\r- Item 3
番号付きリスト
  1. text
  2. 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 デスクトップクライアントとモバイル クライアントのアダプティブ カードのユーザー アイコンを示しています。

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

スクリーンショットは、Teams デスクトップ クライアントのアダプティブ カードのペルソナとペルソナ セットのアイコンを示しています。

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

モバイル クライアント

スクリーンショットは、Teams モバイル クライアントで設定されたペルソナとペルソナのユーザー アイコンの例を示しています。

スクリーンショットは、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 プロパティを使用せずに設計されている場合、幅が広いカードアダプティブ カードがどのようにレンダリングされるかを示すスクリーンショット。

    • カードの幅が標準または狭い場合、ロールは絞り込まれます。

      カードが targetWidth プロパティを使用せずに設計されている場合に、幅が標準または狭カードアダプティブ カードがどのようにレンダリングされるかを示すスクリーンショット。

    • カードの幅が非常に狭い場合、名前とロールが大幅に絞り込まれます。

      カードが targetWidth プロパティを使用せずに設計されている場合、カード幅が非常に狭いアダプティブ カードがどのようにレンダリングされるかを示すスクリーンショット。

  • アダプティブ カードは、 を使用して 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同じアダプティブ カードがどのようにレンダリングされるかを見てみましょう。

    • カードの幅が広い場合でも、カードは良好に見えます。

      targetWidth プロパティの幅が広い場合にアダプティブ カードがどのようにレンダリングされるかを示すスクリーンショット。

    • カードの幅が標準または狭い場合、ロールは横に並べて表示するスペースがないため、名前の下に移動されます。

      targetWidth プロパティが標準または狭い場合にアダプティブ カードがどのようにレンダリングされるかを示すスクリーンショット。

    • カードの幅が非常に狭い場合は、画像を非表示にして、最も意味のある情報のみを保持できます。

      targetWidth プロパティが veryNarrow の場合にアダプティブ カードがどのようにレンダリングされるかを示すスクリーンショット。

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

先行入力のサポート

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

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

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

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

{
   "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 に表示されます。

Screesnhots は、Stageview に展開されたイメージを示します。

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

注:

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

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

Teams デスクトップ クライアントのオーバーフロー メニューのオプションとしてセカンダリとして設定されているボタンを含むアダプティブ カードの例を示すスクリーンショット。

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

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

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

Microsoft 365 グループと単純なカードのコネクタ カード用の Teams のデスクトップバージョンとモバイル バージョンでは、書式設定が異なります。 このセクションでは、コネクタ カードと簡易カードの 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>
番号付きリスト
  1. text
  2. 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>"
        }
     ]
  }
}

コード サンプル

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

関連項目