LoginSignup
39

More than 5 years have passed since last update.

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

Posted at

はじめに

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

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を提供しているようなので、シチュエーションに合わせて使い分けてみればいいと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39