住所の入力補助

webサイトで郵便番号から住所を検索して表示する仕組みを、最近はこんなに簡単に実現できてしまうのです、という話。
AjaxZip3
http://code.google.com/p/ajaxzip3/
AjaxZip2を元に作られたという、AjaxZip3を使ってみました。
株式会社人気組さんという会社の方が、日本郵便(未だに「郵政省」と言ってしまう…)のcsvファイルを変換&サーバにアップして、みんなが見られるようにしてくださっています。ごいす!
サイトから、ajaxzip3.js(SSLならajaxzip3-https.js)をダウンロードして、適当な場所に配置します。
今回は、htmlファイルの配置場所にjsフォルダを作成して、その中に置きました。
文字コードがShift-JISだとIE8でエラーが発生するとかいう話を耳にしましたので、文字コードはUTF-8にしました。というわけで、HTMLファイルはUTF-8で保存してください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/ajaxzip3.js" type="text/javascript"></script>
</head>
<body>
<form>
<span>〒</span>
<input type="text" name="zipcode1" id="zipcode1" />&ndash;
<input type="text" name="zipcode2" id="zipcode2" />
<input type="button" onclick="AjaxZip3.zip2addr('zipcode1', 'zipcode2', 'kencode', 'address1');" value="住所を検索" title="ボタンを押すと、郵便番号から住所を検索して表示します。" /><br />
<select name="kencode" id="kencode">
<option  value="01">北海道</option>
<option  value="02">青森県</option><option  value="03">岩手県</option>
<option  value="04">宮城県</option><option  value="05">秋田県</option>
<option  value="06">山形県</option><option  value="07">福島県</option>
<option  value="08">茨城県</option><option  value="09">栃木県</option>
<option  value="10">群馬県</option><option  value="11">埼玉県</option>
<option  value="12">千葉県</option><option  selected="selected"  value="13">東京都</option>
<option  value="14">神奈川県</option>
<option  value="15">新潟県</option><option  value="16">富山県</option>
<option  value="17">石川県</option><option  value="18">福井県</option>
<option  value="19">山梨県</option><option  value="20">長野県</option>
<option  value="21">岐阜県</option><option  value="22">静岡県</option>
<option  value="23">愛知県</option><option  value="24">三重県</option>
<option  value="25">滋賀県</option><option  value="26">京都府</option>
<option  value="27">大阪府</option><option  value="28">兵庫県</option>
<option  value="29">奈良県</option><option  value="30">和歌山県</option>
<option  value="31">鳥取県</option><option  value="32">島根県</option>
<option  value="33">岡山県</option><option  value="34">広島県</option>
<option  value="35">山口県</option>
<option  value="36">徳島県</option><option  value="37">香川県</option>
<option  value="38">愛媛県</option><option  value="39">高知県</option>
<option  value="40">福岡県</option><option  value="41">佐賀県</option>
<option  value="42">長崎県</option><option  value="43">熊本県</option>
<option  value="44">大分県</option><option  value="45">宮崎県</option>
<option  value="46">鹿児島県</option>
<option  value="47">沖縄県</option>
</select>
<input type="text" name="address1" id="address1" /><br />
<input type="text" name="address2" id="address2" />
</form>
</body>
</html>

ちなみに、私は勝手に表示されるのは好きじゃないので、ボタンを押すとセットされるようにしていますが、入力と同時にセットもできますのでそうしたい方は、サイトのサンプルを見てください。
あと、あくまでも善意に基づいたこのサービス、無くなったらしょんぼり、では済まない方はAjaxZip2でも実現できるように心の準備をしておいた方がいいように思います。
AjaxZip2
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html
過去に書いた使い方メモ
http://d.hatena.ne.jp/keuko/20100517#p3

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です