OneDrive ファイルピッカー SDK for JavaScript v7.2 を使用してファイルを保存する

[アーティクル]
04/08/2023

OneDrive からのファイルを保存するには、OneDrive ピッカーをプログラムで開始するためのボタンをアプリに用意する必要があります。

1. アプリケーションを登録する

OneDrive ピッカーを使用するには、[Azure アプリ登録] ページでアプリケーションを登録し、アプリケーション ID を受け取る必要があります。また、ピッカーを使用して、Web アプリケーションの有効なリダイレクト URI を追加する必要もあります。これは、ピッカー SDK をホストするページ、または自分で定義したカスタム URL のどちらかになります。詳細については、「セットアップする」を参照してください。

2. SDK への参照を追加する

OneDrive JavaScript SDK をページに埋め込みます。

<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>

3. ファイルピッカーを起動する

OneDrive にファイルを保存するには、OneDrive ファイルピッカーをプログラムで開始するためのボタンをアプリに用意する必要があります。このコードはブラウザーでポップアップウィンドウを起動するため、明示的なユーザー操作の一環として呼び出すことで、ポップアップブロックでブロックされないようにする必要があります。

OneDrive.save(...) メソッドの一部として、ピッカーの動作方法とピッカーがコードをコールバックする方法を options オブジェクトによって指定します。

<script type="text/javascript">
  function launchSaveToOneDrive(){
    var odOptions = { /* ... specify the desired options ... */ };
    OneDrive.save(odOptions);
  }
</script>

<input id="fileUploadControl" name="fileUploadControl" type="file" />
<button onclick="launchSaveToOneDrive">Save to OneDrive</button>

ピッカーのオプション

ファイルピッカーのファイル保存時の動作方法は、ピッカーの動作を制御するパラメーターを含むオブジェクトを指定することで指定できます。このオブジェクトには、ファイルピッカーの完了時またはエラーの発生時に応じたコールバック関数も含まれています。

ファイルピッカーオプションの例

var odOptions = {
  clientId: "INSERT-APP-ID-HERE",
  action: "save",
  sourceInputElementId: "fileUploadControl",
  sourceUri: "",
  fileName: "file.txt",
  openInNewWindow: true,
  advanced: {},
  success: function(files) { /* success handler */ },
  progress: function(percent) { /* progress handler */ },
  cancel: function() { /* cancel handler */ },
  error: function(error) { /* error handler */ }
}

パラメーター

パラメーター名	説明
clientId	統合用にアプリ登録コンソールで生成したアプリケーション ID。
action	選択したファイルに実行するアクションの種類。ファイルを OneDrive に直接保存する場合は `save` を指定します。選択したファイルを保存するために Microsoft Graph API または OneDrive API で使用できる識別子を返す場合は `query` を指定します。
sourceInputElementId	アップロードするファイルのフォーム入力 (type=file) 要素 ID。
sourceUri	アップロードするファイルの http、https、またはデータ URI。 OneDrive for Business と SharePoint は、データ URI の値のみをサポートしています。
fileName	`sourceUri` パラメーターがデータ URI の場合は必須。指定されていない場合、ファイル名は入力要素の name 属性から推測されます。
openInNewWindow	既定値は true です。この場合は、OneDrive のピッキングエクスペリエンスをポップアップウィンドウで開始します。 false の場合は、同じウィンドウ内で OneDrive のピッキングエクスペリエンスを開始します。
viewType	選択できる項目の種類です。既定値は `files` です。 `folders` を指定して、選択範囲をフォルダーのみに制限する、または `all` を指定して、ファイルとフォルダー両方を選択することができます。
accountSwitchEnabled	既定値は `true`、ホストされているファイルピッカーのページに [アカウントの切り替え] UI を表示します。
advanced	ピッカーの動作を詳細にカスタマイズできる追加プロパティのコレクション。ただし、ほとんどのシナリオで必要になることはありません。詳細については、「高度な保存のシナリオ」を参照してください。
nameConflictBehavior	アップロードするファイルと宛先フォルダー内のファイルの名前が競合する状況の場合に渡されるオプションのパラメーター。詳細については、パラメーターの定義を参照してください。
success	サーバーへのファイルのアップロードが完了したときに呼び出されます。 files パラメーターは、アップロードしたファイルに対応するサービスから返されるメタデータのコレクションです。
progress	アップロードの進行状況を表すために、さまざまな時点 (浮動小数点の 0.0 から 100.0 までの間) で呼び出されます。これは、少なくとも 100.0 で 1 回呼び出されます。
cancel	ユーザーがセーバーをキャンセルしたときに呼び出されます。
error	サーバーでエラーが発生した場合、ユーザーがクォータの上限を超えている場合、ユーザーが選択した場所にファイルをアップロードするためのアクセス許可を持たない場合、またはユーザーがアップロードするファイルを選択していない場合に呼び出されます。

