JsonpZip プレビュー！　住所プルダウンから郵便番号自動入力 Kawa.netブログ（川崎有亮）/ウェブリブログ

JsonpZip プレビュー！　住所プルダウンから郵便番号自動入力

<< 作成日時： 2008/01/28 18:11 >>

思いつきで Google Code で JSONP Hosting というプロジェクトを始めてみました。
その第１弾として、郵便番号～住所の相互変換を行う JsonpZip を準備中です。
まだテストやドキュメントが未整備で、ソースも未完成ですが、とりあえずお試しプレビュー。
　
2005年3月にリリースした AjaxZip に始まり、住所入力フォームに Ajax を導入することで、
面倒な操作なくより快適にするプロジェクトを進めてきました。
郵便番号・住所系の API・Web サービスとしては、他にもいろいろな種類が登場してきているので、
正直なところ、今さら他にもやることがあるのか？という感じもしていましたが、
今回の JsonpZip では、JSONP を活用した新しいしかけを導入しています。

お試しはこちら：　http://jsonp-hosting.googlecode.com/svn/trunk/jsonpzip/sample/sample.html

まず、Lightbox みたいに、rel="" 属性で対象フォームを指定するのがポイント。
onChange イベントも含めて、JavaScript を１行も書かずに済みます。
FTP のみで導入しやすかった AjaxZip2 以上に、デザイナさんにも優しい仕組みです。

<script type="text/javascript" src="http://jsonp-hosting.googlecode.com/svn/trunk/jsonpzip/lib/jsonpzip.js" charset="UTF-8"></script> <form> 郵便番号： <input type="text" name="zip3" rel="jsonpzip[zip3]" maxlength="3" size="4"> - <input type="text" name="zip4" rel="jsonpzip[zip4]" maxlength="4" size="5"><br> 住所： <select name="pref" rel="jsonpzip[pref]"></select> <input type="text" name="city" rel="jsonpzip[city]" size="20"> <input type="text" name="area" rel="jsonpzip[area]" size="20"><br> 番地～号室： <input type="text" name="strt" rel="jsonpzip[strt]" size="60"> <input type="submit" value="送信"> </form>

主な特徴は以下の通り。

１．郵便番号を入力すると、住所が自動入力される
　⇒ これは AjaxZip2 と同じ。
２．住所を都道府県→市区町村→大字町域とプルダウンで選択できる
　⇒ これも ADDRAjax で実現していた。
３．住所を入力すると、郵便番号が自動入力される
　⇒ 逆引き検索（住所→郵便番号）もいくつかサービスが出てきていますね。
４．自前サーバへの CGI・XML・JSON ファイルの設置が不要
　⇒ サーバ側 CGI 設定はもとより大量ファイル FTP も不要。デザイナさんにも優しい。
５．Google Code で無料ホスティング提供。
　⇒ Google 提供のサーバなので安定・高速で、ネットワーク帯域も気にならない。
６．rel="" 属性を書き換えるだけ。JavaScript コード記述不要。
　⇒ Lightbox のようにプログラムの知識が全くなくても、導入・利用可能。

JSONP フォーマットのデータファイルと Google Code のホスティングを組み合わせることで、
サーバ側のデータベースやプログラム稼動もファイル設置も不要になる仕組みです。
また、既にページ内で Prototype.js や jQuery などのライブラリを利用している場合でも、
干渉が発生しないのも嬉しい。
詳しい使い方は、正式リリースをご期待ください♪
　
　
※ JSONP-SE は、半分ネタなので、今回は利用していません。