カードの種類

アダプティブ、ヒーロー、リスト、Microsoft 365 グループ用コネクタカード、領収書、サインイン、サムネイルカード、およびカードコレクションは、Microsoft Teams のボットでサポートされています。これらはBot Framework で定義されたカードに基づいていますが、すべての Bot Framework カードが Teams でサポートされているわけではなく、独自のカードがいくつか追加されています。

さまざまなカードの種類を特定する前に、ヒーローカード、サムネイルカード、アダプティブカードを作成する方法を理解してください。

ヒーローカード、サムネイルカード、アダプティブカードを作成する

Teams の開発者ポータルからヒーローカード、サムネイルカード、アダプティブカードを作成するには:

Teams の開発者ポータルに移動します。
[ アダプティブカードのデザインと構築] を選択します。
[新しいカード] を選択します。
カード名を入力し、[保存] を選択します。
[ヒーローカード]、[サムネイルカード]、または [アダプティブカード] のいずれかのカードを選択します。
[保存] を選択します。
[このカードを送信する] を選択します。カードがチャットメッセージとして送信されます。

カードの例

カードの使用方法の詳細については、Bot Builder SDK v3 のドキュメントで確認できます。 GitHub の Microsoft/BotBuilder のサンプル リポジトリでは、利用できるコードサンプルを参照することができます。カードの例を次に示します:

カードの種類

アプリケーション要件に基づいて、さまざまな種類のカードを識別して使用できます。使用できるカードの種類を次の表に示します:

カードの種類	説明
アダプティブカード	このカードは高度にカスタマイズできます。テキスト、音声、画像、ボタン、入力フィールドの任意の組み合わせが可能です。
ヒーローカード	このカードには、通常、1 つの大きな画像、1 つまたは複数のボタン、少量のテキストが含まれます。
リストカード	このカードには、アイテムのスクロールリストが含まれています。
Microsoft 365 グループ用コネクタカード	複数のセクション、フィールド、画像、アクションを含む柔軟なレイアウトです。
レシートカード	このカードは、ユーザーに領収書を提供します。
サインインカード	このカードを使用すると、ボットはユーザーのサインインを要求できます。
サムネイルカード	このカードには通常、1 つのサムネイル画像、短いテキスト、1 つ以上のボタンが含まれています。
カードコレクション	このカードコレクションは、1 つの応答で複数のアイテムを返す場合に使用します。

さまざまな種類のカードをサポートする機能

カードの種類	ボット	メッセージ拡張機能のプレビュー	メッセージ拡張機能の結果	ダイアログ (TeamsJS v1.x ではタスクモジュールと呼ばれています)	Webhookの送信	受信 Webhook	Microsoft 365 グループ用のコネクタ
アダプティブカード	✔️	❌	✔️	✔️	✔️	✔️	❌
Microsoft 365 グループ用コネクタカード	✔️	❌	✔️	❌	✔️	✔️	✔️
ヒーローカード	✔️	✔️	✔️	❌	✔️	✔️	❌
サムネイルカード	✔️	✔️	✔️	❌	✔️	✔️	❌
リストカード	✔️	❌	❌	❌	✔️	✔️	❌
レシートカード	✔️	❌	❌	❌	❌	✔️	❌
サインインカード	✔️	❌	❌	❌	❌	❌	❌

注:

受信 Webhooks のアダプティブカードでは、ネイティブのアダプティブカードスキーマ要素 (ただし、Action.Submit を除く) がすべて完全にサポートされます。サポートされているアクションは Action.OpenURL、Action.ShowCard、Action.ToggleVisibility、および Action.Executeです。
アダプティブカードは、Microsoft 365 グループの種類の受信 Webhook コネクタのみをサポートします。これらのコネクタの場合、次の形式を使用してアダプティブカードを送信できます。

すべてのカードの共通プロパティ

すべてのカードに適用できる一般的なプロパティを確認できます。

