Help us understand the problem. What is going on with this article?

郵便番号から住所を取得する

More than 5 years have passed since last update.

はじめに

よくあるユーザー登録画面で、郵便番号を入力すると、
自動で住所が入力されることがあります。
あれって、どうやってるんだろうと思い、調べてみました。

ajaxzip3

https://code.google.com/p/ajaxzip3/というのが一番簡単だったので、
これを紹介します。

使い方は至ってシンプルです。

zipcode.html
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>
    <title>calendarSample</title>
</head>
<body ng-app="calendarApp">
    <div class="container" ng-controller="CalendarCtrl">
        <div class="jumbotron">
            <h2>ZipCodeSample!</h2>
        </div>

        郵便番号:<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
        <p>住所:<input type="text" name="pref01" size="20">
        <input type="text" name="addr01" size="60"></p>

    </div>
</body>
</html>

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>
を読み込みます。

そして、<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
で、郵便番号を入力します。
onkeyUpイベントを使っているので、郵便番号入力後すぐにpref01addr01名の入力欄に設定されます。

おわりに

ajaxzip3サイトを見ると、いくつかパターンがありましたので、いろいろ好みに合わせて作ることができるようです。
かなり手軽に作れたので、利用価値はかなりあると思いました。

調べてみるとYahoo! JapanでもAPIを提供しているようなので、シチュエーションに合わせて使い分けてみればいいと思います。

village
気が付いたら、フリーランスのエンジニアになりました。 PHP + Laravel + Vue.js + Node.js = 今の仕事 python + 機械学習 = 勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away