【Javascript】Ajax　郵便番号、住所 検索

郵便番号、住所 検索

---

今回は、Ajaxによる入力補助「郵便番号、住所の検索」を試してみます。

郵便番号による住所変換機能は、IMEなどにも搭載されていますが、 Webページのフォームでキー入力を追尾しつつインクリメンタルに検索される、 カスタマイズされた変換機能の操作感は魅力です。今回は2種類の検索を作ってみました。

ひとつは、よくある、「郵便番号」入力による住所検索です。キーを上げる(onkeyup)と、そこまで入力された郵便番号に対して、前方一致で住所候補を検索するSQL文がAjax発行されます。結果セットは、ページ遷移することなく受信され、「住所候補のリンクリスト」として表示されます。

もう一つは、「住所の一部分」入力による郵便番号、住所のあいまい検索で、住所の一部分を入力後、改行キーを押すと、その文字列を含む住所候補を部分一致で検索するSQL文がAjax発行され、結果が表示されます。

Ajaxによる郵便番号検索は、すでにさまざまな方が作成されていますが、ここでは、JavaScriptからSQL文をAjax発行し、 結果セットもJavaScriptでAjax受信するために、私が、個人的にテスト開発中のツール「AjaSQL」を使ってみました。

AjaSQLでは、クライアントが直接、JavaScriptからSQLクエリをAjax発行し、データベースを利用できます。 この場合おそらく、多くの方が危惧する、セキュリティ処置は、サーバー側ゲートウエイに任せてしまいます。これにはほとんど触る必要はありません。

JavaScriptだけで、なるべくサーバーには触らずに、SQLデータベースアプリを構築できるツールにしようという試みです。 ページ遷移無く通信できる、Ajaxのメリットを生かしたかたちでのデータベース利用を可能にしたいと思っています。



*AjaSQLは、まだ、開発中ですのでマイナーバージョンv027を利用しました。また、AjaSQL内では、Masanao Izumo氏によるMD5の変換ライブラリ(高度な JavaScript 技集)を使わせていただいております。Ajax通信に関わる基本部分は、これまで何度も利用してきた暫定Ajax用ライブラリのv036、jslb_ajax036.js を使っています。AjaSQLは、このサイトで、ソース、サンプルともに入手できますが、 あくまでも、現在はテストバージョンですので、 関連するPHPやLinuxシェルのセキュリティにご注意ください。

1: 「郵便番号」入力による住所検索
2: 「住所の一部分」入力による住所検索
3: 「郵便番号」「住所の一部分」入力による住所検索

---

1: 「郵便番号」入力による住所検索

→Sample
(*このサンプルは上記リンク参照)

動作ブラウザ

win					mac				linux
n7	m1	e6	o7	o8	n7	m1	e5	s1	n7	m1	k3
○	○	○	×	○	○	○	×	○	○	○	○

　

このサンプルは、JavaScriptから、SQL文を発行して12万件の住所からの検索を行っています。

使ったソースは、下記の通りです。AjaxやクロスブラウザとSQL関連の処理は3つのライブラリに任せてありますので、ソースは簡単です。 ここでは、プログレスバーも使っていますのでその指定を少しと、住所候補選択用DIVや入力フォームの指定を行っているだけです。 設定する主な項目は、以下の通りです。

• プログレスバーに使うHTML ( サンプルでは、sqlite.progress.prog_bar = '|' )
• プログレスバーの色 ( サンプルでは、sqlite.progress.div.style.color = 'orange' )
• プログレスバー用DIV ( サンプルでは、<div id="progressBarId"></div> )
• 住所候補選択用DIV ( サンプルでは、document.getElementById('selzipdiv') )
• 〒番号用 入力フィールド ( サンプルでは、document.zipform.zip )
• 住所用 入力フィールド ( サンプルでは、document.zipform.address )

* 郵便番号/住所検索 ライブラリを使わずにもう少しスクリプトの見えるバージョンもあります →「郵便番号」入力による住所検索

