#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専用)です。
- webtoys/html5/filesystem/t_filesystem_00.html
-- https://github.com/msakamoto-sf/webtoys/blob/master/html5/filesystem/t_filesystem_00.html

** 習作2

スマホ用のブラウザでの検証。
[[1044]] 参照。

** 習作3

jQuery使ったり、クラスにまとめたりして整理した・・・つもり。
PC, Chrome専用。

- webtoys/html5/filesystem/t_filesystem_01.html
-- https://github.com/msakamoto-sf/webtoys/blob/master/html5/filesystem/t_filesystem_01.html
- webtoys/html5/filesystem/t_fsdemo.js
-- https://github.com/msakamoto-sf/webtoys/blob/master/html5/filesystem/t_fsdemo.js

PhoneGap環境も一応考慮してみたのだけれど、まだ上手く動かせていない。

* メモ

- 習作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|技術|