ChromeでJSからローカルファイルアクセスしたい

問題

Chromeでは、XMLHttpRequestによるローカルファイルアクセスは、同一オリジンポリシーによりエラー（Same-Origin Policy違反）が発生し不可。

このローカルファイルアクセスとは、ブラウザからのWebサーバのファイルに対するアクセス（リクエスト）ではなく、PCの中に保存しているファイルに対するアクセスを意味しています。

たとえば、jQueryでjsonファイルにアクセスしたいならば、下記のようなコードになります。ところが、上記の通り、ローカルファイルアクセスの場合には、エラーが発生してしまいます。

// PCの中に保存しているdata.jsonを読み込みたい
$.getJSON('./data.json', function(data){ // getJSON()メソッドでエラーが発生してしまう
    // 何らかの処理がここに入る
});

解決方法

• 非同期処理のファイルアクセスをやる必要が無い
• アクセス対象のファイルが固定されている（動的なファイル指定が不要）
• ファイルデータがJavaScriptグローバル名前空間上に配置されても問題が無い

上記の条件を満たすならば、簡単に解決可能です。JSONPやCORSによる対応は不要。
それは、HTMLのscriptタグのsrc属性は同一オリジンポリシーによる制限を受けないため、scriptタグからファイルアクセスする手法です。下記に具体例コードを示します。
またこの手法は、当然ですがサーバファイルアクセスでも（下記の場合ならば、data.jsがWebサーバの中に保存されていても）同一のコードで大丈夫です。

<script type="text/javascript" src="./data.js"></script>
<script type="text/javascript">
  // JavaScript変数のhobbyに対する何らかの処理がここに入る
</script>

data.js

// JSONデータをJavaScript変数のhobbyに代入する
var hobby = [
  { id: 1, name: "ichiro"},
  { id: 2, name: "jiro"},
  { id: 3, name: "saburo"},
];