Naoさんのプロフィールへ

Naoさんのブログトップへ

最新の記事

• 
  2019年10月31日、首里城全焼か。
• 
  貧乏人はHUAWEI nova lite 3を購入した。HUAWEI nova lite 2からの脱却
• 
  令和元年台風第19号
• 
  【キャッシュレス】毎月3000円しか引き出さない男の決済サービス比較
• 
  きらぼし銀行　横領に殺人、不祥事が続く

一覧を見る>>

テーマ

• テーマ無し （ 108 ）

カレンダー

月別

• 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




?

//

>>元の記事・続きはこちら（外部のサイトに移動します）

この記事はナビトモではコメントを受け付けておりません

掲載されている画像