メニュー
最新の記事
-
2019年10月31日、首里城全焼か。 -
貧乏人はHUAWEI nova lite 3を購入した。HUAWEI nova lite 2からの脱却 -
令和元年台風第19号 -
【キャッシュレス】毎月3000円しか引き出さない男の決済サービス比較 -
きらぼし銀行 横領に殺人、不祥事が続く
テーマ
カレンダー
月別
- 2019年10 月( 3 )
- 2019年05 月( 1 )
- 2018年07 月( 1 )
- 2017年12 月( 1 )
- 2017年11 月( 2 )
- 2017年10 月( 1 )
- 2017年09 月( 3 )
- 2017年08 月( 3 )
- 2017年07 月( 3 )
- 2017年06 月( 5 )
- 2017年05 月( 4 )
- 2017年04 月( 5 )
- 2017年03 月( 4 )
- 2017年02 月( 10 )
- 2017年01 月( 7 )
- 2016年12 月( 11 )
- 2016年11 月( 5 )
- 2016年10 月( 6 )
- 2016年09 月( 11 )
- 2016年08 月( 14 )
- 2016年07 月( 8 )
時期尚早
Facebookを参考にJSONPを学ぶ
2016年08月22日
テーマ:テーマ無し
?
//
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データは下記URLhttps://graph.facebook.com/https://www.google.com
JSONPデータは下記URLhttps://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
?
//
>>元の記事・続きはこちら(外部のサイトに移動します)
この記事はナビトモではコメントを受け付けておりません