ファイルの処理の概要

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

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

JavaScript を使い Windows 8.1 で実行される Windows ストアアプリにファイルの処理機能を追加する方法について説明します。

このトピックの各セクションでは、重要なファイル処理機能について説明し、その機能について詳しく説明するトピックへのリンクを示します。また、このトピックに対応するサンプル (ファイルの処理の概要サンプル) で、関連するコードをすばやく見つける方法についても説明します。

注フォルダーやファイルの操作に使う関数の多くは非同期です。非同期の JavaScript アプリの作成方法については、「JavaScript での非同期プログラミング」をご覧ください。

ファイルアクセスの基本: 列挙、プロパティの取得、データの読み取りと書き込み

クイックスタート: プログラムによるファイルへのアクセス

フォルダー、ライブラリ、デバイス、ネットワーク上の場所などにあるファイルには、StorageFolder.getFilesAsync 関数の呼び出しを記述した、たった 1 行のコードでアクセスできます。指定された場所の最上位のファイルとフォルダーを列挙する方法や、特定の場所にあるファイルを照会する方法の詳しい手順については、「プログラムによるファイルへのアクセス」をご覧ください。

次の手順では、特定の場所にあるファイルを列挙する方法を説明します。

目的の場所の StorageFolder オブジェクトを取得します。これを行うには、たとえば、KnownFolders の静的プロパティのいずれか (KnowFolders.picturesLibrary など) を参照します。
返された StorageFolder オブジェクトの StorageFolder.getFilesAsync 関数を呼び出します。このトピックに対応するサンプルでは、パラメーターを使わずにこのメソッドを呼び出します (これは、すべてのファイルを返すことを示します)。クエリを使って StorageFolder.getFilesAsync を呼び出す例については、「クイックスタート: プログラムによるファイルへのアクセス」をご覧ください。
StorageFolder.getFilesAsync 関数が完了したら、forEach ループを使って、返された各ファイルを反復処理することができます。

このコード例では、ピクチャライブラリ内のすべてのファイルを列挙しています。


// Get a StorageFolder object representing Pictures.
var library = Windows.Storage.KnownFolders.picturesLibrary;

// Get all files from the StorageFolder object.
library.getFilesAsync().then(function (files) {
    // For each file found ...
    files.forEach(function (file) {
        // ... perform your processing.
        });
    });
}

対応するサンプルのスクリーンショットは、ピクチャライブラリ内のファイルの列挙例を示しています。

ファイル処理サンプルでのピクチャライブラリ内のファイル列挙を示すスクリーンショット。

サンプルで確認しましょう: サンプルには、このセクションで説明している例が含まれた「FileAccessBasics」というページがあります。関連する JavaScript と HTML のコードは、それぞれ FileAccessBasicsPage.js ファイル (OnEnumPicturesClick 関数) と FileAccessBasicsPage.html ファイルに集められています。

クイックスタート: ファイルのプロパティの取得

ファイルプロパティでは、ファイルの属性やコンテンツを記述または定量化します。たとえば、ファイルプロパティにはファイル名、パス、ファイルサイズ、ファイル属性、前回のアクセス日時などのデータが含まれます。「クイックスタート: ファイルのプロパティの取得」では、ファイルの最上位プロパティと基本プロパティを取得して表示する方法について説明します。

次の手順は、ファイルの最上位プロパティまたは基本プロパティを取得する方法を示します。

ファイルの最上位プロパティ — ファイルの基本プロパティを StorageFile クラスのプロパティとして取得します。これには、StorageFile.attributes、StorageFile.contentType、StorageFile.dateCreated、StorageFile.displayName、StorageFile.displayType、StorageFile.fileType、StorageFile.folderRelativeId、StorageFile.isAvailable、StorageFile.name、StorageFile.path、StorageFile.provider が含まれます (StorageFile.isAvailable の使い方については、「クイックスタート: Microsoft OneDrive ファイルが利用可能かどうかの確認」をご覧ください)。
ファイルの基本プロパティ — ファイルの基本プロパティを取得するには、StorageFile.getBasicPropertiesAsync 関数を呼び出します。これによって返される BasicProperties オブジェクトを使って、BasicProperties.dateModified、BasicProperties.itemDate、BasicProperties.size などのファイルプロパティを取得できます。

