郵便番号を入力して検索ボタンをクリックしたら、入力フォームやプルダウンに検索結果の住所を挿入するようにしたい

[Sponsored Link]


当ブログでは「役に立った!」「写真使いました!」などご参考頂いた方からのAmazonギフト券の寄付をお待ち致しております。

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInDigg this

郵便番号を入力したら住所が出てくるというフォームは最近よく見かけるので、むしろそうなっていないフォームにぶちあたると「めんどくせー」と思ってしまうことすらないだろうか。まあそれはともかく、そうしたサイトで実現しているであろうテクニックを書いてみたい。

ということで、さっそく実装例を見てみたい。

が、その前に。


郵便番号と住所の対応一覧を入手しなければならない。
どういう形でどのようなデータを入手してもよいと思うが、もっともポピュラーなのは日本郵便のサイトからダウンロードできるCSVファイルではないだろうか。
なお、普通にダウンロードサイトへのリンクをたどっていくと、圧縮形式がLZHでのファイルに突き当たる。「ZIP形式はこちら」というリンクがあるので、そちらを利用するほうがよいだろう。

余談だが、LZHはすでに開発されなくなって久しい。圧縮ツールやライブラリなどの脆弱性の修正なども行われないため、LZHはもはや使用すべきではないというアナウンスもされているようだ。また、LZHよりもすぐれた圧縮率を持つアルゴリズムが登場しているので、それらを使うほうが望ましい。

■郵便番号データダウンロード – 日本郵便
http://www.post.japanpost.jp/zipcode/download.html
■郵便番号データの説明
http://www.post.japanpost.jp/zipcode/dl/readme.html
■読み仮名データの促音・拗音を小書きで表記するもの(zip形式) – 日本郵便
http://www.post.japanpost.jp/zipcode/dl/kogaki-zip.html

この情報から、今回使う情報は以下の通り。

3桁目:郵便番号(7桁)
7桁目:都道府県名(漢字)
8桁目:市区町村名(漢字)
9桁目:町域名(漢字)

さらにこのデータ中には「~の次に番地がくる場合」などの、住所に関係ない文字列が含まれている行もあるので、これらを排除するなどの作業も必要になる。件数が多いだけにExcelと目視検査では結構大変な場合もある。が、これをやらないと、入力された郵便番号によっては奇妙な住所がフォームに差し込まれてしまうことになりかねない。

また、CSV形式のファイルは半角カタカナが混じっているなど、文字コードがShift JISとなっている。これを、公開するサイトの文字コードにあわせなければならない。いまどきならUTF-8ということになると思うので、これらの文字コードをあらかじめ変換した上でデータ列を生成する必要がある。

あくまでも例として、私は以下のように処理している。というか、簡単に半自動化みたいな状態にして必要なCSVファイルを作るようにしている。
なお、文字列のフィルタも含めてこれが最善であるということではない(=クオリティは保証できない)。手作業での除去・修正が必要な行もあるので、運用前にはかならず各自で目検していただきたい。

/bin/rm -f ken_all.zip KEN_ALL.CSV
/usr/local/bin/wget -nv http://www.post.japanpost.jp/zipcode/dl/kogaki/zip/ken_all.zip
/usr/local/bin/unzip ken_all.zip
/usr/local/bin/nkf -w KEN_ALL.CSV | /usr/bin/awk -F ',' '{printf("%s,%s,%s,%s\n",$3,$7,$8,$9);}' | /usr/bin/sed 's/["]//g' | /usr/bin/sed 's/[()].*$//g' | /usr/bin/sed 's/[1234567890].*$//g' | /usr/bin/sed 's/の次に番地がくる場合//g' | /usr/bin/sed 's/以下に掲載がない場合//g' > yubin.csv_
/bin/mv yubin.csv_ yubin.csv

しかしこれではまだ足りない。
JavaScriptで使用するデータであれば、配列かJSONにしなければならない。ここではJSONにしてみたい。ちなみに私はこのようにして変換した後、JavaScriptの変数にJSONで保存するよう手作業で調整を加えた。

cat yubin.csv | awk -F ',' '{printf("\t{zip:\"%s\",pref:\"%s\",city:\"%s\",street:\"%s\"},\n",$1,$2,$3,$4)}'

具体的には、サンプルサイトの「zipdata.js」ファイルを覗いてもらえばよいと思う。

[Sponsored Link]


