|
|---|
HTML5では、Web StorageやWeb SQL/Indexed DBといった、JavaScriptでクライアントサイド（ブラウザー）にデータを保存する機能があります。今回紹介する「File system API」もそんな機能の1つですが、MacやWindowsのようなディレクトリを持ったファイルシステムにデータをファイルとして保存できます。
- File system API
- http://www.w3.org/TR/file-system-api/
File system APIを使うと、Canvasに描いた画像をファイルとしてブラウザーに保存する、といったことができます。現在のところ、「Google Chrome」と、Android 4の「Chrome for Android」だけで利用できますが、特にスマートフォンでファイルが扱えるのは便利でしょう。
今回は、File system APIを使って簡単なファイラーを作ります。File system APIは非同期処理が多く、掲載しているソースコードは可読性があまりよくありません。実際に作成する簡易ファイラーでは、それぞれの機能を簡単なライブラリーにまとめて利用するようにしてあります。
File system APIはファイルを扱いますが、OSのファイルシステムからは独立しており、OSのファイルには直接アクセスできません。また、同一オリジン内でのみアクセスでき、異なるオリジンから他のオリジンへのファイルアクセスはできません*1。
以下の順番でFile system APIの使い方を解説していきます。
- 使用可能な容量の確認
- 使用量の確認
- ファイルの作成
- ファイルの削除
- ディレクトリの作成
- ディレクトリの削除
- ディレクトリ内容の取得
- ファイルへの書き込み
- ファイル内容の読み込み
※File system APIにはほかにもリネームやコピー機能があります。
本記事ではGoogle ChromeおよびChrome for Androidで動作させることを前提にしているため、window.webkitStorageInfoのようにwebkitのベンダープレフィックスが付いています。将来、正式な仕様になった場合はwindow.storageInfoのようにベンダープレフィックスを削除しないと動作しなくなります。以下のようにコードを記述することで、window.storageInfoなどの機能を複数のブラウザーで利用できます。
window.storageInfo = window.storageInfo || window.webkitStorageInfo;
*1 オリジンについては第40回の『サーバー不要で保存できる「Web Storage」の使い方』を参照してください。
