ファイル ピッカーでファイルを保存する方法 (HTML)
[ この記事は、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 を使ってデータを表示します。
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 に追加します。コントロールを追加する方法については、「コントロールとコンテンツの追加」をご覧ください。
ファイル ピッカーでユーザーに保存場所を提示する場合は、「クイック スタート: ファイル ピッカー コントラクトとの統合」をご覧ください。
完全な例
関連トピック
クイック スタート: ファイル ピッカーによるファイルへのアクセス
辞書/リファレンス
Windows.Storage.Pickers.Provider
ファイル ピッカー コントラクト