さて、ようやく本題に入る。
まずは、このようなありきたりの住所入力フォームの一部を作ってみる。都道府県選択はselectタグを使用しているのでoptionタグが47行と長くなるが、あえて省略せず書いておこう。

郵便番号:<input type="text" id="zip1" size="3" maxlength="3" value="">-
<input type="text" id="zip2" size="4" maxlength="4" value="">&nbsp;
<input type="button" id="search" value="住所を検索"><br>
都道府県:<select id="pref">
<option value="0" selected>(都道府県を選択)</option>
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option 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><br>
市区町村:<input type="text" id="city" value=""><br>
番地など:<input type="text" id="street" value="">

HTMLなので特に内容について言及する必要はないだろう。
ここでは、それぞれのタグにidが割り当てていることに注目しておきたい。これらをjQuery側からセレクタで指定するからだ。

さて本題のJavaScriptのほうだが、以下のようにしている。

$(document).ready(function(){
	$('#search').click(function(){
		var zip1 = $('#zip1').val();
		var zip2 = $('#zip2').val();
		var zip = '' + zip1 + zip2;

		for (var z in zipdata) {
			if (zipdata[z]['zip'] == zip) {
				var pref = zipdata[z]['pref'];
				var city = zipdata[z]['city'];
				var street = zipdata[z]['street'];

				$('#pref option').filter(function(){
					return $(this).text() == pref;
				}).prop('selected', true);
				$('#city').val(city);
				$('#street').val(street);

				break;
			}
		}
	});
});

2行目から、いわずもがな「住所を検索」ボタンがクリックされた場合のイベントハンドラである。
3~4行目で郵便番号の前半3桁と後半4桁をそれぞれ取得し、5行目で合わせている。数値演算にならないように、空文字(”)と合わせることで文字列結合になるようにした。

7行目のfor-in文で、郵便番号と住所の対応表であるzipdataとの郵便番号突き合わせのためのループを開始する。
8行目で郵便番号を比較し、一致したらその行の都道府県、市区町村、番地などの各パラメータを、9~11行目で適宜変数に保存している。

13~17行目は、検索した結果をそれぞれのフォームに挿入する処理をしている。
16、17行目のinputタグは普通にval()メソッドで突っ込んでいるが、問題は都道府県を選択するselectタグのoptionの指定である。これは13~15行目で処理している。
都道府県名は漢字で取得するので、適切なoptionタグを選んでselected属性を立てるようにしなければならない。

そのため、都道府県のoptionsタグという要素集合に対してフィルタをかける処理を設ける。ここではfilger()メソッドにコールバック関数を追加する。コールバック関数内では単にoptionタグの(value属性ではなくoptionタグで括られた)テキスト文字列を都道府県(pref変数)と比較し、trueかfalseのいずれかを返している。falseを返すとその要素は除外され、trueを返すと要素に含まれる。ここでは明らかに要素が1つしか該当しないことが明白であるため、optionタグのいずれか1つがfilter()メソッドのコールバック関数で選ばれることになる。その要素に対してprop()もしくはattr()メソッドで属性を変更(selected属性をtrueに設定)する。ここではprop()メソッドを使用している。attr()とprop()の違いについては、過去の記事を参考にしていただきたい。

■jQueryでチェックボックスの全チェック/外しをしようとしてハマッたこと、attr()とprop()の違いは罠レベル
http://ultrah.zura.org/?p=4450

一致したら挿入処理を行い、その後の検索続行は不要であるため、19行目でbreakしてfor-in文を抜ける。

■郵便番号から住所を検索してフォームに挿入
http://zura.org/prog/js/ziptoaddress/

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)現場で役立つjQueryデザインパーツライブラリ実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」やさしくはじめるWebデザイナーのためのjQueryの学校10日でおぼえるjQuery入門教室 第2版最新7ケタ版全国郵便番号簿〈2013‐2014年版〉トミカ ギフト 郵便車コレクション2ポストマン100 (赤)MS-2から揚げ 若鶏もも竜田揚げ1kg(約30個入り)お家が焼き鳥屋さん!宮崎県産若鶏  焼き鳥50本セット【冷凍】焼肉 バーベキューにおすすめ

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInDigg this

当ブログでは「役に立った!」「写真使いました!」などご参考頂いた方からのAmazonギフト券の寄付をお待ち致しております。


Atsushi Ezura について

ナチュラルな女性のしぐさや表情を撮りたいIT系エンジニア。女性モデル募集中プロフィール
カテゴリー: JavaScript, jQuery, ウェブ, コンピュータ タグ: , , , , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。