ファイルにテキストフィールドの内容を書き込む
次に、作成したファイルにテキストデータを書き込んでみましょう。ファイルへの書き込みには、ファイルエントリーオブジェクトのcreateWriter()メソッドを使います。createWriter()メソッドの第1引数に成功時に呼び出す関数を、第2引数に失敗時に呼び出す関数を指定します。
成功時に呼び出される関数にはファイル書き込み用のオブジェクトが渡されます。このオブジェクトのwrite()メソッドを使ってファイルにデータを書き込みます。write()メソッドの引数に文字列を指定するだけで書き込めれば簡単ですが、実際には以下の手順に従って書き込む必要があります。
まず、Blobオブジェクトを作成します。BlobとはBinary Large OBjectの略で、バイナリデータを格納するためのオブジェクトのことです。
Blobオブジェクトは以下のようにして生成します。
var blobData = new WebKitBlobBuilder();
次に、append()メソッドを使ってBlobオブジェクトにデータを追加します。append()メソッドの引数に、書き込む文字列を指定します。Blobオブジェクトは、ファイル書き込み用オブジェクトのwrite()メソッドに、getBlob()メソッドの戻り値として渡します。getBlob()の引数には、書き込むデータのMIME形式を指定します。
fileWriter.write(blobData.getBlob("text/plain"));
ファイルの書き込みに成功したときの処理は、ファイル書き込み用オブジェクトのonwriteに、エラー時の処理はonerrorにイベントハンドラーを設定します。
実際のプログラムはサンプル8です。テキストエリアに入力した文字がファイルとして保存されます。英数字だけでなく日本語も書き込めます。
ファイル名とサイズ、内容を入力しボタンをクリックする。正常に書き込まれると「書き込み完了」の文字が表示される
■サンプル8
<!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="memo.txt"></p>
<p> サイズ：<input type="text" id="fsSize" value="1024" size="8">バイト</p>
<p>書き込む内容：<textarea cols="20" rows="4" id="fsData">ASCII.jp</textarea></p>
<input type="button" value="書き込む" id="writeFile">
</form>
<output id="result" ></output>
<script>
// クリックされたらファイルを作成しデータを書き込む
document.getElementById("writeFile").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){
fileEntry.createWriter( // ファイル書き込み
function(fileWriter){
// 書き込み完了時の処理
fileWriter.onwrite = function(){
document.getElementById("result").innerHTML = "書き込み完了";
}
// 書き込みできなかった時の処理
fileWriter.onerror = function(err){
document.getElementById("result").innerHTML = "書き込みエラー："+err;
}
// Blobを作成して書き込む
var blobData = new WebKitBlobBuilder();
var text = document.getElementById("fsData").value;
blobData.append(text);
fileWriter.write(blobData.getBlob("text/plain")); // 標準テキストで書き込む
},
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()メソッドを使います。第1引数に指定した関数にファイルオブジェクトが渡されます。
ファイル内容はFileReaderで読み出します。FileReaderはFile APIでも使用しました。以下の解説も参考にしてください。
- File APIでブラウザーからローカルファイルを操作
- http://ascii.jp/elem/000/000/559/559105/
FileReaderを使ってファイルを読み出す方法はFile APIと同じです。以下のようにしてFileReaderオブジェクトを生成します。
var reader = new FileReader();
テキストファイルを読み込むのでreadAsText()メソッドを使い、引数にファイルオブジェクトを指定します。データの読み込みが完了すると、FileReaderオブジェクトのonloadに設定されたイベントハンドラーが呼び出されます。イベントハンドラーのthis.resultプロパティに読み出されたテキストデータが入っていますので、これをページ上に表示します。
実際のプログラムはサンプル9です。サンプル9では以下のようにしてファイルを読み込み、ページ上に出力しています。
fileEntry.file(function(file){
// ファイル読み出し。FileReaderを使用
var reader = new FileReader();
// 読み込み完了時の処理（文字をテキストエリアに出力）
reader.onload = function(){
document.getElementById("fsData").value = this.result;
}
reader.readAsText(file);
});
読み出したいファイル名を入力しボタンをクリックすると……
ファイルに保存されている文字がテキストエリアに出力される
■サンプル9
<!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="memo.txt"></p>
<p>内 容：<textarea cols="20" rows="4" id="fsData"></textarea></p>
<input type="button" value="読み出す" id="readFile">
</form>
<output id="result" ></output>
<script>
// クリックされたらファイル内容を読み出す
document.getElementById("readFile").addEventListener("click", function(){
window.webkitRequestFileSystem(
TEMPORARY, // 一時的（テンポラリ）
0, // 確保するサイズ
function(fs){ // 成功時のコールバック関数
// ファイルを処理
var filename = document.getElementById("fsFilename").value;
fs.root.getFile(filename, {},
function(fileEntry){
fileEntry.file(function(file){
// ファイル読み出し。FileReaderを使用
var reader = new FileReader();
// 読み込み完了時の処理（文字をテキストエリアに出力）
reader.onload = function(){
document.getElementById("fsData").value = this.result;
}
reader.readAsText(file);
});
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "ファイルエラー!!<br>"+err;
}
);
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "エラー!!<br>"+err;
}
);
}, false);
</script>
</body>
</html>
