Web blog WEBブログ

郵便番号から住所を自動表示する方法

2018.08.17

コーダーの兼山です。

サイトを訪問していただくお客様の、入力フォームへの入力負担を少しでも軽減するため、
郵便番号の入力で住所が自動表示できるようにしてみるのは如何でしょうか?

方法は、幾つかありますが、
今回は、私が個人的にお薦めの、入力フォームに郵便番号を入力することで住所を自動表示する方法をご紹介します。

「ajaxzip3.js」の特徴

ajaxzip3.js」は、下記の特徴があります。

・実装が簡単
・軽量で読み込みが早い
・常に最新版の郵便番号データを利用可能
・郵便番号や住所を分けるパターンにも対応
・jQueryが不要

手順① JSファイルを内で読み込む

タグ内に、下記のコードを入力します。
<script src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>

ファイルをダウンロードして指定する場合は、
こちら、ajaxzip3 からダウンロードします。

今回は、ダウンロードの不必要なパターンで説明をします。
(常に最新版の郵便番号データを利用可能なため。)

手順② フォーム内に入力フィールドを設置する

郵便番号を一つの入力フィールドにする

 
■ 郵便番号を一つの入力フィールド(7桁)で入力
■ 住所も一つの入力フィールドで表示
 

   

郵便番号を一つの入力フィールド(7桁)で入力し、住所は都道府県とそれ以降の二つの入力フィールドで表示する

 
■ 郵便番号を一つの入力フィールド(7桁)で入力
■ 住所は都道府県とそれ以降の二つの入力フィールドで表示
 

   

郵便番号を二つの入力フィールドにする

 
■ 郵便番号を二つの入力フィールド(3桁+4桁)で入力
■ 住所は一つの入力フィールドで表示
 

   

郵便番号を二つの入力フィールド(3桁+4桁)で入力し、
住所は都道府県とそれ以降の二つの入力フィールドで表示する

 
■ 郵便番号を二つの入力フィールド(3桁+4桁)で入力
■ 住所は都道府県とそれ以降の二つの入力フィールドで表示
 

まとめ

郵便番号から住所自動入力は本当に便利さと、
郵便番号を間違えると住所も間違って表示されるので入力ミスを防ぐメリットもあります。

ユーザビリティの向上に繋がりますね。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口