YubinBango.jsライブラリとは？郵便番号を入力して、住所欄を自動で入力してもらおう！
はじめに
お問合せや資料請求の際には、フォームの個人情報入力欄で住所を入力する必要があります。
一から郵便番号を入力して住所を入力することは、当たり前のようで毎回毎回面倒なものです。
数字と漢字を切り替えたり、半角と全角入力を切り替えたり、ちょっとした煩わしさがついて回ります。
そんなとき、フォームで入力する際に役立つ便利なライブラリ(=便利な機能をまとめたもの)があります。
毎回の住所を入力する煩わしさを一瞬で取り払ってくれます。
それが「YubinBango.js」ライブラリです。
簡単に言うと、
”郵便番号を入力すると、入力した郵便番号に紐づく住所を自動で入力してくれる”
と言った機能を備えたライブラリです。
英語で表されていますが、’郵便番号’の日本語をローマ字にしただけなので、名前も簡単に覚えることができます。
Yubinbango.jsを使うことで、フォームにある住所入力が簡単にできるようになり、問い合わせや資料請求などの際のユーザビリティの向上を促してくれます。
住所を入力する作業に時間を割く必要がなくなることで、ユーザーにとっても使い心地の良いものとなることでしょう。
導入の仕方も簡単で、非常に使い勝手が良いので、開発者の役にも立つこと間違いありません。
YubinBango.jsとは？
郵便番号を入力するだけで、住所を検索・出力してくれる便利なJavaScriptライブラリです。
以前は住所自動入力と言えば「ajaxzip3」というライブラリが主流でしたが、Google Codeの閉鎖に伴い、「ajaxzip3」のサポートが終了されてしまいました。
そのため、これからの住所自動入力は「YubinBango.js」ライブラリを使用することが推奨されています。
「ajaxzip3」を使用しているものを「YubinBango.js」へ変更する必要はありませんが、これから導入を検討していくなら、「YubinBango.js」一択でいいかと思います。
使い方も至ってシンプルかつ簡単です。
YubinBango.jsのおすすめポイント
YubinBango.jsライブラリは、開発者とユーザー、その双方にとってメリットを享受してくれるものです。
お互いにとって素晴らしいメリットが明快かつシンプルな点が、このYubinBango.jsライブラリを奨める理由です。
開発者にとってのメリット
・簡単に導入することができる
・カスタマイズも容易
ユーザーにとってのメリット
・住所を書く手間が省ける
・全角入力したとしても、半角入力に補完してくれる(半角数字に変換してくれる)
つまり、導入しない理由がない、といっても過言ではありません。
YubinBango.jsの使い方
手順
Yubinbango.jsの使い方は至ってシンプル、至って簡単です。
基本的には、2ステップを踏むだけです。
ステップ1：scriptでYubinbango.jsライブラリを読み込む
ステップ2：YubinBango.jsの機能を使用したいタグ(inputタグなど)にclassを指定する
以上の工程を自身のコードにしてあげれば、設定完了です。
これで簡単に郵便番号から住所を自動入力してくれる便利な機能の恩恵を受けることができます。
inputタグにclassを付与してあげるだけで、郵便番号検索機能が有効になります。
ステップとしては上記の2点をイメージしてもらえれば良いです。
次に細かな設定を説明していきます。
YubinBango.jsライブラリの設定方法
<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>
YubinBango.jsライブラリを有効にする条件5つ
1. scriptタグでYubinBangoライブラリが読み込まれていること
<script src=“https://yubinbango.github..io/yubinbango/yubinbango.js” charset=“UTF-8”></script>
htmlのheadタグ内など、自身のコードのscriptタグを読み込む部分にYubinbangoライブラリを読み込ませます。
2. formタグのclass指定の中にh-adrが含まれていること
<form class=“h-adr”></form>
formタグを設置します。
Yubinbangoライブラリを使用したいinputタグなどの全体を囲む大きい箱として、まずformタグの設置が必要です。
3. 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”>
続いて、form直下に国名を指定します。spanタグかinputタグ、どちらでも機能します。基本的に国名はフォーム自体に表示させる必要がないので、表示を消す属性を与えています。
4. 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
例1 (1行で書く場合)：
<input type=“text” class=“p-postal-code” size=“8” max-length=“8”>
例2 (2行で書く場合)：
<input type=“text” class=“p-postal-code” size=“3” max-length=“3”><input type=“text” class=“p-postal-code” size=“4” max-length=“4”>
実際に郵便番号を入力する部分です。基本的に1行か2行で使用するのが一般的かと思います。
class属性の他に、size(=文字数)、max-length(=最大文字数)の2つの属性を与えてあげる必要があります。
5. 住所欄のclass指定の中に、都道府県名(p-region)、市区町村(p-locality)、町域(p-street-address)、以降の住所(p-extended-address)がそれぞれ含まれていること
<input class=“p-region p-locality p-street-address p-extended-address”>
郵便番号を入力したとき、上記のclassを指定しているinput欄に、入力した郵便番号に紐づく住所が自動入力されます。
住所欄は一行の場合もあれば、市区町村で別れている場合もあるかと思うので、必要に応じてclassを付け替えたりして対応していただければ問題ありません。
上記の5つの項目を全てが満たすことで、郵便番号を入力するだけで住所が自動入力されます。
YubinBango.js使用上の大事なポイント
まず最初(form直下)に、国名を指定
国名を指定してあげないと、住所検索機能が上手く機能しないので、使う使わないは別として「国名を指定する」手順を忘れないで下さい。
フォーム全体の親要素を指定し、class=“h-adr”をつける
これがYubinbango.jsを使用する際のいちばん大事な所です。
ここでclassを付与してあげることで、このform全体にYubinbango.jsを扱える環境が整います。
ハイフンはあってもなくても関係ない
郵便番号入力欄によって、sizeとmaxlengthの指定を配慮してあげる必要があります
7桁の場合：
<input size=“8” maxlength=“8”>
3桁と4桁で分ける場合：
<input size=“3” maxlength=“3”>-<input size=“4” maxlength=“4”>
となります。
注意すべきは、一行でハイフン有りで入力する場合です。
その場合は、ハイフン分の文字数を考えて一文字多く(8文字分)確保しておく必要があります。
・郵便番号は全角で入力しても、自動で半角に変更してくれる
例えばユーザーが郵便番号を全角で入力したとしても、YubinBango.js側で半角に変換してくれます。
この自動補完があるため、ユーザーは細かなことを気にせず郵便番号を入力することができます。
・住所入力欄に必要なタグとclassの把握
基本的にhtmlタグはinputタグを使用します。
class属性は下記の4種類を使用します。
都道府県：p-region
市区町村：p-locality
町域：p-street-address
以降の住所：p-extended-address
これらのclassは一つのinputタグに全部まとめて指定することができます。
また、項目別に分けて、複数のinputタグに対して、一つずつ指定することもできます。
YubinBango.jsの使用例
inputタグに対して、基本的にクラスを付与してあげれば、好きなようにカスタマイズして住所入力欄を作ることができます。
一行や複数行であっても問題ありません。
住所欄を一行で表示する場合(inputタグを一行で設置)
<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>
郵便番号や住所欄を複数行で表示する場合(inputタグを複数に分けて設置)
<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" /><br>
<input type="text" class="p-locality" /><br>
<input type="text" class="p-street-address" /><br>
<input type="text" class="p-extended-address" /><br>
</form>
住所欄を複数設定する場合（例：自宅住所・配送先住所など）
住所欄を複数設置する場合は、シンプルにclass「.h-adr」を2つ用意してあげます。
難しいことは必要ありません。
現住所と送付先住所が違う場合などに応用することができます。
<form>
<div 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" /><br>
<input type="text" class="p-locality" /><br>
<input type="text" class="p-street-address" /><br>
<input type="text" class="p-extended-address" /><br>
</div>
<div 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" /><br>
<input type="text" class="p-locality" /><br>
<input type="text" class="p-street-address" /><br>
<input type="text" class="p-extended-address" /><br>
</div>
</form>
まとめ
YubinBango.jsライブラリ、いかがでしょうか。
開発者にとっても、ユーザーにとっても、便利なライブラリであることがわかっていただけたかと思います。
導入手順一つとっても、ライブラリを読み込んで、クラスを付与するだけのシンプルなものなので、比較的簡単に自身のコードに組み込んでいけるかと思います。
入力フォームを作成する際には、是非Yubinbango.jsの使用をご検討ください。
これまでの煩わしさが解消されること、間違いありません。
Yubinbango.jsを導入して、普段の住所入力の手間を省いてみませんか？
