前回の「Ajaxを使いPHPからデータを取得する方法その２（郵便番号からの住所取得）」では 郵便番号データを自分で用意し、更に Ajax 用の API(PHPでのプログラム) を作成しそれを呼出すことで郵便番号からの住所取得を行いました。
今回は日本全国の郵便番号データを日本郵便からダウンロードしAPIを整備するのも面倒なので、ネット上に公開されているAPIを利用する方法で行ってみます。
今回利用するAPIは「株式会社アイビス」さんが公開しているもので無料で使用可能な様です。 「郵便番号検索API 」の紹介ページは以下のURLを参照して下さい。
⇒http://zipcloud.ibsnet.co.jp/doc/api
このページで詳しく説明を行うと、上記のページで規定されているライセンス契約に違反する様ですので行いません。
以下のリクエストURLをブラウザに直接設定すると、ブラウザの画面に結果データが表示されます。
⇒https://zip-cloud.appspot.com/api/search?zipcode=8070042
■https://zip-cloud.appspot.com/api/search?zipcode=8070042 のブラウザでの結果
{
"message": null,
"results": [
{
"address1": "福岡県",
"address2": "遠賀郡水巻町",
"address3": "吉田",
"kana1": "ﾌｸｵｶｹﾝ",
"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
"kana3": "ﾖｼﾀﾞ",
"prefcode": "40",
"zipcode": "8070042"
},
{
"address1": "福岡県",
"address2": "遠賀郡水巻町",
"address3": "吉田団地",
"kana1": "ﾌｸｵｶｹﾝ",
"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
"kana3": "ﾖｼﾀﾞﾀﾞﾝﾁ",
"prefcode": "40",
"zipcode": "8070042"
}
],
"status": 200
}
同一郵便番号で複数の住所が該当する場合があるので、「results」は配列でのデータが返されます。
この API を ajax で処理しているソースを以下に示します。
■Ajaxを使いPHPからデータを取得するHTMLファイルその２
<html>
<head>
<meta charset="utf-8">
<title>test ajax zipcode</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Ajax関数
function getData() {
//
var incode = $("#zipcode").val();
$.ajax({
type: 'get'
, url: 'https://zip-cloud.appspot.com/api/search'
, dataType:'jsonp' // 応答のデータの種類
, data: {
zipcode: incode // 郵便番号
}
, jsonp: 'callback' //コールバックパラメータ名の指定
}).done(function(res){
// ajaxがOK
if (res.status == "200") {
var str = "";
var obj = res.results[0];
str = obj.prefcode;
$("#prefcode").text(str)
str = obj.address1 + ' ' + obj.address2 + ' ' + obj.address3;
$("#address").text(str)
str = obj.kana1 + ' ' + obj.kana2 + ' ' + obj.kana3;
$("#kana").text(str)
} else {
alert('エラー:' + res.status);
}
}).fail(function() {
// 取得エラー
alert('取得エラー');
});
return false;
}
</script>
</head>
<body>
<h1>test ajax zipcode</h1>
ZIPCODE:<input type="text" id="zipcode" size="10" maxlength="10"><br />
都道府県CODE:<div id="prefcode"></div><br />
住所漢字:<div id="address"></div><br />
住所カナ:<div id="kana"></div><br />
<button onclick="getData();">Ajax</button>
</body>
</html>
■実際の動作
都道府県CODE: 住所漢字: 住所カナ:
このプログラムで気をつけるところは dataType の指定を jsonp の部分です。 通常の ajax では json データを扱うので json と指定するのですが、 今回は存在する URL が外部のため、クロスドメインの制限に引っかかってしまいます。
この制限を回避するために jsonp を使います。 jsonp では返答の json データを引数とした関数（コールバック）で囲んだデータとして返されます。 この説明では何を言っているのか分からないと思いますので、先ほどのデータを例にすると以下の様にデータが返されてきます。 （データを callback() で囲った形です。）
callback(
{
"message": null,
"results": [
{
"address1": "福岡県",
"address2": "遠賀郡水巻町",
"address3": "吉田",
"kana1": "ﾌｸｵｶｹﾝ",
"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
"kana3": "ﾖｼﾀﾞ",
"prefcode": "40",
"zipcode": "8070042"
},
{
"address1": "福岡県",
"address2": "遠賀郡水巻町",
"address3": "吉田団地",
"kana1": "ﾌｸｵｶｹﾝ",
"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
"kana3": "ﾖｼﾀﾞﾀﾞﾝﾁ",
"prefcode": "40",
"zipcode": "8070042"
}
],
"status": 200
}
)
この callback() は結果的に done を呼出すことになり、データ処理が行えます。
コメント