Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2018.04.15

ライブラリ【YubinBango】で郵便番号からの住所自動入力を実装する

Tags: ,,,,
最終更新日:Update

よくフォームなどで住所を入力する項目なんかで、郵便番号を入力すると自動で住所が入力される場合があるかと思います。javascriptのライブラリやプラグインを使うことで実現できるのですが、今回は「YubinBango」というjavascriptのライブラリを使って実装してみたいと思います。

 

住所自動入力のjavascriptライブラリ【YubinBango】

YubinBangoはその名の通り、郵便番号から住所が自動入力できるようになるjavascriptのライブラリです。同じ機能では、他にもいろんなライブラリやプラグインがありますが、class名を指定するだけの作業で簡単に実装できて、なおかつ動きも軽快なのがポイントです。

【YubinBango】
https://github.com/yubinbango/yubinbango

 

詳しくは上記の公式ページにも記載されている通りなのですが、こちらでも実装方法をまとめていきたいと思います。まずHTMLは通常の一般的なフォーム形式で用意します。

 

【HTML】※一部抜粋

<form class="h-adr">
  <!-- 国別指定 -->
  <input type="hidden" class="p-country-name" value="Japan">
  <!-- 郵便番号 -->
  <input type="text" class="p-postal-code" id="zipcode" name="zipcode" value="">
  <!-- 住所 -->
  <input type="text" class="p-region p-locality p-street-address p-extended-address" id="address" name="address" value="">
</form>
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js">
</script>

 

前提条件として、githubのリポジトリにあるライブラリを読み込みます。そして、form要素には「h-adr」のclassを指定します。フォームの項目にまずは、input type=”hidden”を用意して、classに「p-country-name」valueに「Japan」を指定します。

 

そして、郵便番号の入力にあたる要素には「p-postal-code」のclassを指定します。次に、住所入力にあたる要素には「p-region p-locality p-street-address p-extended-address」の4つのclassをまとめて指定します。これは都道府県、市区町村、町名といった住所の詳細情報になり、この例ではまとめていますが分けて入力させることも可能です。

 

なんとたったこれだけで郵便番号からの住所自動入力が実装できます!実際に弊社コンタクトフォームにも使っているのですが、動作も軽くかなりオススメです。

 

あとは郵便番号入力のバリデーションとしてjQueryを使って下記の通り実装するのもいいのではないでしょうか。こちらについては過去記事「jQueryで作成するフォームバリデーション」でも似たケースをまとめております。

 

【javascript】

$("#zipcode").on('blur',function(){
  if(!$(this).val().match(/^d{3}[-]d{4}$|^d{7}$/) && !$(this).val() == ''){
    $(this).addClass('errored');
    $(this).siblings('.errored-msg').text('郵便番号を正しい形式で入力してください');
  } else {
    $(this).removeClass('errored');
    $(this).siblings('.errored-msg').text('');
  }
});

 

正規表現で郵便番号の形式を、半角数字7桁とハイフンを含む半角数字7桁で指定しています。フォームからカーソルが外れたタイミングで動くようになっています。

 


 

いかがでしょうか、コーポレートサイトのコンタクトフォームだけでなく、アンケートサイトに使うフォームにもピッタリです。入力を自動化させることで「EFO」(入力フォーム最適化)としてユーザービリティの向上も期待できますね!

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?