HTMLフォームの住所入力はとても面倒です。郵便番号を入力したら住所を自動入力してくれるフォームがあったらなぁ。
というわけで、その名もYubinBangoというライブラリを使って郵便番号から住所を自動入力する方法を解説します。JavaScript/TypeScriptで書かれたライブラリですが、難しい知識を必要とせずHTMLにclassを指定するだけで利用できます。
YubinBangoとは
YubinBangoとは、JavaScript/TypeScriptで書かれたHTMLフォームに住所を自動入力するためのライブラリです。
ひと昔前は住所の自動入力といえばajaxzip3がよく使われていました。このajaxzip3の開発者による後継ライブラリがYubinBangoです。
MITライセンスで提供されているので、商用利用も可能です。ありがたい。
動作サンプル
以下のフォームに郵便番号を入力してみてください。住所が自動的に入力されましたね。わーい。
- ハイフンがあってもなくても動作します。
- 半角文字、全角文字のどちらでも動作します。
- 郵便番号データは常に最新のものに更新されます。
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>
<label>郵便番号</label>
<input type="text" class="p-postal-code">
<label>住所</label>
<input type="text" class="p-region p-locality p-street-address p-extended-address">
</form>コードの解説
ライブラリの読み込み
１行目では、<script>タグでライブラリyubinbango.jsを読み込んでいます。記述する位置は<head></head>内でも</body>の直前でもどちらでもOKです。
h-adr クラスの指定
3行目、<form>タグにclass="h-adr"を指定します。この指定をすることで、このフォーム内でYubinBangoが使えるようになります。
国名を指定
4行目は、国名を指定しています。class="p-country-name"を指定した要素の値をJapanにします。この例では<span>要素を使用していますが、<input>要素などなんでもOKです。
<input type="hidden" class="p-country-name" value="Japan">- この情報はフォームに表示する必要がないので
style="display: none"やtype="hidden"で非表示にしましょう。 - 日本以外の国には対応していません。
- 日本をあらわす値は
Japan,JP,JPN,JAPANのいずれかを使うことができます。japanはダメでした。
郵便番号入力欄
7行目、郵便番号の入力欄にはclass="p-postal-code"を指定します。
もし、郵便番号の入力欄を「3桁 – 4桁」のように2つに分けているならば、それぞれの入力欄にclassを指定します。ただし、郵便番号の入力欄を2つに分けるのはとんでもない愚行です。なぜそんなことをするのか意味がわかりません。馬鹿じゃないの？（※個人の感想です）
住所入力欄
10行目、住所の入力欄にはclass="p-region p-locality p-street-address p-extended-address"を指定します。それぞれのclass名の意味は次のとおりで、指定したclassに応じて住所が自動入力されます。
| class名 | 意味 |
|---|---|
p-region | 都道府県名 |
p-locality | 市区町村 |
p-street-address | 町域 |
p-extended-address | 以降の住所（丁目・番地など） |
上記の例では、ひとつの入力欄にすべての住所を記入するので、class属性をまとめて指定しています。ちなみに、指定する順序が違っていても「都道府県名、市区町村、町域、以降の住所」の順で表示してくれます。
住所の入力欄を分ける場合は次のようになります。
<form class="h-adr">
<span class="p-country-name" style="display: none">Japan</span>
<label>郵便番号</label>
<input type="text" class="p-postal-code">
<label>都道府県</label>
<input type="text" class="p-region">
<label>市区町村</label>
<input type="text" class="p-locality">
<label>町域・番地</label>
<input type="text" class="p-street-address p-extended-address">
</form>無料で利用できるプログラミング学習サービスをお探しならば Code Lesson
はいかがでしょうか。プロのエンジニアが監修した学習ロードマップで効率的に学習、AIに質問、最後にクイズで理解度をチェックできます。
都道府県をセレクトボックスにする場合
都道府県の入力欄をセレクトボックスにする場合は次のようになります。valueは「東京都」のように書かなければなりません。「東京」だとうまく動作しません。
<form class="h-adr">
<span class="p-country-name" style="display: none">Japan</span>
<label>郵便番号</label>
<input type="text" class="p-postal-code">
<label>都道府県</label>
<select class="p-region">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
...
<option value="沖縄県">沖縄県</option>
</select>
<label>市区町村</label>
<input type="text" class="p-locality">
<label>町域・番地</label>
<input type="text" class="p-street-address p-extended-address">
</form>valueを都道府県番号にする場合は、p-regionの代わりにp-region-idを使います。都道府県番号が01や001では動作しませんでした。
<form class="h-adr">
<span class="p-country-name" style="display: none">Japan</span>
<label>郵便番号</label>
<input type="text" class="p-postal-code">
<label>都道府県</label>
<select class="p-region-id">
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
...
<option value="47">沖縄県</option>
</select>
<label>市区町村</label>
<input type="text" class="p-locality">
<label>町域・番地</label>
<input type="text" class="p-street-address p-extended-address">
</form>フォーム内に複数の住所がある場合
1つのフォーム内に複数の住所入力欄がある場合は次のようになります。
<form>
<fieldset class="h-adr">
<legend>自宅住所</legend>
<span class="p-country-name" style="display: none">Japan</span>
<label>郵便番号</label>
<input type="text" class="p-postal-code">
<label>住所</label>
<input type="text" class="p-region p-locality p-street-address p-extended-address">
</fieldset>
<fieldset class="h-adr">
<legend>勤務先住所</legend>
<span class="p-country-name" style="display: none">Japan</span>
<label>郵便番号</label>
<input type="text" class="p-postal-code">
<label>住所</label>
<input type="text" class="p-region p-locality p-street-address p-extended-address">
</fieldset>
</form><form>要素のclass="h-adr"を削除して、それぞれの住所欄を括る<fieldset>要素にclass="h-adr"を指定します。<fieldset>の代わりに<div>などを使ってもOKです。
番地の入力忘れ防止策
ほとんどの場合、郵便番号から自動入力してくれるのは都道府県、市区町村、町域までです。番地、建物名、部屋番号などはユーザに入力してもらわなければなりません。しかし、番地の入力忘れはとても多いのです。入力忘れの防止対策をしましょう。
注意書きをする
「番地を入力してください」と注意書きを表示しましょう。とても原始的な方法ですが、簡単に実装できます。
住所入力欄へ自動でフォーカスを移動する
郵便番号を入力し終わったときに、自動でカーソルを住所入力欄へ移動させましょう。以下のJavaScriptで実装することができます。
<script>
document
.querySelector('.p-postal-code')
.addEventListener('keyup', function (e) {
if (this.value.toString().match(/^\d{3}-?\d{4}$/)) {
document.querySelector('.p-street-address').focus();
}
});
</script>番地の入力欄を分ける
番地の入力欄を分けて必須項目にしましょう。これがいちばん確実な方法です。EFO的には入力欄を分けるのは避けたいところですが、都道府県、市区町村、町域は自動入力されるのでさほどユーザに負担はかからないでしょう。
さいごに
YubinBangoライブラリを使って、郵便番号から住所の自動入力をする方法を解説しました。
今どきのフォームでは、住所の自動入力は必須の機能です。ぜひ利用しましょう。
でわでわ
コメント