Kawa.netxp ADDRAjax - Ajaxによる住所ドリルダウン検索

都道府県名→市区町村名→町域とドリルダウンで住所を検索する JavaScript ライブラリです。
JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。
住所辞書データの通信には Ajax（JSON）を利用しており、動作も十分に軽量です。

【2007/12/23 追記】 jQuery にも対応しました！

『ADDRAjax』は ADdress DRilled down by Ajax の略です。

ダウンロード（ZIPパッケージ）　←通常はこちら
開発中のソースコード Subversion @ CodeRepos
導入手順とサンプルコード
ドリルダウンな ALPSLAB Clip! 作成ツール
郵便番号辞書のアップデート手順
ライセンスとご使用上の注意点
更新履歴
ご意見・ご感想はこちらへ
トラックバック

ダウンロード

AjaxZip2 は以下からダウンロードできます。

一括アーカイブ： addrajax-20071223.zip ZIP ←通常パッケージはこちらです
住所辞書抜き軽量版： addrajax-20071223-core.zip ZIP ←プログラム本体のみ
住所辞書のみ： addrajax-20071223-data.zip ZIP ←データのみ詰め替え用

通常は、一括アーカイブをご利用ください。
一括アーカイブには、以下のファイルが入っています。

addrajax/addrajax.js            JavaScriptメインプログラム
addrajax/prototype.js           JavaScriptライブラリ（Ajax通信用）
addrajax/data/pref-01.json      北海道の住所データ（JSONフォーマット）
addrajax/data/pref-02.json      青森県の住所データ
addrajax/data/pref-03.json      　　　：
       （中略）
addrajax/data/pref-45.json      　　　：
addrajax/data/pref-46.json      鹿児島県の住所データ
addrajax/data/pref-47.json      沖縄県の住所データ
addrajax/work/csv2jsonpref.pl   郵便番号データ→住所データ変換プログラム
addrajax/work/lib/JSON.pm       JSON処理用Perlモジュール

work ディレクトリは、通常の利用では不要です。

CodeRepos で開発中のソースコードを公開しています。

ADDRAjax の導入手順

ダウンロードしたアーカイブから addrajax ディレクトリを展開してください。
data サブディレクトリを含む全てのファイルをサーバにアップロードしておきます。
HTML ソースでは、<head>～</head>に下記のJavaScriptを追加します。

<script src="addrajax/prototype.js"></script>
<script src="addrajax/addrajax.js" charset="UTF-8"></script>
<script><!--
    Event.observe(window,'load',function(){
        var dd = new ADDRAjax( 'pref', 'city', 'area' );
        dd.JSONDATA = 'addrajax/data';
        dd.init();
    });
//--></script>

次に、住所選択フォーム <form>～</form> 中に下記のような空のプルダウンを設置しておきます。
未選択時用に『↓(都道府県)』のようなoptionを用意しておきます。

<select name="pref"><option value="">↓(都道府県)</option></select>
<select name="city"><option value="">↓(市区町村)</option></select>
<select name="area"><option value="">↓(町域)</option></select>

以上で設定は完了です。

フォームの変数名 pref・city・area は変更できます。
フォーム中と、new ADDRAjax() 時には同じ変数名を指定してください。
都道府県名欄・市区町村名欄・町域欄は全て通常のフォームになります。
submit 時にはフォームの他の要素と同じようにサーバに値が送信されます。

jQuery を利用する場合

ADDRAjax 開発当時は Prototype ライブラリが主流でしたが、現在はもっとクールな jQuery ライブラリも登場しています。 jQuery を使う場合は、下記のように記述します。

<script src="addrajax/jquery.js"></script>
<script src="addrajax/addrajax.js" charset="UTF-8"></script>
<script><!--
    $(function(){
        var dd = new ADDRAjax( 'pref', 'city', 'area' );
        dd.JSONDATA = 'addrajax/data';
        dd.init();
    });
//--></script>

Prototype を利用しても jQuery を利用しても、動作は同じです。
サイト内で既にどちらかのライブラリをご利用の場合は、そちらをそのままご利用ください。

デフォルト住所の指定

デフォルトで選択済の住所を指定することもできます。

以下のように、setAddress() メソッドの引数に、都道府県名・市区町村名・町域名を指定します。
マッチングは、完全一致です。1文字でも違うと正しく選択されません。

<script src="addrajax/prototype.js"></script>
<script src="addrajax/addrajax.js" charset="UTF-8"></script>
<script><!--
    Event.observe(window,'load',function(){
        var dd = new ADDRAjax( 'pref', 'city', 'area' );
        dd.init();
        dd.setAddress('千葉県','千葉市中央区','弁天');
    });
