YubinBangoで郵便番号から住所を補完する

YubinBangoで郵便番号から住所を補完する

こんにちは!Webエンジニアのtrrn(呼称:てらりん)です。

やっと梅雨明けしましたね〜
エアコンがなくても良い風が入ってきて過ごしやすくなりました!
といってもこれから本格的な夏となるはずなので熱中症には気をつけましょう。

ということで本題に入ります。前回書いたGit LFSについてさらに詳しく書いていこうと思いましたが、まったく調べられていないため、今回は新ajaxzipことYubinBangoを紹介します。Git LFSはまたそのうち。

YubinBangoとは?

これまでにajaxzip3を使って郵便番号から住所を補完する機能を実装したことがありましたが、ページ内にまったく同じフォームが複数ある場合、name属性値にそれぞれ異なる値を記述しなければいけないという問題がありました。
それをこちらのYubinBangoを使用することで解決できます。

実装サンプル

See the Pen YubinBangoTest by trrn1210 (@trrn1210) on CodePen.

実装方法

実装は驚くほど超簡単です。

まず、下記のソースを読み込みます。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

次に住所をグルーピングするために、h-adrクラスを付与します。
サンプルではform要素に対して付与していますが、要素に依存しないように実装されているようなので、例えばdiv要素でも動作しました。

そして、<input type="hidden" class="p-country-name" value="Japan">h-adrクラスを付与した要素内に記述します。実際、記述場所はどこでも良さそうですが、1つのフォーム内に複数の住所をおくことも有り得るため、都道府県の上に置いておくといいのではないでしょうか。

最後に、p-region, p-locality, p-street-address, p-extended-addressをそれぞれのテキストボックスのclass属性値として記述します。これらの値を設定したテキストボックスに住所が展開されるため、テキストボックスが1つの場合は4つすべてのクラスを付与することで実装できます。

以上、JavaScriptのコードを一切書くことなく実装が完了しましたね!スマート!
開発者の方々に感謝です。


Previous: スマホサイトのサイズ指定はvwを使う Next: HTMLメール テンプレート内でPHPの変数を使うには?

© 2017 ALL CONNECT Inc. All Rights Reserved.