このコード例では、ピクチャライブラリ内のすべてのファイルを列挙し、ファイルのさまざまな最上位プロパティと基本プロパティを表示しています。JavaScript の promises を使って 2 つの非同期操作 (StorageFolder.getFilesAsync と StorageFile.getBasicPropertiesAsync) が同期されている点に注意してください。 JavaScript の非同期プログラミングと promises について詳しくは、「JavaScript での非同期プログラミング」をご覧ください。


// Get a StorageFolder object representing the Pictures Library.
var library = Windows.Storage.KnownFolders.picturesLibrary;

// Initialize string that holds all property information.
var outString = "";

// Get all files from the StorageFolder object.
library.getFilesAsync().then(function (files) {
    var promises = [];
    files.forEach(function (file) {
        promises.push(WinJS.Promise.as(file));
        promises.push(file.getBasicPropertiesAsync());
    })
    return WinJS.Promise.join(promises);
})
.done(function (results) {
    var counter = 0

    while (counter < results.length) {
        var file = results[counter];
        var props = results[counter + 1];
        outString += "File name: " + file.name + "<br/>";
        outString += "File type: " + file.fileType + "<br/>";
        outString += "File size: " + props.size + "<br/>";
        outString += "<br/>"
        counter = counter + 2;
    }
});

対応するサンプルのスクリーンショットは、ファイルのさまざまな最上位プロパティと基本プロパティを取得する例を示しています。

ファイル処理サンプルでのファイルのプロパティ取得を示すスクリーンショット。

サンプルで確認しましょう: サンプルには、このセクションで説明している例が含まれた「FileAccessBasics」というページがあります。関連する JavaScript と HTML のコードは、それぞれ FileAccessBasicsPage.js ファイル (OnGetFilePropertiesClick 関数) と FileAccessBasicsPage.html ファイルに集められています。

クイックスタート: ファイルの読み取りと書き込み

Windows ストアアプリでは、FileIO クラスを使ってファイルの読み取りと書き込みを行います。FileIO クラスと StorageFile クラスを使ってさまざまな種類のデータの読み取りと書き込みを行う方法を示すコード例については、「クイックスタート: ファイルの読み取りと書き込み」をご覧ください。

Dn595121.wedge(ja-jp,WIN.10).gif ファイルへのテキストの書き込み

ファイルへの書き込みを行うには、まず StorageFile オブジェクトを取得して、データを書き込むために FileIO 関数のいずれかに渡す必要があります。対応するサンプルでは、これは StorageFolder.createFileAsync 関数でファイルを作ることによって行われます。
StorageFile オブジェクトを取得したら、オーバーロードされた FileIO.writeTextAsync 関数のいずれかを使って、基になるファイルにテキストを書き込むことができます。

このコード例では、現在の日付/時刻をサンプルファイルに書き込みます。


// Create the sample file; replacing it if it already exists.
var lib = Windows.Storage.KnownFolders.picturesLibrary;
lib.createFileAsync("FileHandlingJs.txt", 
    Windows.Storage.CreationCollisionOption.replaceExisting)
.then(function (file) {
    if (file) {
        // Format a string based on the current data/time.
        var now = new Date();
        var sampleFileContents = 
            [[now.getMonth() + 1, now.getDate(), now.getFullYear()].join("/"),
            [now.getHours(), AddZero(now.getMinutes())].join(":"),
            now.getHours() >= 12 ? "PM" : "AM"].join(" ");

        // Write the text to the sample file.
        Windows.Storage.FileIO.writeTextAsync(file, sampleFileContents)
        .then(function () {
            // File's contents have been written at this point.
        }, 
        function (error) {
            // Handle error.
        });
    }
});

Dn595121.wedge(ja-jp,WIN.10).gif ファイルからのテキストの読み取り

ファイルのコンテンツを読み取るには、まず StorageFile オブジェクトを取得して、データを読み取るために FileIO 関数のいずれかに渡す必要があります。対応するサンプルでは、これは StorageFolder.getFileAsync 関数を呼び出すことによって行われています。
StorageFile オブジェクトを取得したら、オーバーロードされた FileIO.readTextAsync 関数のいずれかを使って、基になるファイルからテキストを読み取ることができます。

このコード例では、サンプルファイルからコンテンツを読み取ります。


