Home > その他 > 郵便番号 > JavaScript の利用 > zipcloud の API を使用( 178 )

zipcloudのAPIを使用して作ってみました。同じ郵便番号で複数の情報がある場合は、ミニウィンドウを表示して選択できます。

郵便番号から住所を検索

「郵便番号から住所を検索」のコード

1. Script部

var ZipCode = function(zip){	//クラス ZipCode の定義
	if(!zip){	//Nullの場合
		this.status=false;
		this.error_msg="郵便番号が入力されていません。";
		alert(this.error_msg);
		return;
	}else if(zip.match(/^\d{7}$/)){	//ハイフォンなしの７桁番号
		this.zip_code=zip.replace(/^([0-9]{3})([0-9]{4})$/,"$1-$2");
		this.status=true;
	}else if(zip.match(/^([0-9]{3})-([0-9]{4})$/)){	//ハイフォン付きの７桁番号
		this.zip_code=zip;
		this.status=true;
	}else{
		this.status=false;
		this.error_msg="郵便番号 [ "+zip+" ] が正しくありません。";
		alert(this.error_msg);
		return;
	}
	this.GetErrorMsg=function(){
		return this.error_msg;
	}
	this.GetStatus=function(){
		return this.status;
	}
	this.GetZipCode=function(){
		return this.zip_code;
	}
	if(this.status){	//住所検索
		Ctrl_cursor("wait");	//マウスカーソルを待機状態にする
		RemoveScript('//zipcloud.ibsnet.co.jp/api/search?zipcode=');
		var zip=this.zip_code.replace("-","");	//ハイフォンなしの７桁番号に直す
		var target=document.createElement("script");
		target.src = "//zipcloud.ibsnet.co.jp/api/search?zipcode="+encodeURIComponent(zip)+"&callback=GetAddress";	//zipcloudのサイトから住所情報を取得
		document.body.appendChild(target);

	}
}
function SearchAddress(){	//検索ボタンが押された時に呼ばれる関数
	var zipcode=document.getElementById("zip").value;
	var obj=new ZipCode(zipcode);	//クラス ZipCode をコールし住所情報を取得する
}
var g_zip;
function GetAddress(zip){	//コールバック関数(住所情報の取得)
	Ctrl_cursor("default");	//マウスカーソルを元に戻す
	document.getElementById("pref").value="";
	document.getElementById("pref_kana").value="";
	document.getElementById("city").value="";
	document.getElementById("city_kana").value="";
	document.getElementById("town").value="";
	document.getElementById("town_kana").value="";
	if(zip.status==200){
		if(zip.results!=null){
			g_zip=zip;
			if(zip.results.length==1){
				SetZipData(0);
			}else{
				OpenMiniWindow(zip);
			}
		}else{
			alert("郵便番号が見つかりません");
		}
	}else{
		alert(zip.message);
	}
}
function Ctrl_cursor(ctrl){	//マウスカーソルの制御
	document.body.style.cursor = ctrl;
	var tag=Array('input','a','button','select');
	for(var j=0;j<tag.length;j++){
		for (var i = 0; i < document.getElementsByTagName(tag[j]).length; i++) {
			document.getElementsByTagName(tag[j])[i].style.cursor = ctrl;
		}
	}
}
function SetZipData(i){
	document.getElementById("pref").value=g_zip.results[i].address1;
	document.getElementById("pref_kana").value=g_zip.results[i].kana1;
	document.getElementById("city").value=g_zip.results[i].address2;
	document.getElementById("city_kana").value=g_zip.results[i].kana2;
	document.getElementById("town").value=g_zip.results[i].address3;
	document.getElementById("town_kana").value=g_zip.results[i].kana3;
}
function OpenMiniWindow(zip){
	var url=""; //ウィンドウに表示するURL
	var x_width=600;    //ウィンドウの横幅
	var y_height=150;   //ウィンドウの高さ
	var x_pos=Number((window.screen.width-x_width)/2);
	var y_pos=Number((window.screen.height-y_height)/2);
	win=window.open(url,"zipcode","width="+x_width+",height="+y_height+",left="+x_pos+",top="+y_pos+",location=no,menubar=no,toolbar=no,resizable=yes,scrollbars=yes");
	var ret='※左側の「利用する」ボタンをクリックしてください。<\/span>';
	ret+='<table class="zipcode" cellspacing="0" cellpadding="0" border="0">';
	ret+='<tbody style="white-space:pre;">';
	ret+='<tr style="text-align:center;">';
	ret+='<td>取込みボタン</td><td>郵便番号</td><td>都道府県</td><td>市区町村</td><td>町域</td></tr>';
	for(var i=0;i<zip.results.length;i++){
		ret+='<tr><td style="text-align:center;">';
		ret+='<input type="button" name="" value="利用する" style="color:red" onclick="used('+ i +');return false;">';
		ret+='</td><td>'+zip.results[i].zipcode+'</td><td>'+zip.results[i].address1+'</td><td>'+zip.results[i].address2+'<br><font size=1>'+zip.results[i].kana2+'</font></td><td>'+zip.results[i].address3+'<br><font size=1>'+zip.results[i].kana3+'</font></td></tr>';
	}
	ret+='</tbody></table>';
	win.document.writeln("<title>郵便番号「"+zip.results[0].zipcode+"」の同一地域</title>");
	win.document.writeln(ret);
	win.document.writeln('<style type="text/css">table.zipcode td{padding:0px 3px;border:1px #897858 solid;}</style>');
	win.document.writeln('<SCRIPT type="text/JavaScript">function used(i){window.opener.SetZipData(i);window.close();}<\/SCRIPT>');
	win.document.close();
}



2. Html部

<div style="text-align:left;padding-left:10px;">
	<form action="">
		<table>
			<tr><th>郵便番号:<\/th><td><input type="text" id="zip" size="9" maxlength="8"><input type="button" onclick="SearchAddress();return false;" value="住所検索"> ※ハイフォンなしで入力してください。<\/td><\/tr>
			<tr><th>都道府県:<\/th><td><input type="text" id="pref" size="8"><input type="text" id="pref_kana" size="10"><\/td><\/tr>
			<tr><th>市区町村:<\/th><td><input type="text" id="city" size="35"><input type="text" id="city_kana" size="35"><\/td><\/tr>
			<tr><th>町域:<\/th><td><input type="text" id="town" size="35"><input type="text" id="town_kana" size="35"><\/td><\/tr>
		<\/table>
	<\/form>
<\/div>