ファイルピッカーでファイルを保存する方法 (HTML)

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

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

ユーザーがアプリのコンテンツの名前とその保存場所を指定できるようにするには、fileSavePicker を使います。

必要条件

JavaScript を使った Windows ランタイムアプリの非同期プログラミングについての理解

非同期アプリの作成方法については、「クイックスタート: JavaScript での promise の使用」をご覧ください。

手順

ステップ 1: ユーザーが保存できる場所を表示するファイルピッカーを作成してカスタマイズする

fileSavePicker を使って、ユーザーが保存するファイルの名前、種類、場所を指定できるようにします。作成する fileSavePicker でプロパティを設定することによって、ファイルピッカーをカスタマイズできます。

ファイルピッカーのサンプルで、fileSavePicker オブジェクトの作成とカスタマイズの方法を紹介しています。

// Create the picker object and set options
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// Dropdown of file types the user can save the file as
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
// Default file name if the user does not type one in or select a file to replace
savePicker.suggestedFileName = "New Document";

ユーザーとアプリに関連する fileSavePicker プロパティを設定する必要があります。ファイルピッカーのカスタマイズ方法を判断するためのガイドラインについては、「ファイルピッカーのガイドラインとチェックリスト」をご覧ください。

ファイルピッカーのサンプルでは、3 つの fileSavePicker プロパティ (suggestedStartLocation、fileTypeChoices、suggestedFileName) を設定して、ファイルピッカーをカスタマイズしています。

注 fileSavePicker オブジェクトは pickerViewMode.list を使ってデータを表示します。

JJ150595.wedge(ja-jp,WIN.10).gif fileSavePicker のカスタマイズの詳細

このサンプルでユーザーが保存するのはドキュメントまたはテキストファイルであるため、savePicker.suggestedStartLocation は、LocalFolder を使ってアプリのローカルフォルダーに設定しています。
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
suggestedStartLocation は、選択されるファイルの種類に適したファイルシステム上の場所に設定する必要があります。ユーザーが音楽、画像、またはビデオを選ぶ場合は、最初に表示する場所をそれぞれミュージック、ピクチャ、ビデオに設定します。他の種類のファイルの場合は、最初に表示する場所をアプリのローカルフォルダーに設定します。これは単なる開始場所です。ユーザーはファイルピッカーを使って、別の場所に移動できます。
サンプルでは、保存したファイルを確実にアプリから開くことができるように、サポートするファイルの種類 (Microsoft Word 文書とテキストファイル) を savePicker.fileTypeChoices.insert を使って指定しています。
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
指定したすべてのファイルの種類をアプリはサポートする必要があります。

ユーザーは、このリストで指定する任意のファイルの種類として、ファイルを保存できます。また、ファイルピッカーの右下にあるドロップダウンコントロールで (開発者によって指定されている) 別のファイルの種類を選ぶことで、ファイルの種類を変更することもできます。既定では、リストの先頭にあるファイルの種類が選択されます。既定で選択されるファイルの種類を変更するには、savePicker.defaultFileExtension プロパティを設定します。

注また、ファイルピッカーでは、現在選ばれているファイルの種類を使って表示されるファイルがフィルター処理され、選ばれているファイルの種類に一致するファイルの種類だけがユーザーに表示されます。
ユーザーの入力の手間を多少なりとも軽減するために、サンプルでは、保存するファイルに対し savePicker.suggestedFileName を設定しています。
```
savePicker.suggestedFileName = "New Document";
```
提示するファイル名は、ユーザーが保存しているファイルにできる限り関係のあるものにします。たとえば、Word のように、ファイルが既にある場合はその名前を提示し、まだ名前のないファイルを保存している場合はドキュメントの 1 行目を提示します。

ステップ 2: fileSavePicker を表示してファイルを保存する

ファイルピッカーを作成してカスタマイズしたら、savePicker.pickSaveFileAsync を呼び出してユーザーがファイルを保存できるようにします。

ユーザーが名前、ファイルの種類、場所を指定し、ファイルの保存を確認すると、pickSaveFileAsync は保存するファイルを表す storageFile オブジェクトを返します。このファイルを、then または done を使ってキャプチャし、処理することができます。

ファイルピッカーのサンプルでは、ファイルピッカーを表示してユーザーがファイルを保存できるようにする方法を説明します。

savePicker.pickSaveFileAsync().then(function (file) {
    if (file) {
        // Prevent updates to the remote version of the file until we finish making changes and call CompleteUpdatesAsync.
        Windows.Storage.CachedFileManager.deferUpdates(file);
        // write to file
        Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function () {
            // Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
            // Completing updates may require Windows to ask for user input.
            Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
                if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
                    WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
                } else {
                    WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
                }
            });
        });
    } else {
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

ファイルを保存した後、アプリはそのファイルに対して読み取りと書き込みのアクセス権を持ちます。サンプルは保存されたファイルを file パラメーターにキャプチャしてファイルが有効であることを確認しますが、実際にそれ以上ファイルを処理することはありません。保存されたファイルの書き込み/読み取り方法については、「クイックスタート: ファイルの読み取りと書き込み」をご覧ください。

ヒント その他の処理を実行する前に、必ず保存されたファイル (サンプルでは file) をチェックしてファイルの有効性を確認する必要があります。その後で、アプリに適したコンテンツをファイルに保存したり、選ばれたファイルが有効でない場合は適切な動作を実行したりできます。

注釈

ここで示したようなコードを使うと、アプリでファイルピッカーを表示して、ユーザーが保存するファイルの名前、種類、場所を指定できるようにすることができます。保存されたファイルの書き込み/読み取り方法については、「クイックスタート: ファイルの読み取りと書き込み」をご覧ください。

アプリに "名前を付けて保存" 機能を追加する場合は、fileSavePicker を呼び出すコントロールをアプリの UI に追加します。コントロールを追加する方法については、「コントロールとコンテンツの追加」をご覧ください。

ファイルピッカーでユーザーに保存場所を提示する場合は、「クイックスタート: ファイルピッカーコントラクトとの統合」をご覧ください。

ファイルピッカーでファイルを保存する方法 (HTML)

必要条件

手順

ステップ 1: ユーザーが保存できる場所を表示するファイルピッカーを作成してカスタマイズする

ステップ 2: fileSavePicker を表示してファイルを保存する

注釈

完全な例

関連トピック

その他のリソース

ファイル ピッカーでファイルを保存する方法 (HTML)

必要条件

手順

ステップ 1: ユーザーが保存できる場所を表示するファイル ピッカーを作成してカスタマイズする

ステップ 2: fileSavePicker を表示してファイルを保存する

注釈

完全な例

関連トピック

その他のリソース

ファイルピッカーでファイルを保存する方法 (HTML)

ステップ 1: ユーザーが保存できる場所を表示するファイルピッカーを作成してカスタマイズする