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

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

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

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

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

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

住所自動入力とは

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

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

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

例えば、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>

まとめると...

1. formタグのクラス に "h-adr" を指定する。
2. form内の "p-country-name"クラスの要素に "Japan" を指定する。
3. 郵便番号を入力するフォームのクラスに "p-postal-code" を指定する。
4. 住所を表示させる要素のクラスに、都道府県名(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です。

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

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

注意点！

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

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

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

まとめ

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

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

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

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

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