注:

複数のアクションを持つヒーローカードとサムネイルカードは、カルーセルレイアウト内の複数のカードに自動的に分割されます。

インラインカードの画像

カードには、公開されているイメージへのリンクを含めることで、インライン画像を含めることができます。パフォーマンス上の理由から、パブリック Content Delivery Network (CDN) でイメージをホストすることを強くお勧めします。

画像は、画像領域をカバーするための縦横比を維持するために、サイズがスケールアップまたはスケールダウンされます。次に、カードの適切な縦横比を実現するために、中央から画像がトリミングされます。

画像は最大 1024 ピクセル× 1024 ピクセルで、PNG、JPEG、GIF 形式である必要があります。アニメーション GIF および SVG 形式はサポートされていません。

次の表に、インラインカード画像のプロパティを示します。

プロパティ	型	説明
url	URL	画像の HTTPS URL。
alt	文字列	画像のアクセシビリティ対応の説明。

注:

最終的な画像の前にリダイレクトされるイメージ URL がカードに含まれる場合、イメージ URL のリダイレクトはサポートされません。これは、パブリッククラウド上で共有されるイメージに対して発生します。

ボタン

ボタンはカードの下部に上下に並んで表示されます。ボタンのテキストは常に 1 行で表示され、テキストがボタンの幅を超えた場合は切り捨てられます。カードでサポートされている最大数を超えるボタンは表示されません。

詳細については、「カードアクション」を参照してください。

カードの書式設定

カードのテキストの書式設定の詳細については、「カードの書式設定」を参照してください。

すべてのカードの共通プロパティを特定した後、アダプティブカードを操作し、アクション可能なコンテンツを使用するアプリに直接追加することで、エンゲージメントと効率を向上させることができます。

アダプティブカード

重要

このドキュメントはレガシと見なされます。アダプティブカードに関連する包括的な情報とリソースについては、アダプティブカードのドキュメントハブにアクセスしてください。

スクリーンショットは、Microsoft アダプティブカード Web サイトのホームページを示しています。

アダプティブカードドキュメントハブには、完全かつ最新のリファレンスドキュメント、更新された Adaptive Card Designer、組み込みの JSON サンプル、デザインのベストプラクティス、アダプティブカード機能の詳細なリリース履歴が用意されています。詳細については、「アダプティブカードのドキュメントハブと新しいアダプティブカードの更新の概要」を参照してください。

カスタマイズができるカードで、テキスト、音声、画像、ボタン、入力フィールドの任意の組み合わせを含めることができます。詳細については「アダプティブカード」を参照してください。

アダプティブカードテンプレートを調べるには、「アダプティブカードスターターコレクション」を参照してください。

アダプティブカードのサポート

次の表に、アダプティブカードをサポートする機能を示します:

Teams の Bot	タブ	メッセージ拡張機能	コネクタ	Bot Framework
✔️	❌	✔️	❌	✔️

注:

Teams プラットフォームでは、ボットが送信したカードとアクションベースのメッセージ拡張機能用のアダプティブカード機能が v1.6 以前でサポートされています。
Teams プラットフォームでは、ユーザーが送信するカード (検索ベースのメッセージ拡張機能とリンクの展開)、ダイアログなど、他の機能のアダプティブカード機能の v1.6 以前がサポートされています。
肯定的または破壊的なアクションのスタイル設定は、Teams プラットフォームのアダプティブカードではサポートされていません。
モバイルや会議のサイドパネルなどの狭いフォームファクターで全幅アダプティブカードをテストし、コンテンツが切り捨てられないことを確認します。
Teams 内のアダプティブカードでは、ファイルまたは画像のアップロードはサポートされていません。
アダプティブカードのAction.Submit型の isEnabled プロパティは、Teams ではサポートされていません。
Microsoft Teams モバイルアプリは、バージョン 1.6 までのアダプティブカードをサポートします。 1.6 以降のスキーマバージョンを使用するカードは、モバイルデバイスで正しくレンダリングされないか、機能が制限されているか一貫性がない可能性があります。最良の結果を得るには、バージョン 1.6 内のアダプティブカードを使用してください。

