郵便番号から住所を自動入力する

ユーザが入力する手間を省いたり入力間違いを避ける為に、住所の一部を自動入力する補助UIを見たことがあると思います。 例えばこんなHTMLで、「郵便番号から住所を検索する」ボタンをクリックすると自動的に都道府県と住所が入力される仕組みです。

<ul>
    <li>
        <label for="zipcode">郵便番号:</label>
        <input type="text" name="zipcode" id="zipcode">
        <input type="button" id="button-getaddress" value="郵便番号から住所を検索する">
    </li>
    <li>
        <label for="state">都道府県:</label>
        <input type="text" name="state" id="state">
    </li>
    <li>
        <label for="address">住所:</label>
        <input type="text" name="address" id="address">
    </li>
</ul>

お問い合わせフォームやユーザー登録などで良く見られますね。 郵便番号からの住所検索は各所でAPIやライブラリが提供されておりますが、 ここでご紹介するのは次の２つのリソースです。

1. zipaddress.net http://zipaddress.net/
2. ajaxzip3 https://code.google.com/p/ajaxzip3/

共に商用利用可能で、リンクの設置などの制限は特にない様です。

zipaddress.net

zipaddress.net は、@sugimoto1981 氏が公開している郵便番号検索APIです。

郵便番号-住所検索API
http://zipaddress.net
郵便番号データをパラメータに含めてリクエストを送信することで、都道府県、市区町村のデータをJSONフォーマットで返却するシンプルなサービスです。

APIの利用方法はシンプルで、郵便番号を7桁の数字で送ると JSON で住所の内容を返してくれます。 JSONPにも対応しているのでクライアントサイドでの利用も簡単です。 というよりむしろ、クライアントサイドでの利用を前提としているサービスなのでしょう。 簡単に組み込みが出来るSDKも公開されています。

試しに jQuery で上に挙げたHTMLに組み込んでみます。

$("#button-getaddress").on("click", function(){
    var code;
    if(! (code = $("#zipcode").val())){
        return;
    }
    $.ajax({
        url: "http://api.zipaddress.net",
        dataType: "jsonp",
        data: {
            zipcode: code
        }
    })
    .then(function(data){
        if(! data.pref){
            alert("失敗しました。");
        } else {
            $("#state").val(data.pref);
            $("#address").val(data.address);
        }
    });
});

エンドポイントは “http://api.zipaddress.net” で、SSLにも対応しています。 返ってくるデータには以下の住所情報が含まれていますので、これらをテキストインプットに流し込めば完了です。

• pref: 都道府県
• address: 市区町村以降の住所
• fullAddress: pref + address の結合文字列

また、提供されているSDKを使って情報を取得する事も出来ます。 SDKにある ZA.request メソッドを使用する事で、JSONP周りの処理をかなり簡略化してくれます。

ZA.request(code, function(data, error){
    /* data から住所を取得する */
});

ZA.request には郵便番号と、受け取る為のコールバックを渡して使用します。 この他にも、予め各項目を入力する要素を渡しておいてハンドリングする ZA.regiester もあります。 詳しくは SDK のリファレンスをご参照ください。

ajaxzip3

ajaxzip3 は、ajaxzip2 をJSONP対応にしてリリースされたライブラリです。

ajaxzip3
https://code.google.com/p/ajaxzip3/
世界一、簡単に設置できる郵便番号検索を目指して！

他の郵便番号検索APIとは一線を画しており、 リポジトリに検索用のデータを静的なJavaScriptファイルとして設置しておき、 JSONPとしてアクセスする事で住所データを取得する仕組みです。 データは郵便番号の上3桁毎に別ファイルにされて、 /zipdata ディレクトリ に格納されています。

上述の HTML に組み込んでみましょう。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>
<script>
    $("#button-getaddress").on("click", function(){
        if(! $("#zipcode").val()){
            return;
        }
        AjaxZip3.zip2addr("zipcode", "", "state", "address");
    });
</script>

データの展開は AjaxZip3.zip2addr メソッドで行います。 引数には郵便番号等の文字列ではなく、input 要素の name 属性を渡す事に注意してください。 （丁度、先に挙げた zipaddress.net の ZA.register がこれに倣ったような実装になっている様です。）

AjaxZip3.zip2addr(
    "zipcode", // 郵便番号上3桁を入力した input 要素,
    "", // 郵便番号下4桁を入力した input 要素
    "state", // 都道府県を入力する input 要素
    "address" // 市区町村以下を入力する input 要素
);

静的ファイルで取得する都合上、jQuery等の動的なJSONPは使用できません。 コールバック関数は zipdata() で固定されていますので、 処理を弄りたい場合はこれを上書きする事になります。

window.zipdata = function(data){ ... };

制作者の手間を極力省く設計になっている反面、融通を効かせる為には一手間必要です。

その他のヒント

上であげたいずれのリソースも、利用するにあたって正しい郵便番号（7桁の半角数字）が渡される事が前提となります。 広い層に使われるUIなので、間違った入力に柔軟に対応出来るように配慮してあげたいと思います。 例えば、番号入力が完了した時に誤った入力を自動修正する処理を挟む事で、 フォームの使い勝手が向上するのではないでしょうか。

$("#zipcode").on("blur", function(){
    var map = {
        zen: "０１２３４５６７８９",
        han: "0123456789"
    };
    this.value = this.value.replace(/[^\d]/g, function(s){
        var index = map.zen.indexOf(s);
        if(index >= 0){
            return map.han.substr(index, 1);
        }
        return "";
    });
});

上のコードは、カーソルが離れた時に全角数字を半角数字に変換したのち、余計な文字を削除する簡単な例です。 誤ってハイフン等が入力されてしまった場合でも、正しい形式でAPIにリクエストする事ができます。

参考資料

• 郵便番号-住所検索API
• ajaxzip3 – 郵便番号検索API, JSONP対応 – Google Project Hosting