0%

Programmingプログラミングナレッジ

Posted:2018.04.15

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

よくフォームなどで住所を入力する項目なんかで、郵便番号を入力すると自動で住所が入力される場合があるかと思います。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」(入力フォーム最適化)としてユーザービリティの向上も期待できますね!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】