【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【圧倒的 低コスト】Oracle Cloud 構築・運用保守・監視サービス

【圧倒的 低コスト】Oracle Cloud 構築・運用保守・監視サービス

【WordPress専用】高速 クラウド / サーバー『WebSpeed』

【WordPress専用】高速 クラウド / サーバー『WebSpeed』

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【次世代】ゲーム専用データ分析エンジン『ThinkingEngine』

【次世代】ゲーム専用データ分析エンジン『ThinkingEngine』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【SNSアプリ開発】LINE カスタムアプリ開発サービス

【SNSアプリ開発】LINE カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio カスタムアプリ開発サービス

【音声アプリ開発】Twilio カスタムアプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【超簡単!】YubinBango.js を使った住所の自動入力

こんにちは!システム開発部の福井です!
今回は、YubinBango.js というjsライブラリを使用して「郵便番号を入力するだけで住所を自動入力してくれる」フォームを作ってみましたので、ご紹介させていただきます!

とても簡単に、そして爆速で実装できるので、ご興味ある方は是非一度お試しください!

※実装に必要な情報は、下記GitHub の README に記載してあるので、お急ぎの方はこちらをご覧ください。
https://github.com/yubinbango/yubinbango

YubinBango.js とは?

では、まず YubinBango.js とはどういったものかについて、簡単にご紹介させていただきます。

既に冒頭でほぼ紹介は終わっていますが、
① 郵便番号を入力すると
② 該当の住所を指定のinput フォームに自動で入力してくれる
非常に便利な JavaScriptのライブラリです。

使い方はとても簡単で、html にライブラリを読み込ませたら、あとは「郵便番号の入力フォーム」「住所の入力フォーム(住所表示箇所)」に指定のクラスを付与してあげるだけです。(簡単...!!)

実際に使ってみた!

というワケで、実際にサンプルのフォームを作ってみました。(装飾はBootstrapで行っています)

試しに書いたコードが以下となります!

    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
    <div class="col-12 px-2">
        <form action="" class="h-adr" method="post">
            <span class="p-country-name" style="display:none;">Japan</span>
            <div class="card card-info mt-4">
                <div class="card-header">
                    <h3 class="card-title">郵便番号 自動入力</h3>
                </div>
                <div class="form-horizontal">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="zip_code" class="col-1 col-form-label">郵便番号</label>
                            <div class="col-3">
                                <input type="text" name="zip_code" id="zip_code" placeholder="郵便番号を入力してください" class="p-postal-code form-control" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="prefecture_name" class="col-1 col-form-label">都道府県</label>
                            <div class="col-3">
                                <input type="text" id="prefecture_name" class="p-region form-control" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="city_name" class="col-1 col-form-label">市区町村</label>
                            <div class="col-3">
                                <input type="text" id="city_name" class="p-locality form-control" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="town_name" class="col-1 col-form-label">町域</label>
                            <div class="col-3">
                                <input type="text" id="town_name" class="p-street-address form-control" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="extended_address_name" class="col-1 col-form-label">その他住所</label>
                            <div class="col-3">
                                <input type="text" id="extended_address_name" class="p-extended-address form-control" value="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

実装のポイント

実装時のポイントは以下の4つとなります。

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

そして、作ったサンプルのフォームで、郵便番号を入力してみた結果が以下となります!

このような形で、郵便番号に応じた住所が自動で入力されます。
ちなみに、郵便番号はハイフンなしでも住所の自動入力は有効です。
また、サンプルでは、都道府県名や市区町村を分けていますが、都道府県名(p-region)、市区町村(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) を一つの要素のクラス属性に指定する事で一行の連結した文字列として入力させる事も可能です。

おまけ

非常に便利なYubinBango.js ですが、一体どのようなタイミングで動いているのか見てみました。

Chrome デベロッパーツールを確認すると、keyup のイベントリスナーが追加されている事が確認できます。

なので、「郵便番号を入力する」という操作で、自動入力処理が動いていたわけですね!

...という事は、
そうです!ここのイベントはkeyup 以外の発火条件に変更可能です!

冒頭でご紹介したGitHub にjsファイルがあるので、以下のリンクからJavaScriptのソースコードを利用し、jsファイルを作成します。
https://github.com/yubinbango/yubinbango/blob/gh-pages/yubinbango.js
※今回は新たに作成したjsファイルを読み込む必要があります。CDNでの読み込みを行っていないか確認をお願いいたします。

中に書かれているJavaScriptのコード全文は割愛しますが、下記コードで、keyup のイベントリスナーを追加している事が確認できます。

          r[r.length - 1].addEventListener("keyup", function (e) {
            t.prototype.u(n.v(e.target.parentNode))
          }, !1)

このイベントを変更する事で、任意のイベントに指定する事ができます!

今回は、例えば、「click」イベントに変更したとします。

          r[r.length - 1].addEventListener("click", function (e) {
            t.prototype.u(n.v(e.target.parentNode))
          }, !1)

デベロッパーツールを確認します。

無事、「click」イベントに変更されている事が確認できました!

もちろん、click 以外にも、keydown や focus など様々なイベントに変更する事が可能です!

YubinBango.js を使ってみた感想

本日は、YubinBango.js を使った住所の自動入力についてご紹介させていただきました!

住所の自動入力・自動表示については様々な手段があるため、実際の開発で使用できる場面は、かなり限られるかとは思いますが、社内用のツールなどある程度クローズな環境で使用するアプリ開発などには、もってこいではないかなと思います!
とにかく、非常に手軽で、すばやく実装できる点が魅力的なので、ぜひ一度お試しいただけると幸いです!

最後に

私が所属するシステム開発のサービスサイト「SEKARAKU Lab(セカラク ラボ)」を開設しました。
ビヨンドは、サーバーの設計・構築から運用までをワンストップでお任せいただけますので、サーバーサイド開発でお困りの方はお気軽にお問い合わせください。
SEKARAKU Lab:[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

最後までお付き合いいただきまして、ありがとうございました!

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
1
読み込み中...
1 票, 平均: 1.00 / 11
7,819
facebook twitter はてなブックマーク
【大阪 / 横浜】インフラエンジニア / サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア / サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author

福井 浩人

2020年6月にビヨンドに入社。システム開発部 (横浜オフィス) にて勤務。
業務ではPHPを中心に、ゲームAPIやWebシステムの開発、Shopifyプライベートアプリの開発を担当。
洋楽を主として音楽全般が好きで趣味でギターを弾いている。好きなTV番組は、「探偵!ナイトスクープ」「出没!アド街ック天国」。