Ajax:郵便番号検索APIを使って郵便番号検索を実装する

最近では当たり前になっている郵便番号検索ですが、完全に自前でやろうと思うと

  • DBの知識
  • サーバーサイドの知識
  • jQueryなどを使ったAjaxの知識
  • 郵便番号データの定期的な更新

などが必要で意外と大変だったりします。

もっと簡単に実装したい方のために、Ajaxの知識だけで郵便番号検索できる方法を紹介します。

実装方法

今回使うもの

  • 郵便番号API
  • jQuery

を今回は使います。

郵便番号APIはzipcloudを利用します。
このAPIは郵便番号を送信するとJson形式で郵便番号に該当する住所を返信してくれる便利なサービスです。
定期的に住所情報もメンテナンスしてくれているので、常にほぼ最新のデータを取得することができます。

コード

では実際に実装してみましょう。

まず、jQuery本体を読み込みます。

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

郵便番号の入力ボックスと、検索結果を表示する領域を記述します。

<h1>郵便番号</h1>
<!-- 郵便番号入力のテキストボックス -->
<input type="text" id="zipcode" value="" maxlength="7">
<input type="button" id="search_btn" value="検索">
<p>※7桁の半角数字で入力してください</p>

<!-- 検索結果の表示エリア -->
<div id="zip_result"></div>

郵便番号を検索するスクリプトを記述します。
検索ボタンをクリックしたときに、zipcloudに郵便番号を送信して結果を取得します。

$(function () {
    //検索ボタンをクリックされたときに実行
    $("#search_btn").click(function () {
        //入力値をセット
        var param = {zipcode: $('#zipcode').val()}
        //zipcloudのAPIのURL
        var send_url = "http://zipcloud.ibsnet.co.jp/api/search";
        $.ajax({
            type: "GET",
            cache: false,
            data: param,
            url: send_url,
            dataType: "jsonp",
            success: function (res) {
                //結果によって処理を振り分ける
                if (res.status == 200) {
                    //処理が成功したとき
                    //該当する住所を表示
                    var html = '';
                    for (var i = 0; i < res.results.length; i++) {
                        var result = res.results[i];
                        console.log(res.results);
                        html += '<h2>住所' + (i + 1) + '</h2>';
                        html += '<div>都道府県コード:' + result.prefcode + '</div>';
                        html += '<div>都道府県:' + result.address1 + '</div>';
                        html += '<div>市区町村:' + result.address2 + '</div>';
                        html += '<div>町域:' + result.address3 + '</div>';
                        html += '<div>都道府県(カナ):' + result.kana1 + '</div>';
                        html += '<div>市区町村(カナ):' + result.kana1 + '</div>';
                        html += '<div>町域(カナ):' + result.kana1 + '</div>';
                    }
                    $('#zip_result').html(html);
                } else {
                    //エラーだった時
                    //エラー内容を表示
                    $('#zip_result').html(res.message);

                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
            }
        });
    });
});

補足・注意事項

APIは便利ですがzipcloudのサーバーが落ちてたりすると、当然使えなくなってしまいます。
「郵便番号検索が使えないとサイトが全く使えなくなる」などの場合には、やはり自前で郵便番号検索用のプログラムを作ったほうがいいです。