[PHP]他所のJSONをPHP経由の力技で使ってみる。

JSONファイルを別ドメインから取得しようとすると、「Same origin policy」に引っかかって読み込めません。

Same Origin Policyの役割としては悪意のあるscriptが個人情報等を他のサイトに転送する事を防ぐためです。
このセキリティ制限を回避するために多くの人が代表的なJSONP(JSON with Padding)を利用してサーバサイドでクライアントのコールバック関数をechoしてクライアント側で実行されることにより、クロスドメイン間のAjax通信をそれっぽく動くように対応していたと思います。

JavaScript Ajax : XmlHttpRequestのLevel2でSameOriginPolicyを回避する – Web就活日記

ここにある通り本来ならJSONPを使えばどうとでもなるのですが、こういうやり方もあるということで、ね？

というわけで今回は同じドメインとしてJSONファイルを処理させてみました。

PHPでJSONをぶっこ抜く

やることはシンプルで、PHPでJSONを取得して同一ドメイン内で読み込ませるようにするだけです。

以前JavaScriptをphpファイルで操作する方法について調べたことがあったので、それを応用させます。
【WordPress】管理画面でJavascriptも編集できるようにしたい at softelメモ
ここのコードを、
JSONのContent-Typeは「 text/javascript 」でなく「application/json」で。 – FlatLabs
の内容の通り「Content-Type」を「application/json」に書き換えるなどの調整を入れます。
[php]
<?php
$expires = 3600000;
header(‘Last-Modified: Fri Jan 01 2010 00:00:00 GMT’);
header(‘Expires: ‘ . gmdate(‘D, d M Y H:i:s T’, time() + $expires));
header(‘Cache-Control: private, max-age=’ . $expires);
header(‘Pragma: ‘);

//これ重要
header("Content-Type: application/json; charset=utf-8");
$record = @file_get_contents(‘https://deff.domain.com/json/’);
echo($record);
[/php]
@file_get_contents(‘URL’)内にぶっこ抜きたいJSONファイルのURLを入力すれば完成です。

ちなみにPHPのまま使うときは、json_decode(@filter_get_contents(‘URL’))に書き換えれば大丈夫そうです。

ぶっこ抜いたJSONを呼び出す

先ほど作成したファイルは「JSONとして扱えるPHPファイル」ですので、通常のJSONファイルを同様に呼び出して行きます。

例えばこんな感じ。
[php]
<script>
$.getJSON("https://same.domain.com/json.php", function(json){
alert("JSON Data: " + json.name);
});
</script>
[/php]
多分これで大丈夫だと思います。

試しにぐるナビAPIで店舗データを引っこ抜いてみました。

これならSOPに引っかかることは無いと思います。

本当はこっちを使うべきなJSONPの軽い話

正直な話、PHPを挟むまどろっこし処理を入れるくらいなら「JSONP」を使えというのが正解だったりします。

JSONP（JSON with padding）とは?

JSONP（JSON with padding）とは、scriptタグを使用してクロスドメインなデータを取得する仕組みのことである。HTMLのscriptタグ、JavaScript（関数）、JSONを組み合わせて実現される。

＜中略＞

HTMLのscriptタグのsrc属性には別ドメインのURLを指定して通信することができるという点を利用することによって別ドメインのサーバからデータを取得することが可能になる。
JSONP – Wikipedia

JSONPについての参考になりそうな記事

JSONとJSONPでは微妙に処理が違うので、APIの処理等で困っている方はこの辺りの記事を読んでみてください。
JSONPで悩むある程度の人々へ

JSONP WebAPIを爆速で使いこなせるフレームワーク – Yahoo! JAPAN Tech Blog

第11回　JSONP入門：これでできる！ クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社

JSONとJSONPの違い – あと味