Javascriptで郵便番号から住所を検索

郵便番号から住所検索

ここでは入力した郵便番号から Webサービスを使って住所検索を行い表示する
Javascript のサンプルをご紹介します。

■ 初期画面

実行

サンプル初期画面

■ サンプルソース

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html lang="ja">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
   <meta http-equiv="Content-Style-Type" content="text/css">
   <meta http-equiv="Content-Script-Type" content="text/javascript">
   <style>
   *{ margin:0; padding:0; }
   BODY{font-size:12px;margin-top:10px;}
   H1{width:80%;height:40px;margin:0 auto;font-size:25px;text-align:center;color:#003D99;border-bottom:solid 1px #003D99;}
   P{width:33em;margin:20px auto 0;}
   TABLE{margin:20px auto 0;border-collapse:collapse;}
   TABLE,TH,TD{border:solid 1px #BBB;letter-spacing:1px;}
   TH{width:120px;padding:0 10px;font-weight:normal;text-align:left;white-space:nowrap;background-color:#003D99;color:#FFF;}
   TD{width:210px;padding:0 10px;white-space:nowrap;}
   INPUT.btn{width:60px;margin:5px 0 5px 10px;color:#000;border:solid 1px #777;cursor:pointer;
   filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#F8F8F8, EndColorStr=#E5E5E5);}
   INPUT.txt{margin:5px 1px;padding:2px 5px;border:solid 1px #999;}
   INPUT.txt2{margin:5px 1px;width:190px;padding:2px 5px;border:solid 1px #999;}
   </style>
   <title>郵便番号検索 サンプル</title>
   <link rel=stylesheet type="text/css" href="">
   <script language="javascript">
   //******************************************/
   //*  srchZip()
   //*  入力した郵便番号よりﾘｸｴｽﾄURLを作成し、次のような<script>ﾀｸﾞを生成します。
   //*    <script type="text/javascript" src="ﾘｸｴｽﾄURL" charset="utf-8">
   //*  生成した<script>ﾀｸﾞをHTML内へ挿入します。
   //******************************************/
   function srchZip(){
     str = new String(document.getElementById('ZIP3').value);
     str += document.getElementById('ZIP4').value;
     /* 郵便番号 */
     if(str.length != 7){
       alert('郵便番号を入力して下さい。');
       return;
     }
①   var reqUrl = 'http://zip.ricollab.jp/'+ str +'.json?callback=reqJson';
     /* <script>ﾀｸﾞの生成 変数：sTagへ格納 */
     var sTag = crtScriptTag(encodeURI(reqUrl));
     /* <script>ﾀｸﾞをHTMLへ書き込み */
     document.body.insertAdjacentElement('AfterEnd',sTag);
   }
   //******************************************/
   //*  crtScriptTag()
   //*  <script>ﾀｸﾞの生成
   //*  -------------------------------------- */
   //*  引数
   //*  reqUrl：ﾘｸｴｽﾄURL(URIｴﾝｺｰﾄﾞ済)
   //*  -------------------------------------- */
   //*  戻値
   //*  sc：次のような<script>ﾀｸﾞ
   //*      <script type="text/javascript" src="ﾘｸｴｽﾄURL" charset="utf-8">
   //******************************************/
   function crtScriptTag(reqUrl){
     var sc = document.createElement("script");
     sc.setAttribute("type","text/javascript");
     sc.setAttribute("src", reqUrl );
     sc.setAttribute("charset", 'utf-8' );
     return sc;
   }
   //******************************************/
   //*  reqJson()
   //*  ﾚｽﾎﾟﾝｽ時のｺｰﾙﾊﾞｯｸ関数（自動的に実行される関数）
   //*  -------------------------------------- */
   //*  引数
   //*  json：ﾚｽﾎﾟﾝｽされたjsonｵﾌﾞｼﾞｪｸﾄ
   //******************************************/
   function reqJson(json){
②     document.getElementById('PREF').value = json.address.prefecture;
     document.getElementById('PREF_KN').value = json.yomi.prefecture;
     document.getElementById('CITY').value = json.address.city;
     document.getElementById('CITY_KN').value = json.yomi.city;
     document.getElementById('TOWN').value = json.address.town;
     document.getElementById('TOWN_KN').value = json.yomi.town;
   }
   </script>
   
   </head>
   <body>
   <h1>郵便番号からの住所検索</h1>
   <p>郵便番号を入力して「検索」ボタンをクリックすると、各種住所が入力されます。</p>
   <table>
     <tr>
       <th>郵便番号</th>
       <td>〒<input type="text" id="ZIP3" maxlength="3" size="3" class="txt">-<input type="text" id="ZIP4" maxlength="4" size="4" class="txt"><input type="button" value="検索" onclick="srchZip()" class="btn"></td>
     </tr>
     <tr>
       <th>都道府県</th>
       <td><input type="text" id="PREF" class="txt2"></td>
     </tr>
     <tr>
       <th>都道府県 カナ</th>
       <td><input type="text" id="PREF_KN" class="txt2"></td>
     </tr>
     <tr>
       <th>市区町村</th>
       <td><input type="text" id="CITY" class="txt2"></td>
     </tr>
     <tr>
       <th>市区町村 カナ</th>
       <td><input type="text" id="CITY_KN" class="txt2"></td>
     </tr>
     <tr>
       <th>その他住所</th>
       <td><input type="text" id="TOWN" class="txt2"></td>
     </tr>
     <tr>
       <th>その他住所 カナ</th>
       <td><input type="text" id="TOWN_KN" class="txt2"></td>
     </tr>
   </table>
   </body>
   </html>

サンプルの解説

■ ricollab 郵便番号検索（http://zip.ricollab.jp/）

ricollab 郵便番号検索（ http://zip.ricollab.jp/ ）では郵便番号とコールバック関数を
パラメータとしてこのサイトに要求をすると、住所名が検索されて
JSONP ( JavaScript Object Notation with Padding ) と呼ばれるコールバック関数付きの
連想配列として戻されます。
例えば、

http://zip.ricollab.jp/5700028.json?callback=reqJson

のように郵便番号（ 570-0028 ）とコールバック関数（ reqJson ）をパラメータとして要求すると
結果として次のような JSONP が戻ってきます。

reqJson({
  "zipcode": "5700028",
  "address": {
    "prefecture": "大阪府",
    "city": "守口市",
    "town": "本町"
  },
  "yomi": {
    "prefecture": "オオサカフ",
    "city": "モリグチシ",
    "town": "ホンマチ"
  }
});

従って、この JSONP から住所名を取り出してやればよいことになります。
しかし Javascript には「 クロスドメイン 」に対しての制限があるためデータへのリクエストが遮断されてしまい、
JSONP を受け取ることができません。

また、他のサンプルでご紹介しているような XML を扱うのではなく JSONP を扱うため、
どのように Javascript で JSONP を取り扱うかも問題になります。

http://zip.ricollab.jp/5700028.json?callback=reqJsonへどのようにリクエストを行い、
どのようにJSONPを受けとるか？
受け取ったJSONPをJavasacriptでどのように取り扱うか？

■ リクエストとレスポンス

Javascript から JSONP へのリクエスト方法は次のように script タグの src属性から行います。

<script type="text/javascript" src="http://zip.ricollab.jp/5700028.json?callback=reqJson">

このタグを ① のように Javascript内で生成し HTML へ挿入することで、リクエストが行われ JSONP を受け取ります。

var reqUrl = 'http://zip.ricollab.jp/'+ str +'.json?callback=reqJson';
var sTag = crtScriptTag(encodeURI(reqUrl));
document.body.insertAdjacentElement('AfterEnd',sTag);

JSONP をブラウザが受け取ると、コールバック関数（ここでは reqJson ）が呼び出されて実行されます。

■ JSONPの扱い方

コールバック関数（reqJson）の実行により JSONP は変数：json へ格納されます。

function reqJson(json){

変数：json は Javascript 上では次のような階層構造を持つオブジェクトとして認識されます。

例えば都道府県のデータ「大阪府」を取り出したいときは、次のように記述することでデータを取り出すことができます。

json.address.prefecture

この方法を用いて、②のように JSONP から各 inputタグの value値へ次のように値を入れることで、
HTML へ受け取った住所を表示します。

document.getElementById('PREF').value = json.address.prefecture;
document.getElementById('PREF_KN').value = json.yomi.prefecture;
     ：
     ：
document.getElementById('TOWN_KN').value = json.yomi.town;

■ クロスドメインの制限

Javascript は通常、異なるドメイン間をまたがった（クロスドメイン）
データアクセスを行うことはできません。
Webアプリケーションを設置・公開するホストのドメインと、その
アプリケーションがアクセスするWebサービスのドメインが異なる場合、
Javascript によるデータアクセスは遮断されてしまいます。

例えば本サイトのドメイン（ officequattro.com ）と ricollab 郵便番号検索の
ドメイン（ zip.ricollab.jp ）ではドメインが異なるため、Javascript による
データアクセスを行うことができません。
このため、Ajax を利用した非同期通信も行うことができず、CGI 等の
サーバー側での処理を通してデータのやり取りを行い結果を HTML へ返します。

しかし、HTML の script タグの src属性には別ドメインの URL を指定して通信することができます。
これを利用して異なるドメインのサーバからデータを取得する手法を
JSONP ( JavaScript Object Notation with Padding ) と言います。