クラスを指定するだけ！Webフォームで郵便番号から住所を自動入力してくれるスクリプト「YubinBango」

YubinBangoは、Webフォームで郵便番号を入れると住所が自動的に入力されるライブラリです。郵便事業株式会社(旧郵政省)が提供しているデータを利用して住所を取得しています。

YubinBangoの使い方

使い方は非常に簡単で、スクリプトを読み込んでフォームにクラスを追加するだけです。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<form class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>
  <input type="text" class="p-region p-locality p-street-address p-extended-address"><br>
</form>

formに「h-adr」というクラスを追加して、郵便番号には「p-postal-code」、住所には「p-region p-locality p-street-address p-extended-address」というクラスを追加します。

スクリプトはGitHubからダウンロードしてサーバーに設置してもOKです。

郵便番号と住所入力欄を分ける場合

郵便番号と住所入力欄を分けたい場合は、以下のように記述します。

<form class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="3" maxlength="3">
  <input type="text" class="p-postal-code" size="4" maxlength="4"><br>
  <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>

このようにそれぞれのフォームにクラスを追加してあげます。

YubinBangoが有効になる条件

YubinBangoが正常に機能するための条件は、以下の通りです。

• scriptタグでYubinBangoライブラリが読み込まれていること
• formタグのclass指定の中に h-adr が含まれていること
• formの中で、国名(p-country-name) が Japan に指定されていること
• 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
• 住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること

住所が自動入力されない場合は、上記の中で漏れがないか確認してみましょう。

あとがき

スクリプトを読み込んでクラスを追加するだけなので、使い方も簡単ですね。

フォームの入力は、なるべく負担を減らしてあげた方が良いですね。住所の入力という一番面倒な部分を簡略化してあげることで、お問い合わせ率が上昇すると予測できます。ぜひYubinBangoを導入してフォームの改善にお役立てください。