Firefox OSを試した：SDカードを利用する（２）

Firefox OSを試した続き。
前回はSDカードの操作を確認した。
今回も引き続いてSDカードについて触れてみる。
前回の延長線上の話です。

※今回のファイルはこちらです。
前回の続きとしているので同じファイル名です。もし試していて古いのが気になるのであれば
フォルダ名やmanifest.webapp内のnameを変更して試して下さい。

test-my02.zip

SDカードの中身を見る

前回はSDカードにファイルを作り、それを読み出すといったテストを行った。
あれからテストアプリを改造し、SDカード内のファイルすべてを読み出すことにした。

前回から変わったところといえば、ファイルを作成する処理は次のようにした。


var blob = new Blob(["file test" + new Date().toString()], {type: 'text/plain'});
var fname = "testfile_" + new Date().getTime() + ".txt";


ファイル名とファイル内容に毎時間を付け足すことにした。これでたくさんのファイルを作ってテストすることができる。


ボタンを一個追加した。そのボタンでSDカード内のファイルを列挙させるためだ。
処理は次の通り。


function btn_sdenum_clicked() {
　var storage = navigator.getDeviceStorage('sdcard');
　　if (!storage) {
　　console.log("No storage available!");
　　console.log(file);
　　alert("No storage available!");
　　return false;
　}
　document.getElementById("dir_lst").innerHTML = "";
　var req = storage.enumerate();
　req.onsuccess = function(e){
　　var fl = e.target.result;
　　if (fl) {
　　　var li = document.createElement("li");
　　　li.innerHTML = "<span>" + fl.name + '</span><br/><span style='font-size:70%;margin-top:0.5em;margin-left:1em;'>' + fl.lastModifiedDate + "/" + fl.type + "/" + fl.size + "</span><br/>";
　　　document.getElementById("dir_lst").appendChild(li);
　　　e.target.continue();
　　}
　};
　req.onerror = function(e){
　　alert("enumerate error: "+e.target.error.name);
　};
}


ここでのポイントはDeviceStorage.enumerate()メソッドだ。
これによりSDカード内のファイルをすべて読み出すことができる。
ちなみにこれも非同期。しかもファイルが見つかるだけ繰り返すが、特に変わった書き方をする必要はない。
get()の時と同じように、onsuccessとonerrorを定義するだけだ。
enumerate()で取得できるオブジェクトはFile型。前回行ったときと同じく、HTML5標準の型だ。
Fileはe.target.resultで取得できる。
ちなみにe.targetはDeviceStorageCursorというオブジェクトのようで、
このe.targetに対してcontinue()メソッドを使うと、再帰的にファイルを検索する。
そのたびにonsuccessのイベントを発行してくれる。



ここで気をつけたいのは、次のようにしてしまうと大変なことになる。


　　if (fl) {
　　　var li = document.createElement("li");
　　　li.innerHTML = "<span>" + fl.name + '</span><br/><span style='font-size:70%;margin-top:0.5em;margin-left:1em;'>' + fl.lastModifiedDate + "/" + fl.type + "/" + fl.size + "</span><br/>";
　　　document.getElementById("dir_lst").appendChild(li);
　　}
　　e.target.continue();


e.target.continue()をe.target.resultの存在可否のif文の外に置いた。
そうすると、Fileオブジェクトがあろうがnullだろうがひたすら繰り返して、いわばフリーズしたかのような
状態になる。こうなるとFirefox OS Simulatorといえど一再操作が効かなくなる。
止めるにはFirefox上でStopにトグルスイッチを切り替えるしかなくなる。
continue()はFileオブジェクトが有効の場合にだけ実行させることで、ファイルの列挙を綺麗に終えることができる。

ちなみにディレクトリを作ってその中にファイルを作りたい場合にはstorage.addNamedでファイル名を渡す際に
次のようにするとよい。


　　var fname = "test/testfile_" + new Date().getTime() + ".txt";


ファイル名の前にtest/を入れるだけ。
ファイルを操作する際、フォルダの現在位置の変更などはできないようなので、
特定のフォルダにファイルを入れる際は毎回ファイル名にフォルダ名を"/"付きで入れる必要がある。

SDカードをFirefox OS Simulator以外から見る

こうしてFirefox OS上でSDカードへファイルを書き込む、ファイルを取得する、複数のファイルを列挙することができた。
できたファイルをWindowsやLinux上で確認したいということはきっとあるはずだ。

もちろんできる！

Firefox OS上で見られるSDカードはホストOS？だと一つのフォルダになっている。
なので簡単に閲覧して、中身を変更することが可能だ。

自分の環境では次のOSで確認した。

Windows XP

C:\Documents and Settings\[ユーザー]\Application Data\Mozilla\Firefox\Profiles\x1ukceoi.default\extensions\r2d2b2g@mozilla.org\profile\fake-sdcard

Windows 7

C:\Users\[ユーザー名]\AppData\Roaming\Mozilla\Firefox\Profiles\5djvy07z.default\extensions\r2d2b2g@mozilla.org\profile\fake-sdcard

太字の部分はFirefox OS Simulatorを入れた際に毎回変わる・・・と思う。そこは読み替えてほしい。
このfake-sdcardの中に、ファイルがこのように格納されている。


ホストOS上でファイルやフォルダを追加すると当然、Firefox OS上でもすぐさま検知できる。


しかしフォルダだけだと認識しないようだ。Firefox OS上では必ず1つはファイルを入れておくことで
そのフォルダを認識してくれる模様。もしかするとフォルダだけを取得するメソッドやオブジェクトがあるかもしれない。
上のスクリーンショットの時に作ったdフォルダにファイルを入れると、この通り。


ちなみにこの一連の操作の間、Firefox OS Simulatorは終了させなくても良い。
ホストOS上でfake-sdcardの中身を変えたら、テストアプリ上で再度SDカード取得ボタンを押せば
すぐに新しいファイルの一覧を取得できる。


今回使ったenumerate()メソッドは使い方も非常に簡単なので、一度覚えてしまえば
サクッと自分のアプリに取り入れて活用できるだろう。
ファイルの一覧を取得するだけならpermissionsのdevice-storage:sdcardのaccessもreadonlyで済む。

ここまで出来たらファイラーアプリも簡単に作れるだろう。
ただそこで覚えなくてはいけないのが、Activityだ。Androidのインテントとほぼ同じに考えればいいと思うこの機能、
これを使わないとファイラーとして、そのファイルを扱うアプリを決定してそれに連携させることはできない。

次回はこのActivityをいろいろ試してみたいと思う。
現在、簡単なテキストエディターを作って、テスト中。