//--></script>

選択時のコールバック関数呼び出し

onChange プロパティを利用すると、住所が選択される度にコールバック関数が起動します。
ここでは、alert() で選択内容を表示してます。

コールバック関数は、都道府県名・市区町村名・町域名を引数として、呼び出されます。

<script src="addrajax/prototype.js"></script>
<script src="addrajax/addrajax.js" charset="UTF-8"></script>
<script><!--
    Event.observe(window,'load',function(){
        var dd = new ADDRAjax( 'pref', 'city', 'area' );
        dd.onChange = function (pref,city,area) {
            alert( pref+" "+city+" "+area );
        };
        dd.init();
    });
//--></script>

コールバック関数を応用すると、いろいろできそうです。 →例：ドリルダウンな ALPSLAB Clip! 作成ツール

郵便番号辞書のアップデート手順

AjaxZip2 アーカイブを作成した後に、市町村合併などで郵便番号が変更されている場合もあります。
最新の郵便番号辞書を利用したい場合は、以下の手順で最新版にアップデートにアップデートできます。

$ cd addrajax/work

$ wget http://www.post.japanpost.jp/zipcode/dl/kogaki/lzh/ken_all.lzh
18:32:32 (5.67 MB/s) - `ken_all.lzh' saved [1720194/1720194]

$ lha x ken_all.lzh
ken_all.csv     - Melted   :  ooooooooooooooooooooooooooooooooooooooooooooooooooooo

$ perl csv2jsonpref.pl ken_all.csv
北海道          .......................................... 8205 lines
青森県          ............. 2495 lines
岩手県          .......... 1934 lines
       （中略）
宮崎県          ../data/pref-45.json   11170bytes
鹿児島県        ../data/pref-46.json   18895bytes
沖縄県          ../data/pref-47.json    9606bytes

$ rm -f ken_all.lzh ken_all.csv

wget や lha コマンドが利用できない場合は、手元のPCやMac環境にて ken_all.lzh をダウンロードして、そこから ken_all.csv ファイルを展開した上で、 csv2jsonpref.pl を実行してください。
あるいはサーバ上でなくても、Windows 環境（ActivePerl）や Mac OS X クライアントでも csv2jsonpref.pl は実行できそうです。

ライセンスとご使用上の注意点

ADDRAjax は、 ~~修正 BSD ライセンス~~ MIT ライセンス として公開します。
個人利用・商用利用を問わず、自由にご利用いただけます。
ただし、ソース中の著作権表示については、変更せずにご利用ください。
郵便番号辞書は日本郵政公社制作のものです。再配布は自由とのことです。

なお、ご使用にあたって、川崎有亮に事前・事後にご連絡いただく必要は必ずしもありません。
とはいえ、できれば、一言メール等でお知らせいただけると嬉しいです。
質問やご意見などは、コメント欄へお願いします。

更新履歴

2007/12/23
- ソースコード管理を CodeRepos に移行しました。
- JSON 取得時の XHR 通信で、Prototype ライブラリに加えて jQuery ライブラリに対応しました。
  prototype.js がなくて、jquery.js がある環境では、jQuery を利用します。（1.2.1 を添付）
  （お待たせしました。＞パート２さん）
- 添付の郵便番号辞書を最新版（平成19年11月30日版）に更新しました。
  〒509-0109“岐阜県各務原市テクノプラザ”等が新規登録されています。
- csv2jsonpref.pl と添付の JSON.pm を更新しました。
- 添付の Prototype ライブラリを 1.6 に更新しました。
- お試ししやすいサンプル HTML (prototype.js版) とサンプル HTML (jquery.js版) をアーカイブに添付しました。

2007/07/15
- アーカイブ中の JSON.pm モジュールに添付漏れがあったのを修正しました。（thanks to お尋ねしますさん）
  2006/12/15 で対応したつもりだったけど、漏れていたらしい。
- 合わせて郵便番号辞書を最新版(6月末版)に更新しました。

2006/12/15
- 配布アーカイブに JSON/Converter.pm と JSON/Parser.pm が添付漏れだったので、追加しました。
  プログラム本体は変更ありません。
- 合わせて郵便番号辞書を最新版に更新しました。
- このページのサンプルコード HTML に誤りがあったので、修正しました。（thanks to なんどもすいませんさん）

2006/09/24
- 作ってみました。

コメントはこちらへ by AjaxCom

その他のページへのリンク

kawa.net xp トップページ

このページへのトラックバック by AjaxTB

トラックバックURL⇒ http://www.kawa.net/service/tb/ajaxtb.cgi/works/ajax/addrajax/addrajax.html