2013年6月20日木曜日

HTML5のクライアントサイドで作ったデータをサーバーを介さずにファイル保存できるか?

HTML5のクライアントサイドで作ったデータをサーバーを介さずにファイル保存できるのだろうか?

まず仕様にあるFileSaverやFileWriterの各ブラウザの実装状況はどうだろう?

Can I use... Support tables for HTML5, CSS3, etc

ほとんど絶望的だ。現状ではChromeとBlackberry Browserでしか実装されていないようだ。しかも「Near Future」でもOperaのサポートが増えるくらいで大きな進展は期待できそうにない。

ただ、仕様通りでなくても各ブラウザでの独自実装や何らかのワークアラウンドで実現されている場合もあるだろうと思い、さらに調べていった。

調べた限り、こちらのデモが最も期待した動作をする。

Hackworthy: Save/download data generated in JavaScript
デモ:Save Generated Data

Safari:新しいタブを開いてデータを表示。保存ダイアログは出ない。
Chrome:サクッとダウンロードされるが、ファイル名が「ダウンロード」
Firefox:保存ダイアログが表示されるが、ファイル名が「〜.dms」
Opera:保存ダイアログが表示されるが、ファイル名が「default」
IE10:保存ダイアログが表示され、ファイル名も完璧

ちなみに各ブラウザは現在最新のもの。その他としてはこちら。

eligrey/FileSaver.js · GitHub
デモ:FileSaver.js demo

追記13.06.21:下記の評価は正しくない。確かに現在のところオンラインデモでは下記の通りだが、最新のライブラリを使って実際に自分でデモ作ってみると、結果は以下のようになった。

HTML5 Image File Save Example

Safari:新しいタブを開いてデータを表示。保存ダイアログは出ない。(ボップアップブロック解除時)
Chrome:サクッとダウンロードして、ファイル名も完璧
Firefox:保存ダイアログが表示され、ファイル名も完璧
Opera:新しいタブを開いてデータを表示。保存ダイアログは出ない。(ボップアップがブロックされたとの通知をクリック)
IE10:保存ダイアログが表示され、ファイル名も完璧

SafariとOperaさえ何とかすればかなりいける!

この結果を受けて、さらに調べていった記事。

琴線探査: 「Downloadify」Safari・Operaのファイル保存問題解決の糸口

----

Safari:新しいタブを開いてデータを表示。保存ダイアログは出ない。
Chrome:サクッとダウンロードして、ファイル名も完璧
Firefox:新しいタブを開いてデータを表示。保存ダイアログは出ない。
Opera:新しいタブを開くがデータがまったく表示されない
IE10:保存ダイアログが表示され、ファイル名も完璧

と言う感じ。両方のプログラムのいいとこ取りをすれば少しはマシになりそうだけど、ChromeとIE10以外ではまともな動作は期待できなさそう。特にSafariがダメなのが痛い。これではせっかくHTML5で作っても、iOSユーザーが相当犠牲になってしまう。IE10が完璧なのは意外だった。

どうやらこれが現状のようだ。やはりどのブラウザでもまともに動作させたいと思ったら、一旦サーバーにアップロードしてそのレスポンスでダウンロード・ファイル保存、というプロセスになりそうだ。

何と無駄な。。。これでは正直まだまだFlash以下だ。Flashもクライアントサイドのみでのファイル保存の実装までにかなり待たされたけど、もう数年前には実装されている。

HTML5でデスクトップ並のアプリケーションを開発できるようになるには、まだ時間が必要なようだ。

その他の参考ページ。

Exploring the FileSystem APIs - HTML5 Rocks

Loading, Editing, and Saving a Text File in HTML5 Using Javascript | This Could Be Better

Saving generated files on the client-side - HTML5Rocks Updates