ディレクトリを作成する
ファイルの次はディレクトリを作成してみましょう。基本的な方法はファイルの作成と同じです。ファイルの場合はfs.root.getFile()メソッドでしたが、ディレクトリの場合はfs.root.getDirectory()メソッドを使います。指定する引数もfs.root.getFile()メソッドと同じですが、成功時に呼び出される関数にはファイルエントリーオブジェクトではなくディレクトリエントリーオブジェクトが渡されます。
ディレクトリエントリーオブジェクトには以下のプロパティとメソッドがあります。メソッドはファイルエントリーオブジェクトの場合と少し違い、ディレクトリ用のメソッドが用意されています。
プロパティ
| isFile | ファイルかどうか。ファイルならtrue。そうでなければfalse |
| isDirectory | ディレクトリかどうか。ディレクトリならtrue。そうでなければfalse |
| name | ディレクトリ名 |
| fullPath | ディレクトリのフルパス |
| filesystem | ファイルシステムオブジェクト |
メソッド
| getMetadata() | メタデータの取得 |
| moveTo() | ディレクトリの移動 |
| copyTo() | ディレクトリのコピー |
| toURL() | filesystem:～形式に変換 |
| remove() | ディレクトリ削除 |
| removeRecursively | ディレクトリ削除（再帰。ディレクトリ内にディレクトリがある場合でも削除される） |
| getParent() | 親ディレクトリの取得 |
| createReader() | ディレクトリエントリーの読み込み |
| getFile() | ディレクトリ内のファイル一覧を取得 |
| getDirectory() | ディレクトリエントリーの取得 |
実際のプログラムはサンプル5です。サンプル5では以下のようにしてディレクトリを作成しています。
fs.root.getDirectory(dirname, { create: true },
function(dirEntry){
var text = "ディレクトリパス："+dirEntry.fullPath+"<br>";
text += "ディレクトリ名："+dirEntry.name+"<br>";
document.getElementById("result").innerHTML = text;
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "ディレクトリ生成エラー!!<br>"+err;
}
);
ディレクトリ名を入力しボタンをクリックするとディレクトリが作成される
■サンプル5
<!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="data"></p>
<input type="button" value="ディレクトリを作成" id="createDir">
</form>
<output id="result" ></output>
<script>
// クリックされたらディレクトリを作成する
document.getElementById("createDir").addEventListener("click", function(){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // 確保するサイズ
function(fs){ // 成功時のコールバック関数
// ディレクトリを生成
var dirname = document.getElementById("fsDirname").value;
fs.root.getDirectory(dirname, { create: true },
function(dirEntry){
var text = "ディレクトリパス："+dirEntry.fullPath+"<br>";
text += "ディレクトリ名："+dirEntry.name+"<br>";
document.getElementById("result").innerHTML = text;
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "ディレクトリ生成エラー!!<br>"+err;
}
);
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "エラー!!<br>"+err;
}
);
}, false);
</script>
</body>
</html>
ディレクトリを削除する
ディレクトリの削除もファイルの削除と似ていて、ディレクトリエントリーオブジェクトのremove()メソッドを使います。指定したディレクトリの下にサブディレクトリが含まれている場合、remove()メソッドの代わりにremoveRecursively()メソッドを使うと、サブディレクトリも含めてまるごと削除できます。
実際のプログラムはサンプル6です。サンプル6では以下のようにしてディレクトリを削除しています。
fs.root.getDirectory(dirname, {},
function(dirEntry){
dirEntry.removeRecursively(function(){
var text = "ディレクトリ"+dirEntry.name+"を削除しました。<br>";
document.getElementById("result").innerHTML = text;
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "削除エラー!!<br>"+err;
});
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "ディレクトリ削除エラー!!<br>"+err;
}
);
削除するディレクトリ名を入力しボタンをクリックする。該当ディレクトリがある場合は削除された旨のメッセージが表示される
削除するディレクトリがない場合にはエラーとなる
■サンプル6
<!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="/data"></p>
<input type="button" value="ディレクトリを削除" id="removeDir">
</form>
<output id="result" ></output>
<script>
// クリックされたらディレクトリを削除する
document.getElementById("removeDir").addEventListener("click", function(){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // サイズ
function(fs){ // 成功時のコールバック関数
// ディレクトリを削除
var dirname = document.getElementById("fsDirname").value;
fs.root.getDirectory(dirname, {},
function(dirEntry){
dirEntry.removeRecursively(function(){
var text = "ディレクトリ"+dirEntry.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>
次回も引き続き、File system APIの使い方を解説し、簡易ファイラーを完成させます。