// Open sample file.
Windows.Storage.KnownFolders.picturesLibrary.getFileAsync("FileHandlingJs.txt")
.then(function (file) {
    // If file found ...
    if (file) {
        // Read file's contents.
        Windows.Storage.FileIO.readTextAsync(file).then(function (contents) {
            // Process file contents as needed.
        });
    }
}, function (error) {
    // Handle error.
});

このスクリーンショットは、サンプルの実行とサンプルファイルへの書き込みを行う例を示しています。

ファイル処理サンプルでのファイルへのテキストデータの書き込みを示すスクリーンショット。

サンプルで確認しましょう: サンプルには、このセクションで説明している例が含まれた「FileAccessBasics」というページがあります。関連する JavaScript と HTML のコードは、それぞれ FileAccessBasicsPage.js ファイル (OnWriteTextToFileClick 関数 OnReadTextFromFileClick 関数) と FileAccessBasicsPage.html ファイルに集められています。

ファイルとフォルダーピッカーの操作

クイックスタート: ファイルピッカーによるファイルへのアクセス

ピッカー (ファイルピッカーとフォルダーピッカー) は、ファイルまたはフォルダーの一覧を表示し、さらに処理する項目をユーザーが 1 つ以上選べるようにするために使われます。指定されたフィルター (特定の拡張子を持つファイルなど) に一致するファイルやフォルダーを検索する、特定のフォルダーから開始する、特定の表示モード (一覧またはサムネイル) で表示する、などの操作が行われるようにピッカーをプログラムによって構成することもできます。

次の手順では、単一ファイル、複数ファイル、単一フォルダーを選択するピッカーを構成します。

Dn595121.wedge(ja-jp,WIN.10).gif 単一ファイルを選択するピッカーの構成

FileOpenPicker オブジェクトをインスタンス化します。
必要に応じて、FileOpenPicker オブジェクトの viewMode プロパティ、suggestedStartLocation プロパティ、fileTypeFilter プロパティを設定します。
FileOpenPicker.pickSingleFileAsync 関数を呼び出します。FileOpenPicker.pickSingleFileAsync 関数が完了すると、選ばれたファイルに対してアプリからの読み取り/書き込みアクセスが可能になります。

このコード例では、単一ファイル選択用のファイルピッカーをインスタンス化して表示します。


// Instantiate a FileOpenPicker object.
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

// Set the FileOpenPicker object's key properties.
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

openPicker.suggestedStartLocation = 
    Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

openPicker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png" ]);

// Display the FileOpenPicker for single file selection.
openPicker.pickSingleFileAsync().then(function (file) {
    // If the user selected a file ...
    if (file) {
        // ... process file as needed.
    }
    else {
        // User canceled the operation.
    }
});

Dn595121.wedge(ja-jp,WIN.10).gif 複数ファイルを選択するピッカーの構成

FileOpenPicker オブジェクトをインスタンス化します。
必要に応じて、FileOpenPicker オブジェクトの FileOpenPicker.viewMode プロパティ、FileOpenPicker.suggestedStartLocation プロパティ、FileOpenPicker.FileTypeFilter プロパティを設定します。
FileOpenPicker.pickMultipleFileAsync 関数を呼び出します。FileOpenPicker.pickMultipleFileAsync 関数が完了すると、選ばれたファイルに対してアプリからの読み取り/書き込みアクセスが可能になります。選ばれたファイルは、StorageFile オブジェクトの配列で表されます。この配列の sizes プロパティは選ばれたファイルの数を示します。そのため、for ループと標準的な配列表記を使って、各 StorageFile オブジェクトにアクセスすることができます。

このコード例では、複数ファイル選択用のファイルピッカーをインスタンス化して表示します。


// Instantiate a FileOpenPicker object.
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

// Set the FileOpenPicker object's key properties.
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

openPicker.suggestedStartLocation = 
    Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

openPicker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png"]);

// Display the FileOpenPicker for multiple-file selection.
openPicker.pickMultipleFilesAsync().then(function (files) {
    // If the user selected at least one file ...
    if (files.size > 0) {
        for (var i = 0; i < files.size; i++) {
            // ... process each file - For example, files[i]
        }
    }
    else {
        // User canceled the operation.
    }
});

Dn595121.wedge(ja-jp,WIN.10).gif フォルダーピッカーの構成

