指定した容量を確保できるか調べる
パソコンであればあまり気にする必要はないかもしれませんが、Androidなどスマートフォンでは使用できるストレージ容量に限りがあります。最初に、ファイル処理に必要な容量が確保できるかどうか調べてみましょう。
容量はwindow.webkitStorageInfo.requestQuota()メソッドを使って確保します。4つの引数を以下の順番で指定します。
- 保存方法。一時的に保存するだけならTEMPORARY、永続的に保存するならPERSISTENT
- 容量をバイト数で指定
- 指定したサイズの容量が割り当て可能な場合に呼び出される関数
- 容量が確保できなかった場合に呼び出される関数
1.のTEMPORARYは、ほかで保存領域が足りなくなった場合に削除されてしまうことがある、という意味です。TEMPORARYを指定した場合でも、ブラウザーを終了したり電源を落としたりしても保存したファイルは保持されます。
2.のサイズは1024であれば1024バイト=1KBになります。特に難しい部分はないでしょう。
3.に指定した関数には、引数として確保した容量のバイト数が渡されます。
4.に指定した関数には引数として以下のエラーコードが渡されます。
エラーコードと内容
| 1 | NOT_FOUND_ERR | ファイルかディレクトリが見つからない |
| 2 | SECURITY_ERR | セキュリティエラー |
| 3 | ABORT_ERR | 中断された |
| 4 | NOT_READABLE_ERR | 読み込めない |
| 5 | ENCODING_ERR | 文字のエンコーディングエラー |
| 6 | NO_MODIFICATION_ALLOWED_ERR | 修正できない |
| 7 | INVALID_STATE_ERR | 不正なステート |
| 8 | SYNTAX_ERR | 文法エラー |
| 9 | INVALID_MODIFICATION_ERR | 不正な修正 |
| 10 | QUOTA_EXCEEDED_ERR | 容量オーバー |
| 11 | TYPE_MISMATCH_ERR | 不正なファイル形式 |
| 12 | PATH_EXISTS_ERR | 指定されたパスにファイルまたはディレクトリが存在 |
実際のプログラムはサンプル1です。
確保するサイズを入力しボタンをクリック
データを保存することを許可するかどうか尋ねてくるのでOKボタンをクリック
正しく確保された場合。OKの文字とバイト数が表示される
■サンプル1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1">
<title>容量が確保できるか調べる</title>
</head>
<body>
<h1>容量が確保できるか調べる</h1>
<form>
<input type="text" id="capacity" value="1024">
<input type="button" value="指定した容量が確保できるか確認" id="check">
</form>
<output id="result" ></output>
<script>
// クリックされたら指定した容量が確保できるか調べる
document.getElementById("check").addEventListener("click", function(){
var size = document.getElementById("capacity").value;
window.webkitStorageInfo.requestQuota(
PERSISTENT, // 永続的
size, // 確保するサイズ
function(bytes){ // 成功時のコールバック関数
var text = "OK<br>bytes : "+bytes;
document.getElementById("result").innerHTML = text;
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "エラー!!<br>"+err;
}
);
}, false);
</script>
</body>
</html>
確保した領域がどの程度使用されているかは、window.webkitStorageInfo.queryUsageAndQuota()メソッドで調べます。引数は以下の順番です。
- 一時的領域か永続的領域か(TEMPORARYまたはPERSISTENTを指定)
- 成功時に呼び出す関数
- 失敗時に呼び出す関数
2.に指定した関数には2つの引数が渡されます。第1引数が使用している容量、第2引数が全体の容量です（どちらもバイト数）。
実際のプログラムはサンプル2です。
全体の容量と使用量が表示される
Chrome for Androidの場合
■サンプル2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1">
<title>使用状況を確認する</title>
</head>
<body>
<h1>使用状況を確認する</h1>
<form>
<input type="button" value="使用状況を確認する" id="check">
</form>
<output id="result" ></output>
<script>
// クリックされたら使用状況を調べる
document.getElementById("check").addEventListener("click", function(){
window.webkitStorageInfo.queryUsageAndQuota(
TEMPORARY, // 一時的（テンポラリ）
function(usage, quota){ // 成功時のコールバック関数
var text = "OK<br>使用量 : "+usage+"<br>全容量 : "+quota;
document.getElementById("result").innerHTML = text;
},
function(err){ // 失敗時のコールバック関数
document.getElementById("result").innerHTML = "エラー!!<br>"+err;
}
);
}, false);
</script>
</body>
</html>
