[JavaScript] ブラウザでローカルファイルを実行する方法:Firefox、Chrome

2014 年 12 月 21 日

以下では、file://プロトコルのHTMLファイルでJavaScriptファイルを直接実行する方法について。

(軽量Webサーバーを使う場合は以下で)
超軽量Webサーバーまとめ :ローカルファイルをブラウザで実行[開発用]

共通の問題

XMLHttpRequestのstatusCodeが「0」になる

XMLHttpRequestを使ったAjax通信が成功しても、ステータスコードは「200」にならず、「0」になる。

これは、どのブラウザでも共通。

200しか想定していない外部ライブラリを使う場合に問題になる。Cocos2d-xのCocos2d-htmlなど。

この場合は、ソースコードを直接書き換えるか、素直にローカルのウェブサーバーを通すしかない。

ローカルファイルを実行するための設定

Firefox

デフォルトで問題なく動作する。

Chrome

起動オプションに「–allow-file-access-from-files」をつける。

Windowsではショートカットのファイルをつくり、その「プロパティ」にある「リンク先」の項目に追加すると手っ取り早い。

「"…chrome.exe" –allow-file-access-from-files」

問題

現行のバージョン「Chrome 39」では、このオプションをつけてもXMLHttpRequestは使えない。

セキュリティ上の問題を考えると、今後もこの方向性は変わらないように思う。

まとめ

メリット

HTMLファイルを用意すればいいだけなので、手軽に実行できる。

ウェブサーバーを通さない分、高速に読み込みができる。

デメリット

全体として、うまく動作しない場合がままある。

Operaではまったく実行できず、他のブラウザでもXMLHttpRequestがうまく動作しないことも。

所感

ローカルファイルをfile://プロトコルで直接実行するのは、ちょっとしたテストコードやサンプル程度にとどめておいたほうがいいだろう。