注意
- 正確でない点、誤っている点が含まれている可能性が高いです
JSONP とは
- データを取得する仕組み（Wikipedia）
- 「仕組み」である
JSONP で JSON を取得する流れ
- 「呼び出し側」から「サービス提供側」に対してデータを取得する旨を伝える
- 「サービス提供側」は「呼び出し側」に対して「関数を実行する JavaScirpt のコード*1」を戻す
- 「呼び出し側」は「2.」の「関数」を予め作っておく
- 「呼び出し側」は「3.」の「関数」を実行することで JSON が取得できる
具体例
1. 「呼び出し側」から「サービス提供側」に対してデータを取得する旨を伝える
- 以下のようにして HTML の中でデータを取得する旨を伝える*2
<script src="http://zip.ricollab.jp/jsonp_test.php"></script>
- 補足
<script>タグを用いる
2. 「サービス提供側」は「呼び出し側」に対して「関数を実行する JavaScirpt のコード」を戻す
- 「1.」の戻り値である「関数を実行する JavaScirpt のコード」は以下のとおり*3
this_is_callback({ "zipcode": "1120002", "address": { "prefecture": "東京都", "city": "文京区", "town": "小石川" }, "yomi": { "prefecture": "トウキョウト", "city": "ブンキョウク", "town": "コイシカワ" } });
- 補足
- 「関数」の名前は「サービス提供側」が定義した名前である（今回は
this_is_callbackである）*4 - 「関数」の引数に、取得したい JSON が入っている
- 引数が長いために戸惑うかもしれない
- 「関数」の名前は「サービス提供側」が定義した名前である（今回は
3. 「呼び出し側」は「2.」の「関数」を予め作っておく
- 予め「関数」を作っておかないと何も起こらない*5
- 「関数」の名前は「サービス提供側」が定義した名前（今回は
this_is_callback）にしなければならない - 予め作る「関数」は以下のとおり
<script> function this_is_callback(return_json_data) { console.log(return_json_data); // return_json_data は JSON である } </script>
4. 「呼び出し側」は「3.」の「関数」を実行することで JSON が取得できる
- 「3.」の記述を HTML に書いておけば、Webブラウザ で HTML が読み込まれた際に「関数」が自動で実行される
- 「3.」までの手続きが正しければ JSON が取得できている
「呼び出し側」が用意するものと「サービス提供側」が用意するものの区別
「呼び出し側」が用意するもの
- 「サービス提供側」にどういう方法で「データを取得したい」旨を伝えればよいのかを仕様書などで確認する*6
- 「サービス提供側」からの戻り値である「関数を実行する JavaScirpt のコード」が実行できる仕組み（すなわち関数）を作る
「サービス提供側」が用意するもの
- 「呼び出し側」からどういう方法で「データを取得したい」旨を受け取ればよいのかを決める
- 「呼び出し側」に対して、値（「関数を実行する JavaScirpt のコード」）を戻す仕組みを作る
- 上記の仕様を「呼び出し側」に公開する
参考（一番わかりやすかった）
- 「第4部 第14章 第5節」
補足
「Webを支える技術」のサンプルに使われている「ricollab 郵便番号検索」は 2018年2月28日でサービスが終了 とのことです。
