読者です 読者をやめる 読者になる 読者になる

Newish One Day

毎日が新しい日。この気付きが人生を快適に過ごす秘訣だけれど、なかなかどうして辿り着けない。

Facebookを参考にJSONPを学ぶ

インターネット Facebook ハウツー

 

JSONPとは

まず、JSONPとは何か。

JSON with padding

scriptタグを使用してクロスドメインなデータを取得する仕組み

引用:JSONP - Wikipedia

ちなみに、JSONはJavaScript Object Notationの略です。

用途

どういった時に使うか。
わかりやすい例を挙げると、最近記事にしたFacebookのカウント数取得等です。
個人のブログ等に限らず、Yahooニュース等々、大手メディアも人気の指標として利用しています。
ということで、このようなWebAPIにJSONPは使われる技術です。

www.secmemo.com

むしろ、これを機に何となく敬遠していた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サイトが参考になりました。

JSONPで悩むある程度の人々へ

blog.bungu-do.jp