2013年6月21日金曜日

「Downloadify」Safari・Operaのファイル保存問題解決の糸口

昨日、こんな記事を書いた。

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

この記事の中で、FileSaver.jsの評価をしていた。

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

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

HTML5 Image File Save Example

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

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

どうにかならないか?とさらに調べていると、このようなライブラリを見つけた。

dcneiner/Downloadify · GitHub

このライブラリはFlashを使うことで保存ダイアログの表示を実現している。

その仕組みは、

・External Interfaceを使って
・HTMLからFlashにbase64データを流し込む
・Flashでbase64をデコードする
・Flashの保存ダイアログでデコードしたバイナリを保存する

というもの。

そうか!その手があったか!Flashを使うのでiOSのブラウザは犠牲になってしまうけれど、デスクトップのSafariとOperaは救える!

しかし、実際に使おうとよく見ていくと、ダウンロードボタンをFlashで作っているので通常のHTMLのボタンなどに保存処理を関連付けることができない_| ̄|○

う~ん、何とかならんもんかのぉ。。。

External InterfaceはHTMLからもFlashからも双方向にメソッドを呼んだりデータを受け渡したりできるはず。

ExternalInterface - ActionScript 3.0 コンポーネントリファレンスガイド

設計次第で何とかなるんじゃないか?やってみるか・・・

追記13.06.25:ダメだった_| ̄|○
琴線探査: JavaScript内のデータをFlashのファイルダイアログで保存することはできるか?