アダプティブ カードのメディア要素

アダプティブ カードのメディア要素は、強化されたメディア エクスペリエンスを提供し、アダプティブ カードとのエンゲージメントを高めます。 オーディオ クリップやビデオ クリップなどのメディア ファイルをアダプティブ カードに追加できます。

アダプティブ カードは、OneDrive または SharePoint で使用可能なメディア ファイルにアクセスすることで、ビデオ クリップまたはオーディオ クリップを再生します。 Teams のアダプティブ カード内でメディア ファイルを表示できます。

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

注:

デスクトップ クライアントの場合、アダプティブ カードはインラインおよび全画面表示再生をサポートしますが、モバイル クライアントの場合、エクスペリエンスは全画面表示とピクチャインピクチャ (PiP) に制限されます (これにより、他のアプリを開くときにフローティング ウィンドウでビデオをwatchできます)。

アダプティブ カードにメディア要素を追加する

Teams 開発者ポータルまたはアダプティブ カード Designerを使用して、既存または新しいアダプティブ カードにメディア ファイルを追加できます。 アダプティブ カードにメディア ファイルを追加するには、次の手順に従います。

  1. メディア ファイルを OneDrive または SharePoint に追加します。

  2. DriveItem の共有リンクまたは URL を作成します。 OneDrive または SharePoint の [ 共有]、[ コピー] リンク、または [現在の時刻にリンクをコピー ] オプションを使用して、リンクまたは URL を取得することもできます。

    リンクを取得できる場所を示すスクリーンショット。

    注:

    アダプティブ カードでは、アドレス バーから直接コピーされるメディア ファイルのリンクや URL はサポートされていません。

  3. Teams 開発者ポータルまたはアダプティブ カード Designerを使用して、既存のアダプティブ カードを開くか、新しいアダプティブ カードを作成します。

  4. 左側のウィンドウの [ 要素] で 、[ メディア ] を選択し、アダプティブ カードに追加します。

    メディア要素を含むアダプティブ カードを示すスクリーンショット。

  5. [カスタム カード構造体のタイトル] で、[メディア] を選択します。 [ 要素のプロパティ] ウィンドウが表示されます。

  6. [ 要素のプロパティ] セクションで、次のフィールドを更新します。

    • [ ソース] セクションで、URL にメディア ファイルの URL を入力します
    • [ メディア ] セクションの [ポスター URL] に「image URL」と入力します。 詳細については、「 アダプティブ カード メディア」を参照してください。

    メディア要素を含むアダプティブ カード スキーマを示すスクリーンショット。

    注:

    ポスター URL は、モバイル クライアントでのみサポートされています。

  7. [保存] を選択し、[このカードを送信する] を選択します。

    アダプティブ カードを保存して Teams に送信する方法を示すスクリーンショット

    メディア ファイルを含むアダプティブ カードが正常に保存され、Teams チャットに送信されます。 これで、アダプティブ カードでメディア ファイルを再生できます。

    Teams チャットのメディア ファイルを使用したアダプティブ カードを示すスクリーンショット。

次のコードは、メディア要素を含むアダプティブ カードの例を示しています。

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.6",
  "fallbackText": "This card requires CaptionSource to be viewed. Ask your platform to update to Adaptive Cards v1.6 for this and more!",
  "body": [
    {
      "type": "Media",
      "poster": "https://adaptivecards.io/content/poster-video.png",
      "sources": [
    {
          "mimeType": "video/mp4",
          "url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4"
    }
      ]
    }
  ]
}

制限事項

  • アダプティブ カードでは、SharePoint または OneDrive にアップロードされたメディア ファイルのみがサポートされます。
  • ユーザーが SharePoint または OneDrive で使用できるメディア ファイルにアクセスできることを確認します。

コード サンプル

サンプルの名前 説明 .NET
アダプティブ カードのメディア要素 このサンプルでは、ユーザーがメディア ファイルを使用してアダプティブ カードを送信する方法を示します。 表示

関連項目