#navi_header|技術|
FileSystem API のサンプルとメモ。
参考：
- HTML5 Rocks - Exploring the FileSystem APIs
-- http://www.html5rocks.com/en/tutorials/file/filesystem/
- File API: Directories and System
-- http://www.w3.org/TR/file-system-api/
#more||
* サンプル
2011年末現在、Chromeでしか動作しないものの、サンプルを作って見ました。
** 習作1
PersistentとTemporaryの二種類のストレージに、"foo.txt"という名前のファイルをRead/Writeします。
PC用(Chrome専用)です。
t_filesystem_01.html:
#pre||>
File System API demo
File System API Demos
Persistent File System
show Persistent Root
save to Persistent "foo.txt"
load from Persistent "foo.txt"
Temporary File System
show Temporary Root
save to Temporary "foo.txt"
load from Temporary "foo.txt"
||<
** 習作2
スマホ用のブラウザでの検証。
[[1044]] 参照。
* メモ
- 習作1では、PersistentとTemporaryで同じファイル名にRead/Writeしてみたが、それぞれ独立していた。
-- Persistentではリロードしてもファイル内容が維持されていたが、Temporaryのファイルはリロードにより消去される。
-- Chrome上では「高度な設定」→「コンテンツの設定」→「全てのCookitとサイトのデータ...」で「ファイルシステム」として確認できる。
- 習作1を異なるドメインに配置してアクセスしてみたところ、同じファイル名にRead/Writeしているが、それぞれ独立していた。
-- サブドメインを使ったアクセス制御が可能かどうかは未調査・未検証。iframe中での使用についても同様。
- 習作1では fullpath が PersistentもTemporaryも "/" となっていたが、習作2では "/sdcard" などローカルのパス名が露出している。
- スマホでは"LocalFileSystem.PERSISTENT", "LocalFileSystem.TEMPORARY"としてアクセスしたが、PC用では"window."に直す必要があったり、Chrome用では window.webkitRequestFileSystem を使用する必要があったりと、ブラウザの対応状況によってオブジェクトの階層がずれている。
感想：
- callback関数を多段で渡していくので、プログラミングが直感的でなく、可読性が落ちる。
-- 将来的にjQueryなどでスマートにラップされるようにはなると思うが・・・というか、なってほしい。
- スマホの場合にSDカード領域にかなり自由にアクセスできそうなので、悪意のあるJavaScriptを考慮すると、将来的にはPC用Chromeと同様のSandBox化を行なって欲しい。というかぶっちゃけありえなーい。
#navi_footer|技術|