アダプティブカードの例

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

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

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Publish Adaptive Card schema",
            "weight": "bolder",
            "size": "medium"
          },
          {
            "type": "ColumnSet",
            "columns": [
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "Image",
                    "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                    "size": "small",
                    "style": "person"
                  }
                ]
              },
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Matt Hidinger",
                    "weight": "bolder",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "spacing": "none",
                    "text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
                    "isSubtle": true,
                    "wrap": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
            "wrap": true
          },
          {
            "type": "FactSet",
            "facts": [
              {
                "title": "Board:",
                "value": "Adaptive Card"
              },
              {
                "title": "List:",
                "value": "Backlog"
              },
              {
                "title": "Assigned to:",
                "value": "Matt Hidinger"
              },
              {
                "title": "Due date:",
                "value": "Not set"
              }
            ]
          }
        ]
      }
    ],
    "actions": [
      {
        "type": "Action.ShowCard",
        "title": "Set due date",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Date",
              "id": "dueDate"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      },
      {
        "type": "Action.ShowCard",
        "title": "Comment",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Text",
              "id": "comment",
              "isMultiline": true,
              "placeholder": "Enter your comment"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      }
    ]
  }  
}

アダプティブカードのベストプラクティス

アダプティブカードは、水平スクロールを表示してはなりません。水平スクロールを避けるために、固定幅を指定しないでください。

ColumnSets
- 3 つ以上の列を持つ列セットを定義することは避けてください。
- セット内の複数の列で明示的にピクセル幅を使用しないでください。
- 明示的な幅を使用する場合は、列が可能な限り狭いカード幅の 4 分の 1 以上を使用するようにする値を指定しないでください (たとえば、会議チャットウィンドウまたは Microsoft 365 Copilot のカード幅)。
- 一般に、48 ピクセルは使用する明示的な最大幅とほぼ同じですが、シナリオによっては例外があります。
イメージのサイズ変更
- 複数の列を持つ ColumnSet 内の画像を使用する場合は、画像自体ではなく、画像を含む列のサイズを指定することをお勧めします (画像のサイズを "auto" または "stretch" に設定します)。
- 画像が ColumnSet にない場合は、通常、そのサイズを "auto" または "stretch" に設定することをお勧めします。
- 明示的に幅をピクセル単位で設定する場合は、最も狭いカード幅の 3/4 を超えないようにします。
- 明示的なピクセル単位のサイズ変更を使用する場合は、幅または高さのどちらかを設定しますが、両方は設定しないでください。 1 つだけ設定すると、画像の縦横比が適切になります。
- 通常は、高さではなく画像の幅のみを設定しますが、シナリオによっては例外があります。

アダプティブカードの追加情報

注:

Teams ボットのアダプティブカードの speak プロパティは、イマーシブリーダーでのみサポートされています。

アダプティブカードでは、ドル記号 ($) と中かっこを使用して動的な値を渡すことができます。詳細については、「アダプティブカードのテンプレート作成」を参照してください。

例:

{ 
 "type": "TextBlock",
 "text": "${titleText}",
 "size": "default",
 "weight": "bolder"
}

以下の Bot Framework リファレンスを参照してください。

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

これで、潜在的なユーザー選択を視覚的に強調表示するために使用する多目的カードであるヒーローカードを使用できます。

ボットは、チャネルに投稿されたアダプティブカード内のタグをメンションできます。詳細については、「タグのメンション」を参照してください。

ヒーローカード

通常、1 つの大きな画像、1 つまたは複数のボタン、テキストを含むカードです。

ヒーローカードでのサポート

次の表に、ヒーローカードをサポートする機能を示します。

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	✔️	❌	✔️

