サードパーティのクラウドストレージアプリ

[アーティクル]
02/06/2025

Microsoft Teamsでは、既定のストレージを OneDrive と SharePoint から優先サードパーティのクラウドストレージプロバイダーアプリに柔軟に変更できます。 Teams チャットまたはチャネルのメッセージ作成領域にファイルをドラッグアンドドロップすると、Microsoft Teams JavaScript クライアントライブラリ (TeamsJS) を使用して、ファイルをサードパーティのクラウドストレージに格納できます。

前提条件

Teams アプリで、ドラッグアンドドロップされたファイルのサードパーティ製クラウドストレージをサポートする場合:

TeamsJS SDK の最新バージョンを使用します。
アプリマニフェスト (以前は Teams アプリマニフェストと呼ばれる) は、サードパーティのストレージアプリのアプリ ID で構成する必要があります。 defaultFilesUploadAppId という名前のプロパティを検索し、アプリ ID を構成します。

注:

プレーン文字列のみを使用し、逆コンマを使用しないでください。

または、管理者はサードパーティのクラウドストレージアプリ ID を構成することもできます。詳細については、「サードパーティのストレージへのファイルのドラッグドロップの管理設定」を参照してください。

アプリマニフェストには、 Uploadとしての最初のアクションが必要です。ファイルがメッセージ作成領域にドラッグアンドドロップされると、このアクションによってアプリがアップロードモードで自動的に開きます。

次のコードサンプルは、composeExtensionsの下にUploadとして追加された最初のアクションを示しています。

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
  "manifestVersion": "1.9",
  "version": "2.3.1",
  "id": "id",
  "developer": {
    "name": "Microsoft",
    "websiteUrl": "https://dev.botframework.com",
    "privacyUrl": "https://privacy.microsoft.com",
    "termsOfUseUrl": "https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default.aspx"
  },
  "name": {
    "short": "Third-Party Cloud Storage",
    "full": "Third-Party Cloud Storage Integration"
  },
  "description": {
    "short": "Enable drag-and-drop file uploads to third-party cloud storage.",
    "full": "This app enables seamless integration with third-party cloud storage providers for files dragged and dropped in Teams chats or channels. It uses the Microsoft Teams JavaScript SDK's thirdPartyCloudStorage module to fetch and upload files efficiently."
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#FFFFFF",
  "bots": [
    {
      "botId": "${{AAD_APP_CLIENT_ID}}",
      "needsChannelSelector": false,
      "isNotificationOnly": false,
      "supportsCalling": false,
      "supportsVideo": false,
      "supportsFiles": false,
      "scopes": [
        "team",
        "personal",
        "groupChat"
      ]
    }
  ],
  "composeExtensions": [
    {
      "botId": "botid",
      "canUpdateConfiguration": false,
      "commands": [
        {
          "id": "getUpload",
          "type": "action",
          "title": "Create Card",
          "description": "Example of creating a Card",
          "initialRun": false,
          "fetchTask": true,
          "context": [
            "compose"
          ],
          "parameters": [
            {
              "name": "param",
              "title": "param",
              "description": ""
            }
          ]
        }
      ]
    }
  ],
  "permissions": [
    "identity"
  ],
  "validDomains": [
    "*.testApp.com"
  ]
}

ファイルをサードパーティのクラウドストレージにドラッグアンドドロップする

Teams アプリにサードパーティ製のストレージを設定する場合は、TeamsJS SDK でthirdPartyCloudStorageのgetDragAndDropFiles API を使用する必要があります。この API を使用すると、Teams チャットまたはチャネルのメッセージ作成領域からサードパーティのストレージアプリにファイルをアップロードできます。

注:

thirdPartyCloudStorage API は、ファイルがドラッグアンドドロップされるシナリオでのみ使用されます。メッセージ作成ツールバーのプラス記号アイコンを使用してファイルを追加する場合は使用されません。

Teams でドラッグアンドドロップされたファイルにサードパーティ製のクラウドストレージを実装するには、次の手順に従います。

