Web技術系中心に割と何でも更新中

郵便番号から住所を自動入力させる方法【YubinBango】

Programming Web

Web制作者

Web制作者
「Webページ上で郵便番号から住所を自動入力させる機能を実装したいけど、なんだか難しそう。簡単な方法を知りたい。」

こういった悩みにお答えします。

本記事の内容

  • ライブラリYubinbangoを利用した、郵便番号から住所を自動入力させる方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年、Web制作歴は7年ほどになります。
現在はmineblogを一人で運営しています。

Web制作をしている中で、Webサービスの利用申込みのなどの入力画面で住所を入力させる機会があります。

よく見かけるのが、郵便番号を入力すると住所が自動入力される機能です。郵便番号を入力するだけで住所が自動的に入力されたほうが、手間も減ってユーザービリティ的に良いのは間違いありません。

この記事では郵便番号から住所(都道府県・市区町村)を自動入力できる便利なJavaScriptライブラリYubinBangoの使い方をご紹介します。

YubinBangoの導入手順

YubinBangoの導入手順についてご紹介します。

「郵便番号の入力欄が一つの場合と二つの場合」×「住所の入力欄が一つの場合と二つの場合」の計4パターンを実装します(下記パターンリスト参照)。

入力パターン(4種類)

  • 郵便番号を一つの欄、住所を一つの欄に自動入力
  • 郵便番号を一つの欄、住所を複数の欄に自動入力
  • 郵便番号を二つの欄、住所を一つの欄に自動入力
  • 郵便番号を二つの欄、住所を複数の欄に自動入力

【参考】

GitHub – yubinbango/yubinbango

ライブラリを読み込み

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

上記コードを<head>タグ内に記述します。これだけライブラリを使用できるようになります。

HTMLのルール

HTMLは住所に関するマイクロフォーマットに沿った形で記述する必要があります。

HTMLのルール

  • <form>タグのclass指定の中に「h-adr」を含む
  • <form>内に<input type="hidden" class="p-country-name" value="Japan">を記述する
  • 郵便番号入力欄のclass指定の中に「p-postal-code」を含む
  • 住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) をそれぞれ含む

このルールに基づいて記述するだけで住所の自動入力を実装できます。
すごいですね。

郵便番号を一つの欄、住所を一つの欄

動作イメージ

郵便番号を一つの欄、住所を一つの欄

HTML

<form class="h-adr">
	〒<input type="text" class="p-postal-code" size="8" maxlength="8">
	<input type="hidden" class="p-country-name" value="Japan">
	<input type="text" class="p-region p-locality p-street-address p-extended-address" />
</form>

郵便番号は、入力欄が一つの場合はハイフンありでもなしでもどちらでもOKです。

住所欄を一つにする場合、p-region、p-locality、p-street-address、p-extended-addressの各クラスを一つのinputにまとめます。

ちなみに、都道府県・市区町村までで十分だという場合は、p-street-address、p-extended-addressをクラスに含めないようにします。

郵便番号を一つの欄、住所を複数の欄

動作イメージ

郵便番号を一つの欄、住所を複数の欄

HTML

<form class="h-adr">
	〒<input type="text" class="p-postal-code" size="8" maxlength="8">
	<input type="hidden" class="p-country-name" value="Japan">
	<input type="text" class="p-region" readonly /><br>
	<input type="text" class="p-locality" readonly /><br>
	<input type="text" class="p-street-address" /><br>
	<input type="text" class="p-extended-address" />
</form>

住所の入力欄を細かく分けています。

郵便番号を二つの欄、住所を一つの欄

動作イメージ

郵便番号を二つの欄、住所を一つの欄

HTML

<form class="h-adr">
	〒<input type="text" class="p-postal-code" size="3" maxlength="3"><input type="text" class="p-postal-code" size="4" maxlength="4">
	<input type="hidden" class="p-country-name" value="Japan">
	<input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
</form>

郵便番号の入力欄を2つにして、どちらの<input>タグにもp-postal-codeを含めます。

郵便番号を二つの欄、住所を複数の欄

動作イメージ

郵便番号を二つの欄、住所を複数の欄

HTML

<form class="h-adr">
	〒<input type="text" class="p-postal-code" size="3" maxlength="3"><input type="text" class="p-postal-code" size="4" maxlength="4">
	<input type="hidden" class="p-country-name" value="Japan">
	<input type="text" class="p-region" readonly /><br>
	<input type="text" class="p-locality" readonly /><br>
	<input type="text" class="p-street-address" /><br>
	<input type="text" class="p-extended-address" />
</form>
CSSは、各自最適なものを記述してください。

まとめ

jsを読み込んで、HTMLをコピペするだけで住所入力欄のユーザービリティを向上させることができます。しかも軽量なので、動作もかなり早いです。

もし住所の入力欄を設置しようとしているなら、数分で導入できるのでぜひ使ってみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果