ヒーローカードのプロパティ

次の表に、ヒーローカードのプロパティを示します。

プロパティ	型	説明
title	リッチテキスト	カードのタイトル。最大 2 行。
サブタイトル	リッチテキスト	カードのサブタイトル。最大 2 行。
テキスト	リッチテキスト	字幕の下にテキストが表示されます。書式設定オプションについては、「カードの書式設定」を参照してください。
images	画像の配列	カードの上部に表示される画像。縦横比は 16:9 です。
buttons	Action オブジェクトの配列	現在のカードに適用できるアクション一式。最大 6 です。
tap	Action オブジェクト	ユーザーがカード自体をタップするとアクティブ化されます。

ヒーローカードの例

スクリーンショットは、ヒーローカードの例を示しています。

次のコードはヒーローカードの一例を示します:

{
   "contentType": "application/vnd.microsoft.card.hero",
   "content": {
     "title": "Seattle Center Monorail",
     "subtitle": "Seattle Center Monorail",
     "text": "The Seattle Center Monorail is an elevated train line between Seattle Center (near the Space Needle) and downtown Seattle. It was built for the 1962 World's Fair. Its original two trains, completed in 1961, are still in service.",
     "images": [
       {
         "url":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Seattle_monorail01_2008-02-25.jpg/1024px-Seattle_monorail01_2008-02-25.jpg"
       }
     ],
    "buttons": [
      {
         "type": "openUrl",
         "title": "Official website",
         "value": "https://www.seattlemonorail.com"
       },
      {
        "type": "openUrl",
        "title": "Wikipedia page",
        "value": "https://en.wikipedia.org/wiki/Seattle_Center_Monorail"
       }
     ]
   }
}

ヒーローカードに関する追加情報

以下の Bot Framework リファレンスを参照してください。

リストカード

リストカードは Teams で追加されたもので、リストコレクションを上回る機能が備わっています。リストカードは、アイテムのスクロールリストを提供します。

リストカードでのサポート

次の表に、リストカードをサポートする機能を示します:

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	❌	❌	✔️

リストカードのプロパティ

次の表に、リストカードのプロパティを示します:

プロパティ	型	説明
title	リッチテキスト	カードのタイトル。最大 2 行。
アイテム	リストアイテムの配列	カードに適用可能なアイテムのセット。
buttons	Action オブジェクトの配列	現在のカードに適用できるアクション一式。最大で 6 までサポートされています。

リストカードの例

以下のコードはその例を示しています:

{
  "contentType": "application/vnd.microsoft.teams.card.list",
  "content": {
    "title": "Card title",
    "items": [
      {
        "type": "file",
        "id": "https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx",
        "title": "Report",
        "subtitle": "teams > new > design",
        "tap": {
          "type": "imBack",
          "value": "editOnline https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx"
        }
      },
      {
        "type": "resultItem",
        "icon": "https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Trello-128.png",
        "title": "Trello title",
        "subtitle": "A Trello subtitle",
        "tap": {
          "type": "openUrl",
          "value": "http://trello.com"
        }
      },
      {
        "type": "section",
        "title": "Manager"
      },
      {
        "type": "person",
        "id": "JohnDoe@contoso.com",
        "title": "John Doe",
        "subtitle": "Manager",
        "tap": {
          "type": "imBack",
          "value": "whois JohnDoe@contoso.com"
        }
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Select",
        "value": "whois"
      }
    ]
  }
}

Microsoft 365 グループ用コネクタカード

柔軟なレイアウトを提供し、有用な情報を取得するための優れた方法である Microsoft 365 グループ用のコネクタカードを使用できます。 Microsoft 365 グループ用のコネクタカードは、Bot Framework ではなく Teams でサポートされています。このカードには、複数のセクション、フィールド、画像、アクションに対応した柔軟なレイアウトが適用されています。このカードには、ボットで使用できるようにコネクタカードが含まれています。コネクタカードと Microsoft 365 グループ用コネクタカードの違いについては、「Microsoft 365 グループ用コネクタカード」を参照してください。