【JavaScript側】

<font color=orange>
 
 
<!-- 暫定Ajaxライブラリ jslb_ajaxxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "../ajasql/jslb_ajax036.js"></script>

<!-- 暫定AjaSQLライブラリ ajasqlxxx.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "../ajasql/jslb_ajasql027.js"></script>

<!-- 〒番号/住所検索 ライブラリ ajasql_zip2addr.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "../ajasql/ajasql_zip2addr001.js"></script>

<script language = "JavaScript">
<!--

	//初期設定
	window.onload=function(){

		//初期化 
		sqlite = new asql_Conf(sqlite01);

		//プログレスバー(デフォルトは'o')
		sqlite.progress.prog_bar = '|'
		sqlite.progress.div.style.color = 'orange'

		//住所候補選択用DIV
		selzip   = document.getElementById('selzipdiv')
		//〒番号用 入力フィールド
		zipfild  = document.zipform.zip
		//住所用 入力フィールド
		addrfild = document.zipform.address
	}

//-->
</script>


<!-- 住所候補選択用DIVのCSS指定 -->
<style>
<!--
#selzipdiv{
	background-color : #ffffff          ;
	font-size        : 12px             ;
	width            : 300px            ;
	padding          : 2px              ;
}
#selzipdiv a:link     { color: #333; background: none;}
#selzipdiv a:visited  { color: #666; background: none;}
#selzipdiv a:active   { color: #000099; background: none;}
#selzipdiv a:hover    { color: orange; }

-->
</style>

<br>
<b>【郵便番号から検索】</b>郵便番号を入力すると12万件のデータから住所が検索されます 
	<form name="zipform" onsubmit="return false">
	〒<input type       = "text"
	       name         = "zip"
	       size         = "10"
	       maxlength    = "8"
	       autocomplete = "off"
	       onkeyup      = "zip2addr(this.value) /*ajasql_zip2addr001.js内の関数です*/"
	       style        = "background-color:#ffcc33;
	                       ime-mode:disabled;"
	       value        = "">
	住所<input type         = "text"
	       name         = "address"
	       size         = "60"
	       autocomplete = "off"
	       value        = "">
	<div id="selzipdiv"></div>
	</form>
	<!-- ここへ選択リストを出力 -->
	<div id="progressBarId"></div>
	

データベース SQLite (zipdb)
AjaSQLでは、データベースは、現在のところ、MySQLとSQLiteを使えます。今回は、データベースをファイル単位で配布できるのでSQLiteを利用しています。 テーブル構造は下記の通りです。

	CREATE TABLE zip(
		code,        //郵便番号
		address      //住所
	);

データは、下記のように格納されています。(データは、郵政公社の平成17年 7月 29日更新版データから加工生成しました。)

3001282|茨城県牛久市井ノ岡町
3001283|茨城県牛久市奥原町
3001286|茨城県牛久市小坂町
3001281|茨城県牛久市桂町
3001288|茨城県牛久市久野町
3001284|茨城県牛久市島田町
3001285|茨城県牛久市正直町
3001287|茨城県牛久市福田町
　　:
　　:

SQL文は、ライブラリ「ajasql_zip2addr001.js」の中で、次のように発行されています。

ちなみに、「where code = '300128%'」と指定すれば、 300128で始まる上記の茨城県牛久市の8件のリストを出力します。

  //「郵便番号」入力による住所検索の場合のSQL文
  // (「zip」テーブルから カラム「code」が「zip%」なものを昇順で20件リクエスト)
  // 
  asql_sendSQL(sqlite,'select * from zip where code like "'+zip+'%" order by code limit 20 ;')

また、「select * from zip where address like "北海道%";」 で北海道をリストアップするリンクを作ったり、 「order by 句」を使ってソートをかけたり、SQLの集計関数などを利用したりといったこともできます。


次のページは、「住所の一部分」入力による住所検索です。


|
前回：Ajaxで基本認証+SSL |
今回：郵便番号、住所 あいまい検索 |