千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.08.12

【初心者向け】ライブラリ使用でかんたんに! コンタクトフォームに住所自動入力!

橋本大地

JavaScript

みなさんこんにちは。
千葉県船橋市でホームページ制作を行っております、ノベルティのエンジニア橋本です!

今回はユーザビリティを機能で解決できる【住所自動入力】の仕組みについてご紹介いたします。
住所自動入力は、郵便番号欄に数字を入れると、自動的に以後の住所が入る機能です。

駆け出しのころは目の前のソースに集中してしまって、ホームページ制作に必要な要点がなかなか見えてこなかったりしますが、このように機能で解決できる問題は率先して取り入れていきたいですね!

ホームページ制作において知っているのと知っていないのでは、かなりユーザーに対する配慮感が変わってきます!

少しハードルが高く感じてしまうかもしれませんが、今回は初心者向けにライブラリを用いて分かりやすくご紹介させていただきます。

目次

住所自動入力とは

用途はさまざまありますが、ホームページ制作で多いのはお問い合わせフォームに対する実装かと思います。

せっかくエンドユーザーがお問い合わせをしてみよう! と思い立ってくれたのに、入力が面倒だと離脱してしまう可能性がありますよね。

そこで郵便番号のフォームを入力してもらうと、それ以後の住所(番地をのぞく)が自動的に入力されるといった機能です。

例えば、2730005と郵便番号のフォームに入力すると、指定のテキストボックスに【千葉県船橋市本町】と出力されます。

自動入力のタイプにはいろいろありますが、千葉県船橋市本町といった市町村までの値が自動で出力されるタイプがうれしいですね!

※設定の仕方によっては、郵便番号の入力で千葉県船橋市までを出力させることも可能です。

ライブラリ【YubinBango】を利用

今回はこちらのjavascriptライブラリを用いた実装方法をご紹介いたします。

jQueryをはじめとして、ホームページ制作には役立つライブラリがたくさんありますよね。
こちらはその中で表題の住所自動入力を実現してくれるライブラリです。

詳しくは下記URLより、開発者様の記述されたREADMEをご覧ください。
https://github.com/yubinbango/yubinbango

実装方法

実装方法は簡単です!
まずは本ライブラリを読み込みましょう。

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

例えば上記のようなソースを記述していただければOKです。

先述の通り、ホームページ制作ではお問い合わせフォームでの実装が多いので、例としてformを作成していきます。

<form class="h-adr">
    <!-- フォームの内容を記述 -->
</form>

ここでポイントなのが、formのクラスにh-adrをあてることです

こちらが、本ライブラリの起動条件の一つになります。

今回は日本を想定しての実装なので、次にformタグ内へ下記の記述を行います。

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

これで日本に対する設定となりました。

次に、郵便番号を入力してもらうクラスにp-postal-codeを、住所欄にp-region p-locality p-street-address p-extended-addressをそれぞれあてていきます。
下記のような形ですね。

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

まとめると…

①formタグのクラス に “h-adr” を指定する。
② form内の “p-country-name”クラスの要素に “Japan” を指定する。
③ 郵便番号を入力するフォームのクラスに “p-postal-code” を指定する。
④ 住所を表示させる要素のクラスに、都道府県名(p-region)、市区町村(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) を指定する。

これで郵便番号の欄に2730005(郵便番号)を入力すると、千葉県船橋市本町(住所)が返ってくる実装が完成しました。

なお、値が出力される先に設定したクラスの詳細は、下記の通りです。

  • 都道府県名(p-region)
  • 市区町村(p-locality)
  • 町域(p-street-address)
  • 以降の住所(p-extended-address)

上記のクラスをそれぞれのinputに振り分けていただいてもOKです。下記のような形ですね。

都道府県:<input type="text" class="p-region" />
市区町村:<input type="text" class="p-locality" />
町域:<input type="text" class="p-street-address" />
以降の住所:<input type="text" class="p-extended-address" />

このような実装にすると、【千葉県】【船橋市 】【本町】がそれぞれのテキストボックスに入力されます!

試してみましょう!

これで実装はOKです!

ここからはきちんとテストです。

入力例:「274-0054」
これで船橋市の楽しいスポット、ふなばしアンデルセン公園の住所【千葉県船橋市金堀町525】が出たり…

入力例:「273-0012」
これで船橋市の巨大ショッピングモールTOKYO-BAY LaLaportの住所【千葉県船橋市浜町】が出たりします。

上記のようにテストを行っていただいて、問題なく出力されていればOKです。

※テストで再認識ですが、船橋市はいいところたくさんですね。

いろいろなお仕事でそうだと思いますが、ホームページ制作の現場でも、テストはとっても重要! 念入りに行うようにしましょう!

注意点!

本文中にも書きましたが、住所の自動入力は番地以降は出せません。

住所が自動入力されたとユーザーに思わせる体験は重要ですが、上記実装だとユーザーに補足してもらわないといけないですよね。

分かりやすく番地がないですよといった案内を出す、番地欄を別に設けるなどして、漏れなく情報収集することもホームページ制作で大切なポイントですね!

まとめ

今回はホームページ制作の現場で知っておきたい、ユーザビリティ向上術のご紹介でした!

しかしながら住所自動入力は、あくまでもユーザーを助けるための補助。

住所にはさまざまな特性があり、一次的な合併や統合、郵便番号と以後住所の複数化などで値が取得できないこともあります。

その点は注意していただいて、あくまでも補助という形で認識いただければと思います。

それではみなさん充実のホームページ制作ライフを! ではまた!

橋本大地

プロジェクトリーダー

バックエンドを経てフロントエンドの世界へ
持ち前のポジティブさと細やかさでノベルティを救う☆
元気の源は愛妻弁当!
自家用マシンでMacbookを購入することを夢見ています。
HOME | コラム | 【初心者向け】ライブラリ使用でかんたんに! コンタクトフォームに住所自動入力!
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