libro
www.tuyano.com
JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門

ファイルアクセス (5/6)

作成:2012-12-10 08:03
更新:2012-12-10 08:03

■ファイルピッカーを利用しよう

ファイルのパスを直接指定して開くのでなく、ユーザーが自分でファイルを選択して開き操作するような場合には、ファイルを選択するためのインターフェイスである「ファイルピッカー」を使用する必要があるでしょう。ファイルピッカーは、従来のWindows（およびデスクトップモード）で用いられているファイルダイアログのModan UI版向けUIといったものです。画面にファイルの一覧リストをスクロール表示し、そこからファイルを選択します。

このファイルピッカーは、Windows.Storage.Pickersに２種類のものが用意されています。「FileSavePicker」と「FileOpenPicker」で、これらはそれぞれ旧来のセーブダイアログとオープンダイアログに相当します。では、これらのファイルピッカーの使い方を整理しておきましょう。


1. セーブピッカーの利用
var 変数 = new Windows.Storage.Pickers.FileSavePicker();
まず、オブジェクトを作成します。これはnewを使って作るだけです。引数などは不要です。
《FileSavePicker》.fileTypeChoices.insert( 名前, 配列 );
次に行うのは、利用可能なファイルタイプの登録です。第１引数に種類の名称をテキストで指定し、第２引数にその種類のテキストとして利用できる拡張子を配列でまとめて指定します。
《FileSavePicker》.pickSaveFileAsync().then( 関数 );
セーブピッカーを表示し、ファイルの入力を行います。ファイルを選択したあとの処理は、「then」メソッドを用意して指定します。これは引数に関数を渡すようになっています。この関数は以下のように定義されており、引数に選択したファイルのFileオブジェクトが渡されます。後はこの関数内で、Fileを利用して実際の保存処理を行えばいいわけです。
function (file) {……}



2. オープンピッカーの利用
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
最初にオブジェクトを用意します。これはFileOpenPickerをnewで作成するだけです。引数はありません。
《FileOpenPicker》.fileTypeFilter.replaceAll([".txt"]);
ファイルタイプの指定ですが、開く場合は「ファイルタイプフィルター」というものを指定します。fileTypeFilterがそのオブジェクトです。replaceAllは、引数に指定した拡張子の配列にファイルタイプフィルターを置き換えるものです。これにより、表示されるファイルのフィルタリングが変更され、指定の拡張子のファイルのみが表示されるようになります。
《FileOpenPicker》.pickSingleFileAsync().then( 関数 );
ファイルピッカーを表示し、ファイルを選択します。ファイルピッカーを閉じた後の処理は、「then」メソッドに用意します。これは引数に関数を指定することで、終了後にその処理が実行されるようになります。この関数は、先程のFileSavePickerの場合と同じく、引数に選択したFileオブジェクトが渡されます。後は、これを使ってファイルの読み込みを行えばいいというわけです。

では、先ほど作成したテキストファイルの読み書きを行う関数を、ファイルピッカー利用の形に書き換えてみましょう。下に修正版のソースコードを掲載しておきます。ここでは、上記の基本的な流れの他に以下のようなプロパティ設定を追加してあります。

suggestedStartLocation――セーブピッカーを開いた時の開始位置
suggestedFileName――セーブピッカーのデフォルトのファイル名

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

function btn1Click(mouseEvent) {
    var savePicker = new Windows.Storage.Pickers.FileSavePicker();
    savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
    savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
    savePicker.suggestedFileName = "new_file.txt";
    savePicker.pickSaveFileAsync().then(function (file) {
        if (file) {
            var p = document.getElementById("text1");
            Windows.Storage.FileIO.writeTextAsync(file,p.textContent);
            new Windows.UI.Popups.MessageDialog("セーブしました。").showAsync();
        }
    });
}

function btn2Click(mouseEvent) {
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.fileTypeFilter.replaceAll([".txt"]);
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
    openPicker.pickSingleFileAsync().then(function (file) {
        if (file) {
            var p = document.getElementById("text1");
            p.textContent = file.name;
            if (file !== null) {
                Windows.Storage.FileIO.readTextAsync(file).done(
                function (fileContent) {
                    p.innerHTML = fileContent; 
                },
                function (error) {
                    WinJS.log && WinJS.log(error, "sample", "error");
                });
            }
        } else {
            WinJS.log && WinJS.log("cancelled.", "sample", "status");
        }
    });

}
※関連コンテンツ

「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る