簡易ファイラーの作成
最後に、ここまでに解説した処理を組み合わせて簡易ファイラーを作成します。そのまま組み込むのは大変ですので、ファイル処理部分を別ファイルにライブラリーとして用意しておきましょう。
今回は、windowオブジェクトにfsapiオブジェクトを作成し、fsapiオブジェクトにファイラー処理に必要な以下のメソッドを用意しておきます。
window.fsapi.readText(filename, successFunc) テキストファイルの読み出し
window.fsapi.removeFile(filename, successFunc) ファイルの削除
window.fsapi.getFiles(dirname, successFunc) ディレクトリ一覧の取得
window.fsapi.removeDir(dirname, successFunc) ディレクトリの削除
window.fsapi.removeFile(filename, successFunc) ファイルの削除
window.fsapi.getFiles(dirname, successFunc) ディレクトリ一覧の取得
window.fsapi.removeDir(dirname, successFunc) ディレクトリの削除
便宜上、エラーは以下のerror()メソッドで一括して処理していますが、この方法ではエラー箇所が把握できませんので、実際にライブラリーとして使用する場合は修正してください。また、このライブラリーではルートディレクトリしか扱えません。
window.fsapi.error()
実際のファイラーのプログラムが、サンプル10です。ページが読み込まれたら保存されているファイル一覧を取得し、ファイルの場合は[F]、ディレクトリの場合は[D]を表示して判別できるようにします。ファイル名／ディレクトリ名の前にある[X]をクリックするとファイル／ディレクトリを削除でき、ファイル名をクリックするとファイルの内容を確認できます。
ファイルアイコンやディレクトリアイコンに変更して見た目を整えたり、ルートディレクトリだけでなく任意のディレクトリも処理できるように改良してみるとよいでしょう。
ページが読み込まれると自動的にルートディレクトリの一覧が表示される
ファイル名をクリックすると内容がテキストエリアに出力される
×の文字をクリックすると削除になる
ファイルが削除されると自動的に一覧が更新される
ディレクトリの場合。ディレクトリはサブディレクトリもまるごと削除する
Chrome for Androidでも動作する
■サンプル10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1">
<title>簡易ファイラー</title>
<style>
li { cursor: pointer; }
</style>
<script src="lib/filesys.js"></script>
</head>
<body>
<h1>簡易ファイラー</h1>
<output id="result" ></output>
<form>
<textarea cols="20" rows="5" id="fsData"></textarea>
</form>
<script>
// ファイル一覧を取得しリストで出力する
viewFileList();
function viewFileList(){
window.fsapi.getFiles("/", function(list){
document.getElementById("result").innerHTML = "<ul>"; // リストで表示
var text = "";
for(var i=0; i<list.length; i++){ // ファイル／ディレクトリの数だけ繰り返し
if (list[i].isFile){ // ファイルの場合
text += '<li onclick=viewFile("'+list[i].name+'")>[F]';
text += '<span onclick=deleteFile("'+list[i].name+'")>[×]</span>'
}else{ // ディレクトリの場合
text += '<li>[D]';
text += '<span onclick=deleteDir("'+list[i].name+'")>[×]</span>'
}
text += list[i].name+"</li>";
}
document.getElementById("result").innerHTML = text+"</ul>";
});
}
// クリックされたらファイル内容を読み出す
function viewFile(filename){
window.fsapi.readText(filename, function(){
document.getElementById("fsData").value = this.result;
});
}
// クリックされたらファイルを削除
function deleteFile(filename){
var flag = confirm("本当に削除しますか？");
if (!flag){ return; }
window.fsapi.removeFile(filename, function(){
alert("ファイルを削除しました");
viewFileList(); // ファイル一覧を再表示
});
}
// クリックされたらディレクトリを削除
function deleteDir(dirname){
var flag = confirm("本当にディレクトリ内を全て削除しますか？");
if (!flag){ return; }
window.fsapi.removeDir(dirname, function(){
alert("ディレクトリ内を全て削除しました");
viewFileList(); // ファイル一覧を再表示
});
}
</script>
</body>
</html>
filesys.jsファイル
// File system APIを利用したファイル処理
window.fsapi = {};
window.fsapi.error = function(e){ console.log(e); }
// ファイル内容を読み出す
window.fsapi.readText = function(filename, successFunc){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // 確保するサイズ
function(fs){ // 成功時のコールバック関数
// ファイル処理
fs.root.getFile(filename, {},
function(fileEntry){
fileEntry.file(function(file){
// ファイル読み出し。FileReaderを使用
var reader = new FileReader();
// 読み込み完了時の処理（文字をテキストエリアに出力）
reader.onload = successFunc;
reader.readAsText(file);
});
},
window.fsapi.error
);
},
window.fsapi.error
);
}
// ファイル削除
window.fsapi.removeFile = function(filename, successFunc){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // サイズ
function(fs){ // 成功時のコールバック関数
// ファイルを削除
fs.root.getFile(filename, {},
function(fileEntry){
fileEntry.remove(successFunc, window.fsapi.error);
},
window.fsapi.error
);
},
window.fsapi.error
);
}
// ディレクトリ一覧
window.fsapi.getFiles = function(dirname, successFunc){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // 確保するサイズ
function(fs){ // 成功時のコールバック関数
// 一覧を生成
fs.root.getDirectory(dirname, {},
function(dirEntry){
var dirReader = dirEntry.createReader();
dirReader.readEntries(successFunc,window.fsapi.error);
},
window.fsapi.error
);
},
window.fsapi.error
);
}
// ディレクトリ削除
window.fsapi.removeDir = function(dirname, successFunc){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // サイズ
function(fs){ // 成功時のコールバック関数
// ディレクトリを削除
fs.root.getDirectory(dirname, {},
function(dirEntry){
dirEntry.removeRecursively(successFunc,window.fsapi.error);
},
window.fsapi.error
);
},
window.fsapi.error
);
}
