ファイルの処理の概要

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

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

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

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

 

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

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

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

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

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

ステップ アイコン

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

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

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

このコード例では、ピクチャ ライブラリ内のすべてのファイルを列挙し、ファイルのさまざまな最上位プロパティと基本プロパティを表示しています。JavaScript の promises を使って 2 つの非同期操作 (StorageFolder.getFilesAsyncStorageFile.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ファイルへのテキストの書き込み

  1. ファイルへの書き込みを行うには、まず StorageFile オブジェクトを取得して、データを書き込むために FileIO 関数のいずれかに渡す必要があります。対応するサンプルでは、これは StorageFolder.createFileAsync 関数でファイルを作ることによって行われます。
  2. 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ファイルからのテキストの読み取り

  1. ファイルのコンテンツを読み取るには、まず StorageFile オブジェクトを取得して、データを読み取るために FileIO 関数のいずれかに渡す必要があります。対応するサンプルでは、これは StorageFolder.getFileAsync 関数を呼び出すことによって行われています。
  2. 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単一ファイルを選択するピッカーの構成

  1. FileOpenPicker オブジェクトをインスタンス化します。
  2. 必要に応じて、FileOpenPicker オブジェクトの viewMode プロパティ、suggestedStartLocation プロパティ、fileTypeFilter プロパティを設定します。
  3. 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複数ファイルを選択するピッカーの構成

  1. FileOpenPicker オブジェクトをインスタンス化します。
  2. 必要に応じて、FileOpenPicker オブジェクトの FileOpenPicker.viewMode プロパティ、FileOpenPicker.suggestedStartLocation プロパティ、FileOpenPicker.FileTypeFilter プロパティを設定します。
  3. 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フォルダー ピッカーの構成

  1. FolderPicker オブジェクトをインスタンス化します。
  2. 必要に応じて、FolderPicker オブジェクトの FolderPicker.viewMode プロパティ、FolderPicker.suggestedStartLocation プロパティ、FolderPicker.fileTypeFilter プロパティを設定します。
  3. 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 プロパティで確認する方法について説明します。

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

 

完成

ストアの要件のアイコン

Windows アプリ認定キットの使用

推奨。Windows アプリ認定キットを実行すると、Windows ストア要件を満たすのに役立ちます。アプリに主要な機能を追加した場合は実行することをお勧めします。

ストップ アイコン

これで終わりです。ここまでで、アプリのさまざまなファイルの処理機能について確かめたので、ファイルの処理の概要に対応するサンプルのページにあるようなアプリを作ることができます。

 

その他の情報

Quickstart: Asynchronous programming in JavaScript (JavaScript での非同期プログラミング)

JavaScript での非同期プログラミングについて詳しく説明します。

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

ファイルの列挙について詳しく説明します。

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

ファイルの読み取りと書き込みについて詳しく説明します。