ファイルを作成する
新しいファイルを作成してみましょう。最初に空のファイルを作成し、その後、ファイルに内容を書き込む方法を解説します。
ファイル/ディレクトリ処理には、window.webkitRequestFileSystem()メソッドを使い、以下の順番で引数を指定します。処理する内容によっては引数が意味をなさないものもあります。
- 種類(TEMPORARYかPERSISTENT)
- 容量をバイト数で指定
- 成功時に呼び出される関数
- 失敗時に呼び出される関数
今回は永続的にデータを保存する意味がないので、すべて一時的(TEMPORARY)とします。ファイルの作成は、3.に指定する関数内で処理します。成功時に呼び出される関数にはファイルシステムオブジェクトが渡されるので、このファイルシステムオブジェクトをベースにしてさまざまメソッドを使って処理をしていきます。
ルートディレクトリにファイルを作成してみましょう。ファイルはfs.root.getFile()で作成します。fsはファイルシステムオブジェクト、rootはルートディレクトリを示します。
fs.root.getFile()メソッドには以下の順番で引数を指定します。
- 作成するファイル名
- オプション。新規作成は{ create: true }
- 成功時に呼び出される関数
- 失敗時に呼び出される関数
作成するファイル名は拡張子を含みます。新規にファイルを作成する場合は2番目の引数に{ create: true }を指定します。exclusiveオプションにtrueを指定すると、すでにファイルが存在する場合にファイルを作成しません(エラー処理の関数が呼び出されます)。falseを指定するとファイルの有無にかかわらず作成されます。
3.で指定した関数には、ファイルエントリー(オブジェクト)が渡されます。ファイルエントリーオブジェクトには以下のプロパティ/メソッドがあります。
プロパティ
isFile | ファイルかどうか。ファイルならtrue。そうでなければfalse |
isDirectory | ディレクトリかどうか。ディレクトリならtrue。そうでなければfalse |
name | ファイル名(拡張子含む) |
fullPath | ファイルのフルパス |
filesystem | ファイルシステムオブジェクト |
メソッド
getMetadata() | メタデータの取得 |
moveTo() | ファイルの移動 |
copyTo() | ファイルのコピー |
toURL() | filesystem:~形式に変換 |
remove() | ファイル削除 |
getParent() | 親ディレクトリの取得 |
createWriter() | ファイルへの書き込み |
file() | ファイルオブジェクトを取得 |
実際にファイルを作成するプログラムはサンプル3です。サンプル3では以下のように作成したファイルのファイルパスとファイル名を表示しています。
fs.root.getFile(filename, { create: true },
function(fileEntry){
var text = "ファイルパス:"+fileEntry.fullPath+"<br>";
text += "ファイル名:"+fileEntry.name+"<br>";
document.getElementById("result").innerHTML = text;
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "ファイル生成エラー!!<br>"+err;
}
);
■サンプル3
<!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="fsFilename" value="abc.txt"></p>
<p>サイズ:<input type="text" id="fsSize" value="1024" size="8">バイト</p>
<input type="button" value="ファイルを作成" id="createFile">
</form>
<output id="result" ></output>
<script>
// クリックされたらファイルを作成する(中身は空っぽ)
document.getElementById("createFile").addEventListener("click", function(){
var size = document.getElementById("fsSize").value;
window.webkitRequestFileSystem(
TEMPORARY, // 一時的(テンポラリ)
size, // 確保するサイズ
function(fs){ // 成功時のコールバック関数
// ファイルを生成
var filename = document.getElementById("fsFilename").value;
fs.root.getFile(filename, { create: true },
function(fileEntry){
var text = "ファイルパス:"+fileEntry.fullPath+"<br>";
text += "ファイル名:"+fileEntry.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>