注: openInNewWindow が false の場合、すべてのコールバック関数は、SDK が参照される前にページでグローバルに宣言されている必要があります。これにより、関数が呼び出されることを保証します。グローバルに登録されると、コールバック関数の名前は、oneDriveFilePicker のプレフィックスによって名前変更されます。たとえば、success は oneDriveFilePickerSuccess になります。

アクションの種類

ピッカー SDK の action パラメーターを使用すると、ピッカーの動作方法を指定できます。 save() アクションには、次の値を使用できます。

値	説明
`save`	sourceInputElementId または sourceUri によって提供されるファイルを、ユーザーの OneDrive 内の選択したフォルダーに保存します。
`query`	選択したフォルダーに関する API メタデータを返します。その後で、アプリはユーザーが選択したフォルダーに 1 つ以上のファイルをアップロードします。

4. ピッカーの response オブジェクトを処理する

ユーザーがファイルのピッキングを完了すると、success コールバックは response オブジェクトを受け取ります。このオブジェクトには、アイテムのプロパティのサブセットを持つ Item リソースのコレクションである value プロパティが含まれています。

save アクションを使用している場合、このコレクションは新しくアップロードしたファイルのアイテムメタデータを提供します。 query アクションの場合、このコレクションには、選択したフォルダーのメタデータが含まれます。

ドキュメントをアップロードする場合の例

{
  "value": [
    {
      "id": "123456",
      "name": "document1.docx",
      "size": 12340,
      "@content.downloadUrl": "https://contoso-my.sharepoint.com/download.aspx?guid=1231231231a",
      "webUrl": "https://cotoso-my.sharepoint.com/personal/user_contoso_com/documents/document1.docx",
      "thumbnails": [
        {
          "id": "0",
          "small": { "url": "https://sn3302files.onedrive.live.com/..." },
          "medium": { "url": "https://sn3302files.onedrive.live.com/..." },
          "large": { "url": "https://sn3302files.onedrive.live.com/..." }
        }
      ]
    }
  ]
}

フォルダーへの保存に `query` を使用する場合の例

{
  "value": [
    {
      "id": "1234567!12",
      "name": "Project Vroom",
      "webUrl": "https://cotoso-my.sharepoint.com/personal/user_contoso_com/documents/project%20vroom",
      "folder": { "childCount": 4 }
    }
  ]
}

高度な保存のシナリオ

options オブジェクトの高度なパラメーターには、次に示す定義済みのプロパティがあります。

パラメーター名	説明
redirectUri	既定では、ピッカーは認証のリダイレクト URI として、そのピッカーが起動されたページを使用します。これが望ましくないシナリオもあるため、その代わりに使用するカスタム URL を設定できます。この URL は、同じドメイン内に存在している必要があり、ピッカー SDK をホストしているページと同じプロトコルを使用する必要があります。ターゲットページは、呼び出し元のページと同じ方法で OneDrive ピッカー SDK を参照する必要があります。

パラメーター名

説明

redirectUri

既定では、ピッカーは認証のリダイレクト URI として、そのピッカーが起動されたページを使用します。これが望ましくないシナリオもあるため、その代わりに使用するカスタム URL を設定できます。この URL は、同じドメイン内に存在している必要があり、ピッカー SDK をホストしているページと同じプロトコルを使用する必要があります。ターゲットページは、呼び出し元のページと同じ方法で OneDrive ピッカー SDK を参照する必要があります。

カスタムリダイレクト URI を使用する

アプリが大規模なクライアント側の JavaScript アプリの場合や、状態を維持するためにクエリ文字列パラメーターを使用する場合は、ファイルピッカーを起動したページをリダイレクト URI として使用することが望ましくない場合があります。これには、ポップアップウィンドウ内でアプリ全体の再読み込みが必要になり、パフォーマンスの問題が発生する可能性があります。高度なオブジェクトを通じて、その代わりに使用する代替のリダイレクト URI を指定することができます。

var odOptions = {
  clientId: "INSERT-APP-ID-HERE",
  action: "download",
  openInNewWindow: true,
  advanced: {
    redirectUri: "https://contoso.com/filePickerRedirect.htm"
  },
  success: function(files) { /* success handler */ },
  cancel: function() { /* cancel handler */ },
  error: function(error) { /* error handler */ }
}

リダイレクト先のページでは、OneDrive SDK スクリプトの読み込みのみが必要になります。

<html>
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
</html>

注: カスタムリダイレクト URI は、ポップアップウィンドウとしてファイルピッカーを使用している場合 (openInNewWindow が true の場合) にのみ指定できます。インラインエクスペリエンスを使用している場合は、常に、既定のリダイレクト URI が使用されます。

OneDrive ファイル ピッカー SDK for JavaScript v7.2 を使用してファイルを保存する