技術/HTML5/FileSystemAPI (v2)

• [ Prev ]
• [ Next ]
• [ 技術 ]

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/

サンプル

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

スマホ用のブラウザでの検証。
日記/2011/12/11/MonacaとPhoneGapでファイル操作してみた。 参照。

習作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化を行なって欲しい。というかぶっちゃけありえなーい。

• [ Prev ]
• [ Next ]
• [ 技術 ]