FolderPicker オブジェクトをインスタンス化します。
必要に応じて、FolderPicker オブジェクトの FolderPicker.viewMode プロパティ、FolderPicker.suggestedStartLocation プロパティ、FolderPicker.fileTypeFilter プロパティを設定します。
FileOpenPicker.pickSingleFileAsync 関数を呼び出します。FolderPicker.pickSingleFolderAsync 関数が完了すると、選ばれたフォルダー (サブフォルダーを含む) に対してアプリからの読み取り/書き込みアクセスが可能になります。

このコード例では、フォルダーピッカーをインスタンス化して表示します。


// Instantiate a FolderPicker object.
var folderPicker = new Windows.Storage.Pickers.FolderPicker();

// Set the FileOpenPicker object's key properties.
folderPicker.suggestedStartLocation = 
    Windows.Storage.Pickers.PickerLocationId.desktop;
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);

// Display the FolderPicker for folder selection.
folderPicker.pickSingleFolderAsync().then(function (folder) {
    // If the user selected a folder ...
    if (folder) {
        // ... get the folder object.
        Windows.Storage.AccessCache.StorageApplicationPermissions.
        futureAccessList.addOrReplace("PickedFolderToken", folder);
        // Process folder as needed.
    }
    else {
        // User canceled operation.
    }
});

このスクリーンショットは、サンプルを実行して 2 つのファイル (sample1.png、sample2.png) を選んだ結果を示しています。

ファイル処理サンプルでのファイルピッカーとフォルダーピッカーの使用を示すスクリーンショット。

サンプルで確認しましょう: サンプルには、このセクションで概要を説明したタスクを確認できる「File and Folder Pickers」というページがあります。このサンプルの JavaScript コードと HTML はそれぞれ、FilePickerPage.js ファイルと FilePickerPage.html ファイルに記述されています。

OneDrive ファイルの操作

クイックスタート: OneDrive ファイルが利用可能かどうかの確認

Windows 8.1 では、ユーザーは OneDrive ファイルをオンラインのみとマークできます。ユーザーが OneDrive から切断されると、これらのファイルは使うことができなくなります。ファイルを使うことができるかどうかをプログラムによって判断するには、StorageFile.isAvailable という新しいプロパティを利用できます。

次の手順では、ファイルが利用可能かどうかを StorageFile.isAvailable プロパティで確認する方法について説明します。

目的の場所の StorageFolder オブジェクトを取得します。これを行うには、たとえば、KnownFolders の静的プロパティのいずれか (KnowFolders.picturesLibrary など) を参照します。
返された StorageFolder オブジェクトの StorageFolder.getFilesAsync 関数を呼び出します。このトピックに対応するサンプルでは、パラメーターを使わずにこのメソッドを呼び出します (これは、すべてのファイルを返すことを示します)。クエリを使って StorageFolder.getFilesAsync を呼び出す例については、「クイックスタート: プログラムによるファイルへのアクセス」をご覧ください。
StorageFolder.getFilesAsync 関数が完了したら、forEach ループを使って、返された各ファイルを反復処理することができます。

このコード例では、ピクチャライブラリ内のすべてのファイルを列挙し、各ファイルの名前、プロバイダー名、可用性を表示します。


// Get a StorageFolder object representing Pictures.
var library = Windows.Storage.KnownFolders.picturesLibrary;

// Initialize string that will contain the file name, provider name, 
// and availability for each file.
var outString = "";

// Get all files from the StorageFolder object.
library.getFilesAsync().then(function (files) {
    // For each file found ...
    files.forEach(function (file) {
        // Retrieve the file's name, provider name, and availability.
        outString += file.name 
                  + " (on " 
                  + file.provider.displayName 
                  + ") is " 
                  + (file.isAvailable ? "available" : "not available") + "\n";
    });
});

このスクリーンショットは、ピクチャライブラリ内のファイルについて可用性を確認した結果を示しています。

ファイル処理サンプルでの OneDrive ファイルの操作を示すスクリーンショット。

サンプルで確認しましょう: サンプルには、ローカルコンピューターのピクチャライブラリにあるすべてのファイルを列挙するボタンが含まれた「"OneDriveFilesPage"」というページがあります。各ファイル名は、そのファイルのプロバイダー ("PC"、"OneDrive" など) およびそのファイルの現在の可用性と共に表示されます。このサンプルの JavaScript コードと HTML はそれぞれ、OneDriveFilesPage.js ファイルと OneDriveFilesPage.html ファイルに記述されています。