【簡単】 郵便番号を自動入力(自動読み取り)させるJavaScriptを紹介
本記事では、GitHubで公開されていて有名な「YubinBango」というライブラリを使って、郵便番号の入力欄にユーザーが入力すると、該当する住所欄の自動入力をする実装について解説します。
本記事を読むことによって、郵便番号を自動入力させる実装の方法がわかるようになります。
本記事の内容
- 郵便番号を自動入力(自動読み取り)させる実装方法
- 具体的な郵便番号の自動入力コードの例
microformats2という標準仕様に合わせたclassを付与するだけで郵便番号検索の機能を実装できるので、簡単に実装ができます。
郵便番号を自動入力(自動読み取り)させる実装方法
大まかにやることは以下の４つで、ほぼclassを付与するだけなので簡単です。
- JavaScriptのライブラリを読み込ませる記述を書く
- formタグに指定されたclassを追加する
- 郵便番号エリア(inputタグなど)に指定されたclassを追加する
- 住所エリア(inputタグなど)に指定されたclassを追加する
郵便番号検索のライブラリは、ajaxzip3が有名ですが、同じ作者の新しい方のライブラリyubinbangoライブラリ(本記事で紹介のライブラリ)の使用を作者もおすすめしています。
詳細を解説していきます。
基本的な使い方
1. yubinbango.jsを読み込ませる記述を書きます。通常はbody閉じタグの直前でよいかと思います。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>2. formの中に「p-contry-name」(国名)が Japan で指定されている必要があります。
<!-- 例１-->
<span class="p-country-name" style="display:none;">Japan</span>
<!-- 例２-->
<input type="hidden" class="p-country-name" value="Japan">3. 郵便番号の入力欄のclassに「p-postal-code」が付与されている必要があります。
<!-- 例１ ※１つの入力欄に続けて入力(ハイフン有無の両方対応) -->
<input type="text" class="p-postal-code" size="8" maxlength="8">
<!-- 例２ ※２つの入力欄に分けて入力 -->
<input type="text" class="p-postal-code" size="3" maxlength="3">
<input type="text" class="p-postal-code" size="4" maxlength="4">4. 住所欄のclassに、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) の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" />YoubinBango公式のGitHubに詳細な記載があります。
具体的な郵便番号の自動入力コードの例
サンプルのGitHub
ソースコードについては、以下のGitHubにまとめて載せています。
https://github.com/it-web-life/zip_code_using_yubinbango以下のサンプルページで動作の確認が可能です。
https://it-web-life.github.io/zip_code_using_yubinbango/sample_01/
またそれぞれの項目にも簡単なサンプルを載せています。
郵便番号欄１つ、住所欄１つ
<!-- 郵便番号入力欄 -->
<input type="text" class="p-postal-code" size="8" maxlength="8">
<!-- 住所入力欄 -->
<input type="text" class="p-region p-locality p-street-address p-extended-address" />郵便番号欄２つ、住所欄１つ
<!-- 郵便番号入力欄 -->
<input type="text" class="p-postal-code" size="3" maxlength="3"> -
<input type="text" class="p-postal-code" size="4" maxlength="4">
<!-- 住所入力欄 -->
<input type="text" class="p-region p-locality p-street-address p-extended-address" />郵便番号欄２つ、住所欄２つ
<!-- 郵便番号入力欄 -->
<input type="text" class="p-postal-code" size="3" maxlength="3"> -
<input type="text" class="p-postal-code" size="4" maxlength="4">
<!-- 住所入力欄 -->
<input type="text" class="p-region" /> <!-- 都道府県 -->
<input type="text" class="p-locality p-street-address p-extended-address" /> <!-- それ以外の住所 -->郵便番号欄２つ、住所欄２つ、プルダウン機能つき
<!-- 郵便番号入力欄 -->
<input type="text" class="p-postal-code" size="3" maxlength="3"> -
<input type="text" class="p-postal-code" size="4" maxlength="4">
<!-- 住所入力欄 -->
<select class="p-region-id"> // 都道府県
<option value="">-- 選択してください --</option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
<option value="08">茨城県</option>
<option value="09">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</select>
<input type="text" class="p-locality p-street-address p-extended-address" /> <!-- それ以外の住所 -->「.p-region-id」を使う方法は公式のREADMEには特に記載はありませんが、yubinbango.tsのコードを解析すると使えることが分かるかと思います。
まとめ
郵便番号の自動入力をyubinbango.jsを使って実装する方法は以下のとおりです。
yubinbango.jsを読み込ませる
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>formタグにp-contry-nameのclassを付与- 郵便番号の入力欄に
p-postal-codeのclassを付与 - 住所欄にclassを付与
都道府県名(p-region)
市町村区(p-locality)
町域(p-street-address)
以降の住所(p-extended-address)
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています