[JavaScript]JavaScript（JSONP）で郵便番号検索API利用する

前回公開したWeb サービスですが実際に使用する方法を簡単に説明したいと思います。

Ajaxなどを利用してサーバーから非同期にデータを取得する方法が最近は流行ですが、Ajaxで問題になるのは、呼び出したサイトとしか通信ができないので自分のサーバーに仕組みを作っておかなければならないということです。

このため、いままで住所の入力をするときに郵便番号から住所を入力を保管するような仕組みを作ろうとすると、自分たちの管理しているサーバーに仕組みを構築して、そのデータを自分たちで管理しなければなりませんでした。

これらの手間を考えると面倒だし、レンタルサーバーなどで思うように仕組みを構築できない場合には、手で入力すればいいやと思うためあきらめていなかったのではないでしょうか？

そんなときこのサービスを使っていただきたいと思います。

サーバーの構築などは必要ありませんし、データの更新も自動的に行ってくれるので管理の手間はいりません。

それでは、実際の使い方について説明したいと思います。使い方といっても、JavaScriptを読み込むコードを書くだけなんですけど。

function zipsearch()
{
  var zipcode = document.getElementById( 'zipcode' ).value;
  
  if( ! check_zipcode( zipcode ) )
   return false;
  var target = document.createElement('script');
  target.charset = 'utf-8';
  target.src = 'http://groovetechnology.co.jp/ZipSearchService/v1/zipsearch?zipcode='+encodeURIComponent( zipcode )+'&callback=callback1';

  document.body.appendChild(target);
}

上記のコードは、郵便番号が入力されて検索ボタンが押されたときに呼び出される関数と思ってください。

やっていることは、郵便番号の入力フィールドから入力された郵便番号を取り出してその入力をチェックした後にドキュメント内にscriptタグを新たに作ってそこに外部からJavaScriptを呼び出しているということを行っています。このとき読み込むJavaScriptのソースにパラメータ（郵便番号とコールバックの関数名）を渡して呼び出しています。

これで外部のJavScriptのソースの読み込みが完了するとコールバック関数が呼び出されてそこに引数としてサーバーで検索された結果が入ってきます。

下記のソースは、そのコールバック関数の一例で検索結果を一覧表示するというものです。このコールバックの中身を替えることで一覧表示させるだけではなく、ほかの処理をさせることができます。

function callback1( data )
{
  zip_data = data;
  var html = '<table style="width:100%;border:1px solid #666666;border-collapse:collapse;" border="1">';
  html += '<col style="width:1em;">';
  for (var i in zip_data.zipcode )
  {
    html += '<tr><td><input type="button" name="" value=" 利用する" onclick="used( \''+ i +'\' );return false;" /></td><td style="white-space:nowrap">' + data.zipcode[i].zipcode.substr(0,3) + '-' + data.zipcode[i].zipcode.substr(3) +'</td><td style="white-space:nowrap">' + data.zipcode[i].prefecture + '</td><td style="white-space:nowrap">' + data.zipcode[i].city  + '</td><td style="white-space: nowrap;text-align:left;">' +  data.zipcode[i].town  + "</td><td> </td></tr>\r\n";
  }
  for (var i in zip_data.office )
  {
    html += '<tr><td><input type="button" name="" value=" 利用する" onclick="used( \''+ i +'\' );return false;" /></td><td style="white-space:nowrap">' + data.office[i].zipcode.substr(0,3) + '-' + data.office[i].zipcode.substr(3) +'</td><td colspan="3" style="white-space:nowrap">' + data.office[i].office_name + '</td><td style="white-space:nowrap">' + data.office[i].prefecture + data.office[i].city + data.office[i].town + data.office[i].street + "</td></tr>\r\n";
  }
  html += "</table>\r\n";

  document.getElementById( 'codes' ).innerHTML = html;
}

これらの仕組みは、JavaScriptの外部のファイルの呼び出しがドメインに関係なくできるということを利用しています。これにより、サーバーに仕組みを構築しなくても、JavaScriptだけでほかのサーバーにあるデータを読み込んでそのデータを活用できるということになります。

ここで用いられているのがJSONP（JSON with padding）という方法（というか形式）で最近では、GoogleやYahooのWebサービスでも使われるようになっています。

実際に動くようにしたのが下のサンプルになります。3桁以上の郵便番号を入力してから住所検索ボタンを押すとポップアップ画面が表示されて複数の候補から選択できるようになっています。ハイフンの有無は関係ありません。

このように違うサーバーからデータを取得してきてそのデータを利用することができます。

下のリンクは、このサンプルをZIPにしたファイルです。自分のローカルで試すこともできますし、自分で管理しているサーバーにおいて使用することも可能です。

郵便番号入力補助のサンプル