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

  • [アーティクル]

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 を参照する必要があります。

カスタム リダイレクト 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 が使用されます。