PostcodeJP APIで郵便番号から住所を検索する

郵便番号からフォームの住所補完をする実装をする機会があったので、PostcodeJP APIというサービスを試してみました。

アカウント登録

まずはアカウント登録を行います。
サイトにアクセスしてアカウント登録をクリックします。

メールアドレスを入力して、アカウントを作成をクリックします。

届いたメールに記載されたURLをクリックして、パスワードを設定します。

利用規約が表示されるので、問題なければ同意をクリックします。

これでアカウントの登録が完了しました。

APIキーの取得と設定

先ほどのダッシュボードからAPIキーを作成をクリックします。

APIキーを作成できました。
合わせてキーを制限しておきます。

APIキーの制限は、HTTPリファラーかIPアドレスで設定できます。
今回はHTTPリファラーを使用します。

リファラーを追加をクリックして、使用するドメインなどを設定します。
入力後、保存をクリックして完了です。

これでAPIキーの設定が完了しました。

サンプルコード

実際にサンプルをつくって試してみます。
郵便番号を入力するinputと、住所を出力するinputを用意します。

<input type="text" id="zip" placeholder="郵便番号">
<input type="text" id="address" placeholder="住所">

JavaScriptでpostcodeJPの設定を行います。

window.addEventListener('load', function() {
	// postcodeJPのオブジェクトを作成
	var autoComplement = new postcodejp.address.AutoComplementService('APIキーをここに入れる');
	// 郵便番号と住所補完のinputを設定
	autoComplement.setZipTextbox('zip');
	autoComplement.add(new postcodejp.address.StateTownStreetTextbox('address'));
	// 郵便番号のinputの変更を監視
	autoComplement.observe();
});

これで住所補完が実装できました。
住所補完のデモページ

住所出力部分を分けることもできます。

<input type="text" id="zip" placeholder="郵便番号">
<input type="text" id="prefectures" placeholder="都道府県">
<input type="text" id="town" placeholder="市区町村">
<input type="text" id="street" placeholder="町域">

window.addEventListener('load', function() {
	// postcodeJPのオブジェクトを作成
	var autoComplement = new postcodejp.address.AutoComplementService('APIキーをここに入れる');
	// 郵便番号のinputを設定
	autoComplement.setZipTextbox('zip');
	// 住所補完(都道府県)のinputを設定
	autoComplement.add(new postcodejp.address.StateTextbox('prefectures'));
	// 住所補完(市区町村)のinputを設定
	autoComplement.add(new postcodejp.address.TownTextbox('town'));
	// 住所補完(町域)のinputを設定
	autoComplement.add(new postcodejp.address.StreetTextbox('street'));
	// 郵便番号のinputの変更を監視
	autoComplement.observe();
});

住所の出力を都道府県と市区町村、町域に分割できました。
住所の出力を分けるデモページ

都道府県部分をセレクトボックスにしてみます。

<input type="text" id="zip" placeholder="郵便番号">
<select id="prefectures">
	<option value="">都道府県</option>
	<option value="01">北海道</option>
	<option value="02">青森県</option>

	～ 略 ～

	<option value="46">鹿児島県</option>
	<option value="47">沖縄県</option>
</select>
<input type="text" id="town" placeholder="市区町村">
<input type="text" id="street" placeholder="町域">

optionのvalueには都道府県コードを入れています。

window.addEventListener('load', function() {
	// postcodeJPのオブジェクトを作成
	var autoComplement = new postcodejp.address.AutoComplementService('APIキーをここに入れる');
	// 郵便番号のinputを設定
	autoComplement.setZipTextbox('zip');
	// 住所補完(都道府県)のselectを設定
	autoComplement.add(new postcodejp.address.StateSelectbox('prefectures'));
	// 住所補完(市区町村)のinputを設定
	autoComplement.add(new postcodejp.address.TownTextbox('town'));
	// 住所補完(町域)のinputを設定
	autoComplement.add(new postcodejp.address.StreetTextbox('street'));
	// 郵便番号のinputの変更を監視
	autoComplement.observe();
});

都道府県にセレクトボックスを使用するデモページ

サンプルで使用したメソッドは下記になります。
詳しくは公式のリファレンスをご確認ください。

フィールドオブジェクト

コールバック

コールバックのデモページ