個人的な傾向として、比較的簡単な実装で利用できるものを中心に扱いがちなのですが、今回は（ちょっとだけ）手間よりも利便性を取ったライブラリをご紹介します。
郵便番号から住所を自動入力するライブラリとして有名なのは「ajaxzip3」でしょう。
その正式な後継ライブラリが、今回ご紹介する「YubinBango」です。
超！シンプルに実装可能な「YubinBango」
実装については非常に簡単で、解説記事としてはいかがなものか…というレベルで完了します。
ということで、どれくらい簡単に実装できるのか公式の有効化手順を引用してみました。
scriptタグでYubinBangoライブラリが読み込まれていること
例: <script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>formタグのclass指定の中に h-adr が含まれていること
例: <form class=”h-adr”>form中で、国名(p-country-name) が Japan に指定されていること
例1: <span class=”p-country-name” style=”display:none;”>Japan</span>
例2: <input type=”hidden” class=”p-country-name” value=”Japan”>郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
例1: 〒<input type=”text” class=”p-postal-code” size=”8″ maxlength=”8″>
例2: 〒<input type=”text” class=”p-postal-code” size=”3″ maxlength=”3″><input type=”text” class=”p-postal-code” size=”4″ maxlength=”4″>住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること
たったの5ステップ！
ということで、簡単に補足説明をしていきます。
解説というか補足
ライブラリを読み込む
github上で公開されていますので、さっくりとメインのスクリプトを読み込みます。
ええ、下記のスクリプトタグをコピペで完了です。
（補足とは）
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js"></script>「h-adr」classを仕込む
公式の手順には「 formタグのclass指定の中に h-adr が含まれていること 」となっていますが、formタグでなくても構いません。
div等でも問題なく動作します。
「p-countory-name」classを仕込む
class「h-adr」を指定したタグ内に、class「p-countory-name」を指定した非表示要素を仕込みます。
公式の例から適した方をコピペしましょう。
非表示にしなくても動作しますので、一応補足しておきます。
各classを仕込む
すでに用意されているであろう入力フォームに、対応するclassを指定していきます。
以下の表にまとめましたので、該当のclassを指定してあげてください。
| class | 摘要 |
| p-postal-code | 郵便番号 |
| p-region | 都道府県 |
| p-region-id | 都道府県（ID） |
| p-locality | 市区町村 |
| p-street-address | 町域 |
| p-extended-address | それ以降の住所 |
各クラス設定時の注意事項
郵便番号を入力するテキストボックスに「p-postal-code」を仕込みます。
最近では少なくなってきましたが、郵便番号を3桁と4桁に分ける場合、双方に「p-postal-code」を指定する必要があります。
フィールドに各classを指定する
反映したいclassを同一のフィールドに複数指定すれば完了です。
例えば、都道府県から全てを同一のフィールドに反映したい場合は、以下のように指定します。
<input type="text" class="p-region p-locality p-street-address p-extended-address"/> 都道府県のみを別フィールドとする場合は、以下のように指定します。
<input type="text" class="p-region"/>
<input type="text" class="p-locality p-street-address p-extended-address"/> また、上記表に含まれているように、都道府県をIDで指定することが可能です。
通常の「北海道=1、青森=2 ～ 鹿児島=46、沖縄=47」というIDが返ってきます。
このIDを利用して、頻繁に利用される「都道府県のドロップダウン」も自動で選択することが可能です。
以下のように指定します。
<select class="p-region-id">
<option value="">-</option>
<option value="1">北海道</option>
…
……
<option value="47">沖縄県</option>
</select>「p-extended-address」について
あまり利用しないかと思われがちですが、一部の特殊な郵便番号については必須となりますので、ちゃんと設定しておきましょう。
例を挙げると以下のような場合に利用されます。
- 大口事業所個別番号
- 北海道、愛知県、岐阜県 、京都府の一部
大口事業所個別番号は、その名のとおり、郵便物の多い事業所に対して割り当てされる郵便番号です。
こちらの場合には番地まで全て入力されます。
北海道、愛知県、岐阜県、京都府については、一部の地域で町名以下に番号が割り振られている場合などがあります。
設定しておいて邪魔になるものでもありませんので、抜けのないように設定しておきましょう。
ということで、かなり簡単に実装できて、柔軟性もある「YubinBango」のご紹介でした。