Microsoft 365 グループ用コネクタカードのサポート

次の表は、Microsoft 365 グループ用コネクタカードをサポートする機能を示しています。

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	✔️	✔️	❌

Microsoft 365 グループ用コネクタカードのプロパティ

次の表に、Microsoft 365 グループのコネクタカードのプロパティを示します。

プロパティ	型	説明
title	リッチテキスト	カードのタイトル。最大 2 行。
概要	リッチテキスト	カードにテキストプロパティが含まれていない場合は必須、それ以外の場合は省略可能です。 [概要] プロパティは通常、Teams の通知ポップアップに表示され、カードの概要をすばやく判断できるようになります。必ず概要を含めてください。概要に詳細を含めないでください。たとえば、Twitter の投稿の場合、ツイート自体の内容には触れずに、概要に「 @someuser からの新しいツイート」と読み上げる場合があります。
テキスト	リッチテキスト	字幕の下にテキストが表示されます。書式設定オプションについては、「カードの書式設定」を参照してください。
themeColor	16 進数文字列	アプリケーションマニフェストで提供される `accentColor` よりも優先される色です。

Microsoft 365 グループのコネクタカードのプロパティの詳細については、「カードフィールド」を参照してください。

Microsoft 365 グループ用コネクタカードに関する追加情報

Microsoft 365 グループ用コネクタカードは、ActionCardアクションを含め、Microsoft Teamsで正しく機能します。

コネクタからコネクタカードを使用するのと、ボットでコネクタカードを使用する際の重要な違いは、カードアクションの処理です。次の表に、相違点の一覧を示します:

Connector	Bot
エンドポイントは、HTTP POST を介してカードペイロードを受け取ります。	ボットの場合、`HttpPOST` アクションが、アクション ID と本文のみをボットに送信する `invoke` アクティビティをトリガーします。

各コネクタカードには最大 10 個のセクションを表示でき、各セクションには最大 5 つの画像と 5 つのアクションを含めることができます。

注:

メッセージ内の他のセクション、画像、アクションは表示されません。

すべてのテキストフィールドは Markdown と HTML をサポートしています。メッセージの markdown プロパティを設定して、Markdown または HTML を使用するセクションを制御することができます。既定では markdown が true に設定されています。 HTML を代わりに使用する場合は、markdown を false に設定します。

themeColor プロパティを指定すると、そのプロパティがアプリのマニフェストの accentColor プロパティよりも優先されます。

activityImage のレンダリングスタイルを指定するには、次の表に示すように activityImageType を設定することができます。

値	説明
`avatar`	既定値は `activityImage` で円形にトリミングされます。
`article`	`activityImage` は四角形として表示され、縦横比が維持されます。

コネクタカードのプロパティのその他の詳細については、「操作可能なメッセージカードのリファレンス」を参照してください。 Teams がサポートしていないコネクタカードのプロパティは、次のとおりのみです。

heroImage
hideOriginalBody
Teams では startGroup は常に true として扱われます
originator
correlationId

Microsoft 365 グループ用コネクタカードの例

次のコードは、Microsoft 365 グループ用のコネクタカードの例を示しています。

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "John Doe commented on Trello",
    "title": "Project Tango",
    "sections": [
        {
            "activityTitle": "John Doe commented",
            "activitySubtitle": "On Project Tango",
            "activityText": "\"Here are the designs\"",
            "activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg"
        },
        {
            "title": "Details",
            "facts": [
                {
                    "name": "Labels",
                    "value": "Designs, redlines"
                },
                {
                    "name": "Due date",
                    "value": "Dec 7, 2016"
                },
                {
                    "name": "Attachments",
                    "value": "[final.jpg](http://connectorsdemo.azurewebsites.net/images/WIN14_Jan_04.jpg)"
                }
            ]
        },
        {
            "title": "Images",
            "images": [
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/MicrosoftSurface_024_Cafe_OH-06315_VS_R1c.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Scene_01.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Anthony_02.jpg"
                }
            ]
        }
    ],
    "potentialAction": [
        {
            "@context": "http://schema.org",
            "@type": "ViewAction",
            "name": "View in Trello",
            "target": [
                "https://trello.com/c/1101/"
            ]
        }
    ]
  }
}

