|
|---|
Webブラウザー内に独自のファイルやディレクトリを保存できる「File system API」の使い方ついて、前回の記事に続き解説します。ファイルの作成／削除やディレクトリの作成／削除方法については前回紹介しましたので、今回は一覧の取得やファイルへの書き込み／読み込み方法を学び、簡易ファイラーを完成させましょう。
ディレクトリ内のファイル／ディレクトリ一覧を取得する
ディレクトリ内のファイル／ディレクトリ一覧を取得します。
ファイル／ディレクトリ一覧を取得するには、ディレクトリエントリーオブジェクトのcreateReader()メソッドを使ってディレクトリリーダーオブジェクトを生成します。
readEntries()メソッドは、第1引数に指定した関数に、ファイル／ディレクトリの一覧情報を渡します。関数にはファイルエントリーオブジェクト／ディレクトリエントリーオブジェクトを格納した配列が渡されますので、この配列の内容を読み出すことでファイル／ディレクトリの一覧を表示できます。また、readEntries()メソッドの第2引数には、一覧が取得できなかったときに呼び出す関数を指定できます。
実際のプログラムはサンプル7です。サンプル7ではファイル／ディレクトリ一覧を以下のようにしてページ上に出力しています。
var dirReader = dirEntry.createReader();
dirReader.readEntries(
function(list){
// 表示先の内容を消去
document.getElementById("result").innerHTML = "";
// ファイル／ディレクトリの数だけ繰り返し
for(var i=0; i<list.length; i++){
var text = document.getElementById("result").innerHTML;
if (list[i].isFile){ // ファイルの場合
text += "[F]";
}else{
text += "[D]";
}
text += list[i].name+"<br>";
document.getElementById("result").innerHTML = text;
}
}
ルートディレクトリ内の一覧が表示される。[F]はファイル、[D]はディレクトリを示している
■サンプル7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1">
<title>一覧を作成する</title>
</head>
<body>
<h1>一覧を作成する</h1>
<form>
<p>ディレクトリ名：<input type="text" id="fsDirname" value="/"></p>
<input type="button" value="一覧を作成" id="createList">
</form>
<output id="result" ></output>
<script>
// クリックされたらディレクトリ内の一覧を作成する
document.getElementById("createList").addEventListener("click", function(){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // 確保するサイズ
function(fs){ // 成功時のコールバック関数
// 一覧を生成
var dirname = document.getElementById("fsDirname").value;
fs.root.getDirectory(dirname, {},
function(dirEntry){
var dirReader = dirEntry.createReader();
dirReader.readEntries(
function(list){
// 表示先の内容を消去
document.getElementById("result").innerHTML = "";
// ファイル／ディレクトリの数だけ繰り返し
for(var i=0; i<list.length; i++){
var text = document.getElementById("result").innerHTML;
if (list[i].isFile){ // ファイルの場合
text += "[F]";
}else{
text += "[D]";
}
text += list[i].name+"<br>";
document.getElementById("result").innerHTML = text;
}
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "一覧エラー!!<br>"+err;
}
);
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "一覧取得エラー!!<br>"+err;
}
);
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "エラー!!<br>"+err;
}
);
}, false);
</script>
</body>
</html>
