郵便番号から住所検索 | 松田ITサポート室

郵便番号から住所を検索する機能

よくお問い合わせフォームなどで、郵便番号を入力すると住所の候補が表示され、ユーザーの住所入力の手間を軽減し、ユーザビリティを高めているサイトを見かけますよね？

このような機能は、高度な技術を使っており、中小企業や個人の運営するサイトでは導入が難しいと思っていませんか？

実は、そんなに難しいことではありません。Webサービスと呼ばれるWeb上で提供されている機能を使えば比較的容易に実現することができます。

松田ITサポート室のお問い合わせフォームにも実装してあります。郵便番号を入力すると、住所欄に住所が入力されるのをご確認ください。

Web製作者の方などで、自身の提供するサイトの品質を高めたいなどとお感じでしたら、ご検討してみてはいかがでしょうか？

zipcoludの郵便番号検索API

郵便番号から住所を検索するWebサービスとして、zipcloud の郵便番号検索APIがあります。簡単に機能の説明をすると、調べたい郵便番号をリクエストに含んだ形のURLにアクセスをすることで、JSONと言われるJavascriptで取り扱うことのできる形式のデータが返ってくるというものです。

zipcloudの特徴

住所検索用にデータが加工されており、郵便番号から住所を正確に検索できる
Web サービスとして提供されているので、データの更新などを api の利用者が行わなくて良い

利用方法

zipcloudの利用にあたって

zipcolud の利用規約を必ずご確認ください。

利用方法

先にも説明したように、調べたい郵便番号をリクエストに含んだ形のURLにアクセスをすることで、JSONと言われるJavascriptで取り扱うことのできる形式のデータが返ってくるというものなので、HTMLの中にJavascripを記載することでこの機能を実現することができるようになります。

サンプルコード

JavascriptやAjax, JSONPがよく分からない方のために、サンプルコードを用意いたしました。

※本サンプルコードをコピー等してご利用いただくのは構いませんが、動作の保障や、利用によるトラブル・損害などに関しては、松田ITサポート室では責任を負いません。

郵便番号（id=”zipcode”）と住所（id=”address”）のテキストフィールドを作成
（以下は例です。利用する環境に合わせてhtmlは作成してください。）
```
<form >
	<p>
		<input id="zipcode" type="text" size="10" />
		
	</p>
	<p><input type="text" id="address" size="40" /></p>
</form>
　
```

「住所検索」ボタンを表示したい場所に以下のコードを貼り付けます。
（htmlの都合上、1.で指定したidを使えない場合は、6行目の’zipcode’、4行目と16行目の’address’を利用したいid名に変えます）

<script type="text/javascript">
function searchAddressByZipcloud() {
	// 検索中であることを表示
	document.getElementById('address').value = '検索中...';
	// 郵便番号の取得
	var zipcode = document.getElementById('zipcode').value;
	// zipcloudAPIの呼び出し
	var element = document.createElement('script');
	element.type = 'text/javascript';
	element.charset = 'utf-8';
	element.src = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode='+zipcode+'&callback=writeAddressByZipcloud';
	document.body.appendChild(element);
};
function writeAddressByZipcloud(response) {
	// 検索中の表示を消去
	var element = document.getElementById('address');
	element.value = '';
	// エラー発生時は、アラートを出して終了
	if(response.status != 200) {
		alert(response.message);
		return false;
	}
	// 検索結果がなかった場合も、アラートを出して終了
	if(!response.results) {
		alert('該当する住所が見つかりませんでした');
		return false;
	}
	// 住所文字列の作成
	var address = response.results[0].address1 + response.results[0].address2;
	// 結果が１つの場合は、町域名まで含める
	if(response.results.length == 1) {
		address += response.results[0].address3;
	}
	element.value = address;
};
document.write('<button type="button" class="zipcloud_search" onclick="searchAddressByZipcloud();">郵便番号から住所を検索</button>');
</script>