郵便番号から住所検索

AngularJS用の郵便番号から住所検索を行う処理がほしかったので、JavaScriptライブラリ「AjaxZip3」をバラして、必要なコードを抜き出して作成してみました。

https://github.com/ajaxzip3/ajaxzip3.github.io/blob/master/ajaxzip3.js

ajaxzip3についてはこちら（AjaxZip3の使い方 | Webサイト制作支援 | ShanaBrian Website）を参照。

前提としてAngularJSが動作する環境で行うこと。

// AngularJSのコード
var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function ($scope, $http) {

    // 住所データ設定
    var zip_addr = {};
    zip_addr.zip1 = "";
    zip_addr.zip2 = "";
    zip_addr.addr1 = "";
    zip_addr.addr2 = "";
    zip_addr.addr3 = "";
    $scope.zip_addr = zip_addr;

    // 都道府県リスト
    var prefmap = [null,"北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"];

    /**
     * 郵便番号から住所の検索・取得
     */
    function searchZipAddr(zip1, zip2, successFunc, errorFunc)
    {
        // 入力チェック
        if(zip1.match(/[^0-9]+/) || 
            zip2.match(/[^0-9]+/) || 
            !(zip1.length === 3) ||
            !(zip2.length === 4) ){
            errorFunc();
            return;
        }
        // 検索処理
        var zipAddr = {};
        var config = {};
        $http.get("https://yubinbango.github.io/yubinbango-data/data/" + zip1 + ".js", config)
        .success(function (data, status, headers, config) {
            if(data){
                zipAddr = angular.fromJson(data.substr(0, data.lastIndexOf(");")).replace("$yubin(", ""));
                var addr = zipAddr[zip1 + zip2];
                if(addr){
                    successFunc(addr);
                }else{
                    errorFunc();
                }
            }else{
                errorFunc();
            }
        })
        .error(function (data, status, headers, config) {
            errorFunc();
        });
    };

    /**
     * 住所検索ボタン押下
     */
    $scope.clickSearchZipAddr = function(){
        searchZipAddr(
            $scope.zip_addr.zip1, 
            $scope.zip_addr.zip2,
            function(addr){
                $scope.zip_addr.addr1 = prefmap[addr[0]];
                $scope.zip_addr.addr2 = addr[1];
                $scope.zip_addr.addr3 = addr[2];
            },
            function(){
                alert('該当する住所が見つかりませんでした。');
            }
        );
    };
});

以下は対応するHTMLコードです。

<div ng-controller="MainCtrl">
    <p>
        <input type="text" ng-model="zip_addr.zip1" size="2" maxlength="3" /> -
        <input type="text" ng-model="zip_addr.zip2" size="3" maxlength="4" />
        <button ng-click="clickSearchZipAddr()">住所検索</button>
    </p>
    <p>
        <input type="text" ng-model="zip_addr.addr1" size="15" />
        <input type="text" ng-model="zip_addr.addr2" size="15" />
        <input type="text" ng-model="zip_addr.addr3" size="15" />
    </p>
</div>

そうそうないと思いますが、都道府県が増減したり、郵便番号の体系が変わったら修正しないといけないと思います。