JavaScript ›

郵便番号を入力して住所を自動入力してくれるライブラリ「ajaxzip3」と「YubinBango」

たまに申込フォームやお問い合わせフォームなんかで、郵便番号を入力すると住所が自動で入力されるやつ。自分も4〜5年前から ajaxzip3 というライブラリを使っていたんですが、Google Code の閉鎖に伴って死んだままになってるサイトがありました。

普段からそういうの自分に関係ない！と思ってるんでしばらくの間ほったらかしにしてて気づきませんでした。もぅほんと、こちらの方と同じです。

Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。 | motooLogue

とりあえず、前の Google Code から引っ張ったままで死んでいる下のような記述 

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

は GitHub に代えてやるだけでOKです。 

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

ajaxzip3 · GitHub

実際には、郵便番号や住所を入力するようなフォームはたいていバリデーションにかけるので、必要なページだけで読み込むフォーム用の外部スクリプトを用意しています。ajaxzip3 はそのコードの中で非同期で読み込んでいただけなので1ヵ所なおすだけで対応できました。読み込みに失敗してもスルー、な書き方だったので他の機能は平穏無事、そのせいもあって中々気づきませんでした。 

$(document).ready(function () {

  var $form = $('form#form');

  // 郵便番号と住所の入力項目があれば ajaxzip3 を読み込む
  (function ($zip, $address) {
    if (!$zip.size() || !$address.size()) return;
    // 読み込み成功時だけ処理する
    $.getScript('https://ajaxzip3.github.io/ajaxzip3.js', function(){
      $zip.keyup(function () {
        AjaxZip3.zip2addr(this, '', 'address', 'address');
      });
    });
  })($form.find('[name="zip"]'), $form.find('[name="address"]'));
});

YubinBango ライブラリ

当方では、上のように死んだ ajaxzip3 の対応をしたサイトは2つだけでした。運営中のサイトのソース全てを検索してこんだけしかなかったんで「アレ？」と思ってよく考えたらこのライブラリ、YubinBango と名前を変えて新しくなっているのでした。つまり切り替えをしていないサイトが2件あっただけ。もぅそんなことすっかり忘れてしまってますた。YubinBango というワードを見ても一瞬「？」ってなったのは、きっともう晩年だからです。

GitHub - yubinbango_yubinbango

新しい郵便番号検索ライブラリ YubinBangoは、コードを読み込んで microformats2 の仕様に合わせたclassを指定するだけです。比較・計測したわけではありませんが以前の ajaxzip3 に比べても軽快に感じます。 

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<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 class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>

  〒<input type="text" class="p-postal-code" size="3" maxlength="3">
  <input type="text" class="p-postal-code" size="4" maxlength="4"><br>

  <input type="text" class="p-region" readonly /><br>
  <input type="text" class="p-locality" readonly /><br>
  <input type="text" class="p-street-address" /><br>
  <input type="text" class="p-extended-address" />
</form>

読み込んだあとに関数を呼び出すわけではないので、ajaxzip3 と同じように非同期で読み込んでもうまく動作しませんでした。とりあえず当方では<body>の最下部にそのまま配置するようにしてます。 

<body>
〜

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js"></script>
</body>

HTMLに直書きしてまた知らん間に死んでたら困るので、PHPとかCGIとかSSIのテンプレートに書いています。

以上、物忘れと物覚えの両方ががひどくなった人の覚え書きでした。

関連する記事