郵便番号からの自動入力は「ajaxzip3」から「YubinBango」への乗り換えを

2022.10.20　Posted by Coding_team

Webプログラミング

今までお問い合わせフォームなどで住所の入力欄を作る際、男は黙って「ajaxzip3」を使っていました。

ある日「市町村合併などがあるとどうなるのだろう？」という話になり、改めてajaxzip3のgithubを見たところ

「新規の設置にはyubinbangoライブラリの使用をオススメしています。」

という表記が。ajaxzip3の後継とのことです。

今回は「ajaxzip3」と比較しながら「YubinBango」ライブラリの設置方法について紹介します。

ちなみに、郵便番号の情報は日本郵便の情報を使用しているそうです。
市町村合併などがあった際、ajaxzip3は恐らく開発者の方による手動、YubinBangoは自動で情報の更新。かつ動作の高速化も行われているそうです。

ajaxzip3の設置方法

まずはJSを読み込み

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

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

郵便番号のinputタグのonKeyUp属性に「AjaxZip3.zip2addr(this,”,’都道府県のname値’,’住所のname値’);」を入れます。

郵便番号:
<input type="text" name="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','住所');"><br>
都道府県:
<input type="text" name="都道府県"><br>
住所:
<input type="text" name="住所">

郵便番号:

都道府県:

住所:

簡単ですね。

YubinBangoの設置方法

まずはJSを読み込み

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

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

このようにHTMLを作ります。

<form class="h-adr">
	<span class="p-country-name" style="display:none;">Japan</span>
	郵便番号:    
	<input type="text" class="p-postal-code"><br>
	都道府県:
	<input type="text" class="p-region"><br>
	住所:
	<input type="text" class="p-locality p-street-address p-extended-address">
</form>

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号:

都道府県:

住所:

</form>

市区町村も分ける場合、このように作ります。

<form class="h-adr">
	<span class="p-country-name" style="display:none;">Japan</span>
	郵便番号:    
	<input type="text" class="p-postal-code"><br>
	都道府県:
	<input type="text" class="p-region"><br>
	市区町村:
	<input type="text" class="p-locality"><br>
	以降の住所
	<input type="text" class="p-street-address p-extended-address"><br>
</form>

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号:

都道府県:

市区町村:

以降の住所

</form>

ポイント

formタグのクラスに “h-adr” を指定する。
form内の “p-country-name” クラスの要素に “Japan” を指定する。
郵便番号のinputタグのクラスに “p-postal-code” を指定する。
住所を入力するinputタグのクラスに、都道府県(p-region)、市区町村(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) を指定する。

これらの要件を満たすと動作します。
新規の設置は「YubinBango」を使用。
後からの設置など、HTMLをがっつり改変できないときは「ajaxzip3」という感じでしょうか。

関連記事こちらの記事も合わせてどうぞ。