Webアプリからローカルファイルへアクセスする(前編)(FileSystem APIを使ってみる)

え〜皆様ご無沙汰しております。またも、以前の投稿から２週間前後もの日にちがあくことになってしまいました。いい加減このサボりぐせを何とかしたい…


今回は前回の記事で紹介したぴこぴこ・しーけんさーのアップデートを行ったので、その技術解説も兼ねて紹介することにしようと思います。
さて今回のアップデートで追加した機能とは、ずばり「ローカルファイルへの保存/からの復元」です。ネイティブアプリを開発したことがある方なら「なんだ、そんなことかよ」と思われるかもしれませんが、Webプラットフォームからローカルシステムへのアクセスには大きな障壁が未だ存在しているのです。
では、まずこの機能を実装するにあたってなにか使えそうなAPIは思いつくでしょうか？いえまあ、そんなことせずとも、ちょっとググればすぐ答えは見つかるんですがね…そう、今回私が目をつけたのは「Filesystem API」というものです。少し名前が不可解な気もしますが、これを使えばとりあえずネイティブアプリのようにローカルファイルに自由にアクセスできると誰もが思うでしょう。しかし、そうは問屋がおろしません。Filesystem APIの基礎についてはこちら
このFilesystem APIが扱えるFilesystemとは、通常のファイルシステムではなく、サンドボックス化された他の領域から隔絶されたほんの小さな領域だけなのです。通常のファイルシステムを巨大な氷山に例えるならば、そのほんの一角、ほんの一片のみにしかアクセスできないわけです。これは、ローカルディスク内にVirtual Boxで仮想OS用のディスクイメージを作成するように、小領域のCドライブ領域を新たに用意するというようなイメージで捉えるといいでしょう。
この制限によって今現在はFilesystem APIのみでファイルへの保存・からの復元を実装することは困難になっています。ならば、前述したような機能はどのようにして実装すればいいでしょうか？

今回ぴこぴこ・しーけんさーで実装するにあたって復元・オープンの方は、正直なところあまりFilesystem APIと関係ない実装方法になってしまったので後述するとして、まずは保存の方の実装法から見て行きましょう。
Webアプリからローカルシステムへ保存する場合、既述のFilesystem APIの仕様からユーザーがそのサンドボックス化されたFilesystemの場所を自ら探しだして二次利用できるようにすることが可能という前提があれば、Filesystem APIのみを使用することで晴れてこの問題は解決と相成ります。しかし、それではあまりにも不親切ですし、ユーザーエージェントによっては、Filesystem API固有のファイルシステム（以下、固有のファイルシステムと記述）全体をtarのようなアーカイブファイルとして管理し、通常のファイルシステムからは容易に個々のファイルにアクセスできないなどの事態が想定されるため、現状の解決策としては及第点以下でしょう。
ではどうするか。そこで上述のリンク先を細かく見ていくと下の方のコメント欄に

Is there a way for download and save the file in a whatever directory using a function? (jQuery)

Not as of yet. There's much to work out in the way of security when you allow read/write access to arbitrary directories. You can you(おそらくuseのtypo) a[download] to have the user download the file to the default Downloads folder.

というやりとりがあり、その直後に<a>要素のdownload属性の使い方に関するページヘのリンクが貼ってあります。今回はこの方法を採用しています。
具体的にはまず、Filesystem APIで固有のファイルシステムに一旦編集内容を保存後、そのファイルへのURLと曲のタイトル名をdownload属性に指定した<a>要素をユーザーに提示して、それをクリックしてもらうことでファイルのダウンロード=保存を完了するという方法です。
以下にjsdo.itを使用した例を提示しておきます。

上述の例は、「webkit」というベンダープレフィックスが付いているとおり、Chromeでしか動かないと思われます。Filesystem APIもGoogle以外あんまり実装してくれてないんですよね……
思った以上に長くなってしまったので、オープンの方の実装法はまた後編で紹介することにしましょう。では、さらば|彡ｻｯ

※参考程度に本文中で引用した英文の訳を提示しておきます。
「好きなディレクトリーにファイルを保存したりダウンロードしたりする関数ってある？(jQueryなんだけどさ)」
「いいや、今はないよ。あらゆるディレクトリーへの書き込み、からの読み込みを許可するにはセキュリティー上解決すべき問題が山積みだからねー。ただ、a[download]属性を使えばユーザーにデフォルトのダウンロードフォルダーへファイルをダウンロードしてもらえるよ。」