郵便番号と住所を相互変換するサービス「ZIPCODA」を使って住所登録フォームの動作を改善しました

2021/02/28 · · 投稿者 Takashi Okutsu

TeamPage の CRM プラグインや請負業務管理プラグインには、取引先や担当者などのマスターデータの登録フォームがあり、そのフォームで「郵便番号」「都道府県」「市区」「住所」などを入力・登録できるようになっています。

これまで、これらの登録フォームでは郵便番号から住所への自動変換・自動入力は利用できましたが、この度、逆の、住所から郵便番号への自動変換・自動入力も利用できるように改善しました。

請負業務管理プラグインの「業者」登録フォーム

これまでの「郵便番号 → 住所」変換は、「AjaxZip3」という有名な JavaScript ライブラリを使って実現していました。フォームのテキスト入力欄に名前を付け、数行の JavaScript コードを書くだけで実装できます。

github.com/ajaxzi…

今は「AjaxZip3」をより洗練した「yubinbango」という後継ライブラリがリリースされ、利用できるようになっています。

github.com/yubinb…

Webサービスのユーザー登録フォームなどでは、郵便番号を入力すると自動的に該当する住所が入力されることは当たり前になりました。

「郵便番号から住所が自動入力されれば十分だろう、逆の住所から郵便番号を入力するニーズはないだろう」と考えていたのですが、先日、あるお客様から「住所を入力したら郵便番号が自動入力されるようになっていると嬉しい」というご要望をいただきました。「住所はわかっているが、郵便番号はわからない」というケースがしばしばあるのだそうです。

たしかに、私も年賀状を書くときに送付先の郵便番号がわからず、Googleで検索して調べた経験が何度もあります。住所を入力して郵便番号を補完してくれたら手間が省けて嬉しいですよね。

残念ながら「yubinbango」も「郵便番号 → 住所」の変換しかできません。そこで、他の郵便番号関連のライブラリを探してみたところ、「ZIPCODA」というサービスを見つけました。

zipcoda.net/

API も用意されており、ZIPCODA の URL に郵便番号または住所をパラメーターとして指定してリクエストすると変換結果を返してくれる仕組みになっています。

ユーザーが住所を入力したら JavaScript を動作させてその入力された内容を取得し、取得した内容を ZIPCODA の API に渡し、郵便番号が正常に返ってきたらフォームの郵便番号欄に反映させればOKですね。

HTMLサンプル

<h3>ZIPCODA Example</h3>
<form id="fm-address">
  <div class="row section-address">
    <div class="col">
      <input id="prefecture" class="form-control" type="text" placeholder="都道府県" />
    </div>
    <div class="col">
      <input id="city" class="form-control" type="text" placeholder="市区" />
    </div>
    <div class="col">
      <input id="address" class="form-control" type="text" placeholder="住所" />
    </div>
    <div class="col">
      <input id="other" class="form-control" type="text" placeholder="建物等" />
    </div>
  </div>
  <div class="row mt-2 mb-2">
    <div class="col">
    <a id="to-zip" class="btn btn-primary" href="javascript:void(0);">住所から郵便番号へ</a>
    <a class="btn btn-secondary" id="to-addr" href="javascript:void(0);">郵便番号から住所へ</a>
    </div>
  </div>
  <div class="row section-zipcode">
    <div class="col">
      <input id="zip" class="form-control" type="text" placeholder="郵便番号" />
    </div>
  </div>
</form>

JavaScriptサンプル (jQuery使用)

$(document).ready(function () {
  $("#to-zip").on("click", function () {
    const pref = $("input#prefecture").val();
    const city = $("input#city").val();
    const addr = $("input#address").val();

    const address = pref + city + addr;

    $.ajax({
      url: "https://zipcoda.net/api",
      dataType: "jsonp",
      data: {
        address: address
      }
    }).then((data) => {
      const zip = data.items[0].zipcode;
      $("input#zip").val(zip);
    });
  });

  $("#to-addr").on("click", function () {

    const zip = $("input#zip").val();

    $.ajax({
      url: "https://zipcoda.net/api",
      dataType: "jsonp",
      data: {
        zipcode: zip
      }
    }).then((data) => {
      const pref = data.items[0].components[0];
      const city = data.items[0].components[1];
      const addr = data.items[0].components[2];
      $("input#prefecture").val(pref);
      $("input#city").val(city);
      $("input#address").val(addr);
    });

  });
});

CodePen --> codepen.io/bunatr…

改善前は、郵便番号の数字が入力されるたびに AjaxZip3 にリクエストして該当する住所を拾ってくる仕組みになっていました。しかし、これではリクエストが頻繁に発生し、リクエスト先のサーバーに負荷をかけることになるかもしれません。

そこで、今回の改善で「入力欄のフォーカスが失われたらリクエストする」という条件に変更しました。これでリクエスト頻度をぐっと抑えられるはずです。

今回の改善は、ご要望いただいたお客様にたいへん喜んでいただけました。今後も製品サービスの品質改善に努めてまいります。

Page Top