2011-07-18
JavaScriptからローカルファイルを作成する方法まとめ
久しぶりに JavaScript と戯れたいなぁと思ったので JavaScript からローカルファイルを作成する方法をまとめてみました。
私の知る限り、Internet Explorer（ActiveX）、Firefox（XPCOM）、Google Chrome（File API: Writer）の3ブラウザがローカルファイルの作成に対応しています。
※File API: Writer は意味合いが違う気がしますが・・・
-- 2012-04-12 追記 --
当時の正確なバージョンはわかりませんが、時期的に IE8、Firefox 5、Google Chrome 12 で動作確認していると思われます
---------------------
細かいことは後で説明するとしてローカルファイルを作成するコードは例えば次のようになります。
※IE、Firefox の場合は /tmp（Unix）, C:\tmp（Windows）以下にファイルが作成されることが前提です
かなり詳しくコメント書いてるんであまり説明の必要もないと思いますが、極簡単な説明と注意点だけ書きます。
File API も含めてどれもセキュリティ的によろしくないと思うので、テストで試してみるにしても終わったら元のオプションに戻すことをお勧めします。
IE
ActiveX を利用しています。ActiveX はご存知ブラウザだけでは実現不可能な機能を可能にする"便利"な機能です。
セキュリティオプションで「スクリプトを実行しても安全だとマークされていない ActiveX コントロールの初期化とスクリプトの実行（セキュリティで保護されていない）」を有効にする必要があります。
※fileスキームの場合は必要なし（かも）
UTF-8 で 出力しようとすると ADODB.Stream を使ったり Utf8Lib.Utf8Enc を使えば可能みたいなんですが、レジストリやセキュリティオプションをいじっても「Error: オートメーションサーバーはオブジェクトを作成できません。」というエラーが出てしまいました。*1
Firefox
XPCOM (Cross Platform Component Object Model) を利用しています。Wikipediaによれば
XPCOM(Cross Platform Component Object Model)は、Mozillaプロジェクトにおいて開発されているクロスプラットフォームなコンポーネント技術である。
とのことです。Firefox のアドオンで多様な機能を提供できるのは XPCOM を使っているから（のはず）です。
about:config で signed.applets.codebase_principal_support を true にする必要があります。
※fileスキームの場合は必要なし
Chrome
File API: Writer を利用しています。File API を利用することでドラッグ＆ドロップしたファイルをページに表示したりサーバにアップしたりできることはよく知られていると思いますが、ローカルに書き込みもできるように話が進んでいるようです。
File API: Writer を現時点で実装しているのは主要ブラウザではおそらく Chrome だけです。
Chrome で File API: Writer の機能を利用してローカルに書き込むには起動オプションに --unlimited-quota-for-files --allow-file-access-from-files をつける必要があります。
※近々デフォルトで有効になるのではないかと
-- 2012-04-12 追記 --
Google Chrome 18 では File API: Writer の機能を使うのに起動オプション不要でした。
---------------------
Windows 7 の場合
コマンドプロンプトから次のコマンドを実行します（USERNAMEは自分のユーザ名を使用してください）
> cd C:\User\USERNAME\AppData\Local\Google\Chrome\Application > chrome.exe --unlimited-quota-for-files --allow-file-access-from-files
出力されるファイルは
C:\User\USERNAME\AppData\Local\Google\Chrome\User Data\Default\FileSystem\Persistent
以下に作成されます。
Mac OS X の場合
端末から次のコマンドを実行します。
$ open -a "Google Chrome" --args --unlimited-quota-for-files --allow-file-access-from-files
出力されるファイルは
/Users/USERNAME/Library/Application Support/Google/Chrome/Default/FileSystem/Persistent
以下に作成されます。
-- 2012-04-12 追記 --
Google Chrome 18 の時点では /Users/USERNAME/Library/Application Support/Google/Chrome/Default/File System 以下に作成されるようになっていました
---------------------
以上のようにデータをクライアント側に保存しておけばオフライン作業ができたり、簡単なアプリケーションであれば JavaScript のみで完結できたりと夢が広がりますね！
File API に興味がある方はこんなエントリーもありますよ！
Filefoxでファイルの非同期アップロード with 複数パラメータ - あらびき日記
参考
ActiveX 関係
- いろんな文字コードでファイルを読み書きするにはADODB.Stream - 今日覚えたこと
- ADODB.Stream を使ったファイルの読み書き - by AOK
- javascript - Writing UTF8 text to file - Stack Overflow
- Internet Explorer で ADODB.Stream オブジェクトを無効にする方法
XPCOM 関係
- XPCOM インターフェイス - MDN Docs
- ４章：XPCOM活用術 - Firefox拡張機能開発チュートリアル (XHTML)
- File I/O - MDN Docs
- javascript - How to sign script or webpage requiring UniversalXPConnect privilege - Stack Overflow
- ローカルファイルへの書き込み（その２） - awacio.log