レシートカード

Teams ではレシートカードがサポートされています。これにより、ボットはユーザーに領収書を提供できます。通常、税金や合計情報など、領収書に含めるアイテムの一覧が含まれます。

レシートカードでのサポート

次の表に、レシートカードをサポートする機能を示します:

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	✔️	❌	✔️

レシートカードの例

スクリーンショットは、レシートカードの例を示しています。

次のコードはレシートカードの一例を示します:

{
  "contentType": "application/vnd.microsoft.card.receipt",
  "content": {
    "title": "John Doe",
    "facts": [
      {
        "key": "Order Number",
        "value": "1234"
      },
      {
        "key": "Payment Method",
        "value": "VISA 5555-****"
      }
    ],
    "items": [
      {
        "title": "Data Transfer",
        "image": {
          "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png"
        },
        "price": "$ 38.45",
        "quantity": "368"
      },
      {
        "title": "App Service",
        "image": {
          "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/cloud-service.png"
        },
        "price": "$ 45.00",
        "quantity": "720"
      }
    ],
    "total": "$ 90.95",
    "tax": "$ 7.50",
    "buttons": [
      {
        "type": "openUrl",
        "title": "More information",
        "image": "https://account.windowsazure.com/content/6.10.1.38-.8225.160809-1618/aux-pre/images/offer-icon-freetrial.png",
        "value": "https://azure.microsoft.com/en-us/pricing/"
      }
    ]
  }
}

レシートカードに関する追加情報

以下の Bot Framework リファレンスを参照してください。

Teams のサインインカードは、Bot Framework のサインインカードに似ていますが、Teams のサインインカードは signin と openUrl の 2 つのアクションのみをサポートする点が異なります。

サインインアクションは、サインインカードだけでなく、Teams 内の任意のカードから使用できます。詳細については、「ボットでの認証フロー」を参照してください。

次の表に、サインインカードをサポートする機能を示します。

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	❌	❌	✔️

以下の Bot Framework リファレンスを参照してください。

サムネイルカード

簡単な操作可能なメッセージの送信に使用されるサムネイルカードを操作できます。通常、1 つのサムネイル画像、1 つまたは複数のボタン、テキストを含むカードです。

サムネイルカードでのサポート

次の表に、サムネイルカードをサポートする機能を示します:

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	✔️	❌	✔️

サムネイルカードのプロパティ

次の表に、サムネイルカードのプロパティを示します:

プロパティ	型	説明
title	リッチテキスト	カードのタイトル。最大 2 行。
サブタイトル	リッチテキスト	カードのサブタイトル。最大 2 行。
テキスト	リッチテキスト	字幕の下にテキストが表示されます。書式設定オプションについては、「カードの書式設定」を参照してください。
images	画像の配列	カードの上部に表示される画像。縦横比は 1:1 の正方形です。
buttons	Action オブジェクトの配列	現在のカードに適用できるアクション一式。最大で 6 までサポートされています。
tap	Action オブジェクト	ユーザーがカード自体をタップするとアクティブ化されます。

サムネイルカードの例

次のコードはサムネイルカードの一例を示します:

