住所の入力補助
投稿日: 2011-04-22 /
カテゴリー:job
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" />–
<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