先日、郵便番号から住所を補完する jQuery のプラグイン jquery.ajaxzip2 を紹介しました。
これは AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）を jQuery プラグインとして実装したもので、利用するためには自前で JSON 形式の住所データをサーバーに配置する必要がありました。そこで JSON 形式の住所データを準備しなくても良いように JSONP 形式の住所データも読み込めるように jquery.ajaxzip2 を少し拡張してみました。
外部の API を利用して住所を補完する
JSONP については、詳しくは検索すれば情報が沢山でてきますのでここでは割愛しますが、要するに JSONP を使えば外部のサービスが提供する郵便番号検索 API などから住所を補完できるようになります。
郵便番号から住所データを引ける JSONP 形式対応の API を提供しているサービスはいくつかあります。例えば
などです。jquery.ajaxzip2 では住所データをこれらの API から取得して住所を補完することができます。使い方は github の方に詳細を記載していますが、ここでも紹介したいと思います。
今回は グルーブテクノロジー株式会社の郵便番号検索API を利用してみます。
※利用する際は各サービスの利用規約などを良く読んで自己責任でお願いします。
パスを指定する
API のパスを設定します。郵便番号の部分は %ZIP3% のプレースホルダを利用して、コールバック関数の名前も指定しておきます。データ種別も jsonp を選択しておきます。
$.fn.zip2addr.defaultOptions.path = 'http://api.postalcode.jp/v1/zipsearch?zipcode=%ZIP3%&callback=zip2addr';
$.fn.zip2addr.defaultOptions.type = 'jsonp';
住所データの形式を理解する
API がどのような形式でデータを返してくるのかを確認します。このデータを元に 郵便番号をキー として 都道府県、市区町村、町域、番地の配列を値 とした、ハッシュを作ってそれを返すようにします。
グルーブテクノロジーの API の結果は以下のような形式です。
{"zipcode": {
"a1" :{
"zipcode":"3320000",
"prefecture":"埼玉県",
"city":"川口市",
"town":"以下に掲載がない場合",
...
},
"a2" :{
"zipcode":"3320001",
"prefecture":"埼玉県",
"city":"川口市",
"town":"青木",
...
},
...
}
かわって jquery.ajaxzip2 は以下のような形式でデータを受け取る必要があります。そのために受け取ったデータを変換してあげる必要があります。
{
"3320000": [ "埼玉県", "川口市", "以下に掲載がない場合", "" ],
"3320001": [ "埼玉県", "川口市", "青木", "" ],
...
}
※都道府県の部分は 都道府県名または都道府県 ID を指定してください。都道府県 ID の場合は JISコードに準拠した ID である必要があります。
※API からの結果が既に上記のような形式になっているようなサービス(または自分で開発した API など)は、以下のコールバック関数を指定する必要はありません。
ロード完了時のコールバック関数を指定する
先に見たような変換を行うために以下のような関数を住所データロード時のコールバックとして定義します。このコールバック関数の引数には、ロードされた JSON 形式の住所データが渡されます。
$.fn.zip2addr.defaultOptions.load = function(data) {
var result = {};
for (var key in data.zipcode) {
var z = data.zipcode[key];
result[z.zipcode] = [ z.prefecture, z.city, z.town, '' ];
}
return result;
};
このコールバック関数はデータの加工なども自由なので、たとえば 以下に掲載がない場合 などの文字を出したくない場合は、以下のようにも出来るでしょう。
$.fn.zip2addr.defaultOptions.load = function(data) {
var result = {};
for (var key in data.zipcode) {
var z = data.zipcode[key];
z.town = z.town == '以下に掲載がない場合' ? '' : z.town;
result[z.zipcode] = [ z.prefecture, z.city, z.town, '' ];
}
return result;
};
プラグインを呼び出す
あとは通常通りプラグインを呼び出せばグルーブテクノロジーの API を利用した住所補完ができます。
$('#zip').zip2addr();
解説ではデフォルトオプションを指定しましたが、呼び出し時に指定することも可能です。
$('#zip').zip2addr({
path: 'http://api.postalcode.jp/v1/zipsearch?zipcode=%ZIP3%&callback=callback',
type: 'jsonp',
load: function(data) {
...
}
});
他の API を利用する場合や、もしくは自分で用意した独自の JSON データなどを利用する場合でも、ロード時のコールバックで指定の形式に変換すれば、どんなものでも利用可能です。