{
  "contentType": "application/vnd.microsoft.card.thumbnail",
  "content": {
    "title": "Bender",
    "subtitle": "tale of a robot who dared to love",
    "text": "Bender Bending Rodríguez is a main character in the animated television series Futurama. He was created by series creators Matt Groening and David X. Cohen, and is voiced by John DiMaggio",
    "images": [
      {
        "url": "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png",
        "alt": "Bender Rodríguez"
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Thumbs Up",
        "image": "http://moopz.com/assets_c/2012/06/emoji-thumbs-up-150-thumb-autox125-140616.jpg",
        "value": "I like it"
      },
      {
        "type": "imBack",
        "title": "Thumbs Down",
        "image": "http://yourfaceisstupid.com/wp-content/uploads/2014/08/thumbs-down.png",
        "value": "I don't like it"
      },
      {
        "type": "openUrl",
        "title": "I feel lucky",
        "image": "http://thumb9.shutterstock.com/photos/thumb_large/683806/148441982.jpg",
        "value": "https://www.bing.com/images/search?q=bender&qpvt=bender&qpvt=bender&qpvt=bender&FORM=IGRE"
      }
    ],
    "tap": {
      "type": "imBack",
      "value": "Tapped it!"
    }
  }
}

ページの先頭へ

以下の Bot Framework リファレンスを参照してください。

カードコレクション

カルーセルコレクションとリストコレクションを含むカードコレクションを使用できます。 Teams ではカードコレクションがサポートされています。カードコレクションには、 builder.AttachmentLayout.carousel と builder.AttachmentLayout.list が含まれます。これらのコレクションには、アダプティブカード、ヒーローカード、またはサムネイルカードを含めることができます。

カルーセルコレクション

カルーセルのレイアウトでカードのカルーセルが表示され、関連付けられたアクションボタンがオプションで示されます。

カルーセルコレクションでのサポート

次の表に、カルーセルコレクションをサポートする機能を示します:

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	❌	❌	✔️

注:

カルーセルでは、メッセージごとに最大 10 枚のカードを表示することができます。

カルーセルカードのプロパティ

カルーセルカードのプロパティは、ヒーローカードとサムネイルカードのプロパティと同じです。

カルーセルコレクションの例

スクリーンショットは、カルーセルコレクションの例を示しています。

次のコードは、カルーセルコレクションの例を示しています:

{
 "attachmentLayout": "carousel",
 "attachments":[
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "extraLarge",
                "weight": "bolder",
                "text": "Welcome to Employee Connect",
                "height": "stretch"
              },
              {
                "type": "TextBlock",
                "size": "medium",
                "weight": "bolder",
                "text": "Add events to your calendar",
                "height": "stretch"
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "The bot can send \r\rnotification to remind \r\ryou about the latest \r\revents and trainings.",
                "wrap": true,
                "height": "stretch"
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    },
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.2",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "large",
                "weight": "bolder",
                "text": "Employee connect"
              },
              {
                "type": "TextBlock",
                "text": "The bot can send notifications \r\rto remind you about the latest \r\r events and trainings",
                "wrap": true,
                "maxWidth": 2
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    },
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "large",
                "weight": "bolder",
                "text": "Employee Connect final"
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "Create and manage your tasks",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "text": "The app identifies all your pending tasks \r\r and helps you manage everything at \r\r one place.",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "Try these commands \r\r- Pending Submissions \r\r- Pending Approvals- My Tools",
                "wrap": true,
                "height": "stretch"
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    }
  ]
}

カルーセルコレクションの構文

builder.AttachmentLayoutTypes.Carousel は、カルーセルコレクションの構文です。

リストコレクション

リストのレイアウトでカードが縦方向に一覧表示され、関連付けられたアクションボタンがオプションで示されます。

リストコレクションでのサポート

次の表に、リストコレクションをサポートする機能を示します:

Teams の Bot	メッセージ拡張機能	コネクタ	Bot Framework
✔️	✔️	❌	✔️

リストコレクションの例

スクリーンショットは、リストコレクションの例を示しています。

リストコレクションのプロパティは、ヒーローカードまたはサムネイルカードのプロパティと同じです。

