WinJS.xhr によるバイナリデータのアップロード方法 (HTML)

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

WinJS.xhr (XMLHttpRequest をラップする) を使うと、バイナリデータをアップロードしたりダウンロードしたりできます。次の例は、ピクチャからビットマップをアップロードする方法を示しています。ビットマップファイルを開くために使う Windows ランタイムメソッドは、IRandomAccessStream を返します。そのため、MSApp.createBlobFromRandomAccessStream を使って Blob に変換する必要があります。

警告そのうえで XMLHttpRequest を使うと Blob や FormData などの数 MB を超えるオブジェクトをアップロードまたはダウンロードできますが、完了するまでに長い時間がかかることがあります。アプリはいつでも終了できるため、このような操作には Windows ランタイムのバックグラウンド転送 API の使用を検討する必要があります。コンテンツのアップロードとダウンロードについて詳しくは、「ファイルのアップロード方法」と「ファイルのダウンロード方法」をご覧ください。バックグラウンド転送の一般的な説明については、「Transferring data in the background」をご覧ください。

必要条件

JavaScript 用 Windows ライブラリを使った基本的なアプリの作成経験が必要です。初めてのアプリを作る方法について詳しくは、「JavaScript を使った初めての Windows ランタイムアプリの作成」をご覧ください。

手順

ステップ 1: ピクチャと Web にアクセスするようにアプリをセットアップする

ハードドライブ上にある特定のライブラリへのアクセスやネットワークへのアクセスなど、特定の機能を明示的にアプリに追加する必要があります。機能について詳しくは、「アプリ機能の宣言」と「ネットワーク分離機能を構成する方法」をご覧ください。

Visual Studio で空白の JavaScript アプリを作成します。
package.appxmanifest ファイルを開き、[機能] タブに移動します。
Windows バージョンのサンプルでは、[インターネット (クライアント)] 機能は既に選択されています (選択されていない場合はここで選択してください)。アプリがクライアントとしてホームネットワークまたは社内ネットワーク上の Web サービスに接続するには、[プライベートネットワーク (クライアントとサーバー)] 機能も必要です。

Windows Phone バージョンのサンプルの場合は、[インターネット (クライアントとサーバー)] 機能を選びます。

注 Windows Phone では、アプリに対してすべてのネットワークアクセスを有効にするネットワーク機能は [インターネット (クライアントとサーバー)] だけです。
[ピクチャライブラリ] 機能をクリックします。

ステップ 2: ビットマップをアップロードする

ファイルアクセスを処理する多くの非同期メソッドがあります。これらの非同期メソッドは、JavaScript の他の promise と同じように処理されます。

注詳しくは、「JavaScript での非同期プログラミング」をご覧ください。

次に示すように、default.html ファイルの BODY セクションに、アップロードの成功または失敗について報告する DIV 要素を追加し、"picDiv" という ID を指定します。
```
<div id="picDiv"></div>
```

コード内に DIV への参照とピクチャへの参照をセットアップします:

var picDiv = document.getElementById("picDiv");
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;

ピクチャで目的のファイルを見つけます。このファイルを WinJS.xhr を使ってアップロードするだけでもかまいませんが、ここではファイルの再エンコードまたはその他の処理を行うとします。completeFile 関数で、getFileAsync メソッドの then 句に openAsync を使ってファイルを開きます。その後、completeStream 関数では、openAsync メソッドの then 句で、開いたファイルストリーム (型は IRandomAccessStream) に対して必要な処理を行います。
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

次はアップロードです。WinJS.xhr (および XMLHttpRequest) は IRandomAccessStream 型のアップロードを受け入れないため、ストリームを Blob に変換することが必要です。この処理を行うヘルパー関数 MSApp.createBlobFromRandomAccessStream があります。変換された Blob を WinJS.xhr の data オプションに追加できます。WinJS.xhr の then 句でアップロードの成功または失敗を処理できます。

picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(
        function completeStream(stream) {
            // Do processing. 
            var blob = MSApp.createBlobFromRandomAccessStream("image/bmp", stream);
            return WinJS.xhr({ type: "POST", url: <URI of the website>, data: blob });
        }).then(
            function (request) {
                picDiv.textContent = "uploaded file";
            }, 
            function (error) {
                picDiv.textContent = "error uploading file";
    });

アプリを実行します。ファイルがアップロードされます。

WinJS.xhr によるバイナリデータのアップロード方法 (HTML)

必要条件

手順

ステップ 1: ピクチャと Web にアクセスするようにアプリをセットアップする

ステップ 2: ビットマップをアップロードする

関連トピック

その他のリソース

WinJS.xhr によるバイナリ データのアップロード方法 (HTML)

必要条件

手順

ステップ 1: ピクチャと Web にアクセスするようにアプリをセットアップする

ステップ 2: ビットマップをアップロードする

関連トピック

その他のリソース

WinJS.xhr によるバイナリデータのアップロード方法 (HTML)