プロパティ defaultFilesUploadAppId がサードパーティのストレージアプリ ID で構成されており、最初のアクションがアプリマニフェストで Upload として設定されていることを確認します。
アプリケーションコンテキストから次のパラメーターを使用して、一意の ID を作成します。
- const uniqueIdForChats = replyToId + id (つまり、 threadId)。
  
  上記のすべての値は、アプリケーションコンテキストに存在します。 "commandContext" = "thirdParty"場合は、サードパーティのクラウドストレージアプリがプログラムで開かれていることを判断するのに役立ちます。コンテキストに replyToId が存在しない場合、一意の ID は ""+threadId。
  
  次の図は、一意の ID を作成するための値が強調表示されたアプリケーションコンテキストのサンプルを示しています。
TeamsJS SDK のthirdPartyCloudStorageのgetDragAndDropFiles API を使用して、ドラッグアンドドロップされたファイルをフェッチします。

コールバック関数は、ファイルを受信して処理するために実装されます。

コールバック： (files: FilesFor3PStorage[], error?: SdkError): void;**

次のコードサンプルは、コールバック関数を示しています。

microsoftTeams.initialize(() => {
  microsoftTeams.getContext((context) => {
    console.log(`Context is ${JSON.stringify(context)}`);
  });

  let inputthreadId = "19:8c24b2ac42924ca3b8e220b3a48d8f9a@thread.v2";
  let replyChainIdforChats = "";
  const uniqueIdForChats = replyChainIdforChats + inputthreadId;
  let mediaData = [];

  microsoftTeams.thirdPartyCloudStorage.getDragAndDropFiles(inputthreadId, (medias, err) => {
    document.getElementById("hubState").innerText = JSON.stringify(inputthreadId);
    console.log("inside getDragAndDropFiles");

    if (err) {
      console.log("error while calling getDragAndDropFiles API");
      document.getElementById("getDragAndDropFiles").innerText = JSON.stringify(err);
      console.log(err);
      return;
    }

    console.log("no error");
    const media = medias;
    console.log(media);

    medias.forEach((media) => {
        console.log(`Name: ${media.name}`);
        console.log(`Type: ${media.type}`);
        console.log(`Size: ${media.size}`);

        mediaData.push({
            name: media.name,
            type: media.type,
            size: media.size,
        });

        // Example 1: Bind mediaData to HTML (e.g., create a table row for each file)
        // Example 2: Add blob storage functionality for downloading the file
    });
  });
});

その後、サードパーティのクラウドストレージアプリは、受信したファイルをサードパーティのクラウドストレージにアップロードします。

ファイルをサードパーティのクラウドストレージアプリにアップロードする方法を次に示します。

ファイルがメッセージ作成領域にドラッグアンドドロップされると、ファイルは Teams キャッシュに一時的に格納されます。
サードパーティのクラウドストレージアプリは、uniqueIDを使用して getDragAndDropFiles API を呼び出して、ドラッグアンドドロップされたファイルをフェッチします。
thirdPartyCloudStorage API は、ドラッグアンドドロップされたファイルを返します。
ファイルは、コールバック関数を介してサードパーティのクラウドストレージアプリで受信されます。
その後、サードパーティのクラウドストレージアプリによってファイルがストレージにアップロードされます。

コードサンプル

サンプルの名前	説明	Node.js	.NET	Python
サードパーティのクラウドストレージ	メッセージ作成領域にドラッグアンドドロップされたファイルに対してサードパーティ製クラウドストレージアプリを実装する方法を示します。	表示	表示	表示

次の方法で共有

サードパーティのクラウドストレージアプリ

前提条件

ファイルをサードパーティのクラウドストレージにドラッグアンドドロップする

コードサンプル

関連項目

その他のリソース

次の方法で共有

サード パーティのクラウド ストレージ アプリ

前提条件

ファイルをサードパーティのクラウド ストレージにドラッグ アンド ドロップする

コード サンプル

関連項目

その他のリソース

サードパーティのクラウドストレージアプリ

ファイルをサードパーティのクラウドストレージにドラッグアンドドロップする

コードサンプル