Facebookを参考にJSONPを学ぶ
JSONPとは
まず、JSONPとは何か。
JSON with padding
scriptタグを使用してクロスドメインなデータを取得する仕組み
ちなみに、JSONはJavaScript Object Notationの略です。
用途
どういった時に使うか。
わかりやすい例を挙げると、最近記事にしたFacebookのカウント数取得等です。
個人のブログ等に限らず、Yahooニュース等々、大手メディアも人気の指標として利用しています。
ということで、このようなWebAPIにJSONPは使われる技術です。
むしろ、これを機に何となく敬遠していたJSONPに注目しました。
ということで、実際に自分でJSONPデータを作ろうとしたところ、若干ハマりましたので備忘録です。
私は、Facebookデータを参考にしました。
まず、この方法が良くなかった、というか勘違いしてしまった原因です。
Facebookでは下記URL末尾にURLを付与すると、JSONデータが表示されます。
https://graph.facebook.com/
例えば、googleのURLでも入れてみましょう。
https://graph.facebook.com/https://www.google.com
データ
{
"og_object": {
"id": "400854551051",
"description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
"title": "Google",
"type": "website",
"updated_time": "2016-08-22T03:34:43+0000"
},
"share": {
"comment_count": 0,
"share_count": 3922425
},
"id": "https://google.com"
}
ちなみにもう一度書きます。
これはJSONPデータではなく、JSONデータなのです。
私はここを大きく勘違いしてしまったので、随分ハマってしまいました。
JSONとJSONPのフォーマット
まず、JSONのフォーマットはこうです。
{
"obj1": "value1",
"obj2": "value2"
}
そして、JSONPのフォーマットはこう。
callback({
"obj1": "value1",
"obj2": "value2"
})
最初は、このcallbackがピンときませんでした。
JSONPでデータを取得しようとする場合、このcallbackの値をつけてデータを返してくるのです。
いや、データを返してくるというより、callbackの値をつけるようにデータを作らなければ中身が取得出来ません。
通信の応答内容を確認してようやく気付きました。
JSONデータは下記URL
https://graph.facebook.com/https://www.google.com
JSONPデータは下記URL
https://graph.facebook.com/https://www.google.com?callback=test
※実際にはtestの部分はランダムで返してきます。
なので、callbackの値を取得した上で、jsonフォーマットにエンコードした配列をその値で囲ってやることでJSONPデータになります。
$callback = $_GET["callback"];
$list = array(
"id" => $hogeid,
"title" => $hogetitle,
"url" => $hogeurl,
);
echo $callback.'('.json_encode($list).')';
※ 重要な部分だけ書いています。
いくつかのサイトを参考にしてますが、特に下記2サイトが参考になりました。