リストでは、メッセージごとに最大 10 枚のカードを表示することができます。

注:

リストカードの一部の組み合わせは、iOS と Android ではまだサポートされていません。

リストコレクションの構文

builder.AttachmentLayout.list はリストコレクションの構文です。

Teams でサポートされていないカード

次のカードは Bot Framework によって実装されていますが、Teams ではサポートされていません。

アニメーションカード
オーディオカード
ビデオカード

コードサンプル

S.No。	説明	.NET	Node.js	マニフェスト
1	このサンプルでは、ボットを使用して、アダプティブ、ヒーロー、サムネイル、OAuth カードなど、複数の種類のカードを Microsoft Teams で送信する方法を示します。セットアップ、展開、アプリのインストールの手順について説明します。	表示	表示	表示

フィードバック

このページはお役に立ちましたか?

Last updated on 2024-09-16

カードの種類

ヒーロー カード、サムネイル カード、アダプティブ カードを作成する

カードの例

カードの種類

さまざまな種類のカードをサポートする機能

すべてのカードの共通プロパティ

インライン カードの画像

ボタン

カードの書式設定

アダプティブ カード

アダプティブ カードのサポート

アダプティブ カードの例

アダプティブ カードのベスト プラクティス

アダプティブ カードの追加情報

ヒーロー カード

ヒーロー カードでのサポート

ヒーロー カードのプロパティ

ヒーロー カードの例

ヒーロー カードに関する追加情報

リスト カード

リスト カードでのサポート

リスト カードのプロパティ

リスト カードの例

Microsoft 365 グループ用コネクタ カード

Microsoft 365 グループ用コネクタ カードのサポート

Microsoft 365 グループ用コネクタ カードのプロパティ

Microsoft 365 グループ用コネクタ カードに関する追加情報

Microsoft 365 グループ用コネクタ カードの例

レシート カード

レシート カードでのサポート

レシート カードの例

レシート カードに関する追加情報

サインイン カード

サインイン カードのサポート

サインイン カードに関する追加情報

サムネイル カード

サムネイル カードでのサポート

サムネイル カードのプロパティ

サムネイル カードの例

ページの先頭へ

カード コレクション

カルーセル コレクション

カルーセル コレクションでのサポート

カルーセル カードのプロパティ

カルーセル コレクションの例

カルーセル コレクションの構文

リスト コレクション

リスト コレクションでのサポート

リスト コレクションの例

リスト コレクションの構文

Teams でサポートされていないカード

コード サンプル

関連項目

フィードバック

その他のリソース

ヒーローカード、サムネイルカード、アダプティブカードを作成する

インラインカードの画像

アダプティブカード

アダプティブカードのサポート

アダプティブカードの例

アダプティブカードのベストプラクティス

アダプティブカードの追加情報

ヒーローカード

ヒーローカードでのサポート

ヒーローカードのプロパティ

ヒーローカードの例

ヒーローカードに関する追加情報

リストカード

リストカードでのサポート

リストカードのプロパティ

リストカードの例

Microsoft 365 グループ用コネクタカード

Microsoft 365 グループ用コネクタカードのサポート

Microsoft 365 グループ用コネクタカードのプロパティ

Microsoft 365 グループ用コネクタカードに関する追加情報

Microsoft 365 グループ用コネクタカードの例

レシートカード

レシートカードでのサポート

レシートカードの例

レシートカードに関する追加情報

サインインカード

サインインカードのサポート

サインインカードに関する追加情報

サムネイルカード

サムネイルカードでのサポート

サムネイルカードのプロパティ

サムネイルカードの例

カードコレクション

カルーセルコレクション

カルーセルコレクションでのサポート

カルーセルカードのプロパティ

カルーセルコレクションの例

カルーセルコレクションの構文

リストコレクション

リストコレクションでのサポート

リストコレクションの例

リストコレクションの構文

コードサンプル