症状
サンプルコードを写経してたら表示されたりされなかったりする。
でも Firefox だと表示される。
Google Chrome の問題なのか Javascript の問題なのか？
調べてみる
問題のファイルを Chrome で開いて、Google Chrome Developer Tools の Soureces で確認するとエラー出てた。
XMLHttpRequest cannot load file://localhost/Users/username/hoge/hoge.html. Origin null is not allowed by Access-Control-Allow-Origin.
原因
要は、ドメインが違うサイトのデータを勝手に取れなくなってしまったのです。Same Origin Policyというらしいです。
AjaxでAccess-Control-Allow-Originのエラーを回避する方法 | 村田佑介.com
デフォルトではローカルのファイルの読み込みができないらしい。
回避方法
MacOSX の場合
起動オプションを指定して Chrome を立ち上げればよいらしい。
Google先生に訊いたら結構これにハマった人は多いみたい。
chrome://flags/ でこれ設定できるようになったらよいのにね。
その１： terminal から オプションつけて起動
open -a Google\ Chrome --args -allow-file-access-from-files
その２：Automator.app でアプリ化して起動
下記リンク参照
やり方
- Automator.app を起動して『Application』 選択
- 左のアクションのペインで『シェルスクリプトを実行』を選択
- 『open -a Google\ Chrome --args -allow-file-access-from-files』と入力して保存
ちなみにランチャーに Quicksilver を使ってる場合は、作成したアプリを開けなかったりするので『パッケージの内容を表示』で中の『Application Stub』をchmod 775 などとすると開く。
このファイル
- /Contents/MacOS/Application Stub
