郵便番号辞書の作り方

Google 日本語入力 – CGI API を使った郵便番号辞書の作り方(JavaScript サンプル)

Google 日本語入力 - CGI API を使った郵便番号辞書( JavaScript)の作り方(サンプル)

Google 日本語入力 – CGI API を使った 郵便番号辞書 の JavaScript での作り方をご紹介いたします。

※参考サイトは最下部にまとめております。

Google 日本語入力 – CGI API

Google 日本語入力はオンライン/ネットからでも使用することができるようになってます。
こちら “http://www.google.com/transliterate” のアドレスに GET パラメータで値を渡せば結果が返されてきます。

入力フォームと検索ボタン(HTML サンプル)

郵便番号8桁を入力し [住所検索] ボタンをクリックすると、住所入力欄に住所が自動入力される…というサンプル HTML を作ってみたいと思います。HTML はこんな感じになります…

<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='UTF-8'>
	</head>
	<body>
		<div>
			郵便番号 <input type='text' id='txtZipCode' value="100-0001">
			<input type='button' id='btnSubmit' value="住所検索">
		</div>
		<div>
			住 所 <input type='text' id='txtAddress'>
		</div>
	</body>
</html>

[住所検索] の Click イベント

次に「[住所検索] がクリックされたら…」の部分を jQuery で書くと以下のようになります…

<script src='https://code.jquery.com/jquery.min.js'></script>
<script>
	$('#btnSubmit').on('click', function(){
		(アクション1)
	});
</script>

ajax 通信 + JSON 形式

Google 日本語入力 – CGI API へは GET で値を渡しますが、戻り値は JSONP で返されるとの事です。
JSONP というのは JSON with Padding の略ですが、別ドメインのデータを JSON 形式で受け取る…という理解で良いと思います。

従って上記の(アクション1)の箇所は以下の通りになります…

	var strURL = "https://www.google.com/transliterate?langpair=ja-Hira|ja&text=" + $('#txtZipCode').val();
	$.getJSON(strURL, function(strData){
		(アクション2)
	});


“https://www.google.com/transliterate” に渡すパラメータは2つあり、

  1. langpair : ja-Hira|ja
  2. text : 変換元の文字列

このように指定します。郵便番号辞書の場合には、ハイフン付き半角数字8桁を指定します。

リターン文字列

返される文字列をそのまま console.log で出力するとこんな文字列が返ってきています…

[["100-0001",["東京都千代田区千代田","100-0001 東京都千代田区千代田","100-0001"]]]

(このあたりのドキュメントの場所がわからないのですが…)3次元の配列になっているようです、、

strData[0] = "["100-0001",["東京都千代田区千代田","100-0001 東京都千代田区千代田","100-0001"]]";
strData[0][0] = "100-0001";
strData[0][1][0] = "東京都千代田区千代田";
strData[0][1][1] = "100-0001 東京都千代田区千代田";
strData[0][1][2] = "100-0001";

必要なデータは strData[0][1][0] になりますので、このデータを(アクション2)で <input type=’text’ id=’txtAddress’> にセットするように書き換えると完成です…

<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='UTF-8'>
	</head>
	<body>
		<div>
			郵便番号 <input type='text' id='txtZipCode' value="100-0001">
			<input type='button' id='btnSubmit' value="住所検索">
		</div>
		<div>
			住 所 <input type='text' id='txtAddress'>
		</div>
		
		<script src='https://code.jquery.com/jquery.min.js'></script>
		<script>
			$('#btnSubmit').on('click', function(){
				var strURL = "https://www.google.com/transliterate?langpair=ja-Hira|ja&text=" + $('#txtZipCode').val();
				$.getJSON(strURL, function(strData){
					$('#txtAddress').val(strData[0][0]);
				});
			});
		</script>
	</body>
</html>

動作確認

実際に iframe 内に表示させてみます。郵便番号を書き換えて [住所検索] ボタンをクリックしてみてください。

注意

今回、試しに上記のサンプルを書いてみましたが、実際の業務用としては上記のコードは(当社では現時点では)使いません。Google が Google 日本語入力 – CGI API の仕様をいつ変更するかわからないからです。もし、仕様に変更があると…クライアント様から「住所検索がおかしい」と問い合わせがあり、改修しなければならなくなります。また、jQuery ライブラリも(jquery.com を参照するよりも)上記プログラムを保存する同一サーバー内に保存して使用すべきです(jquery.com がなんらかのサーバー障害をおこしてしまうと、おい問い合わせになってしまうからです)。

という訳で、近々 外部サーバーを使用しない同一サーバーのみで動作させる郵便番号辞書のサンプルをご紹介いたします。

参考サイト

Google 日本語入力 – CGI API
https://www.google.co.jp/ime/cgiapi.html

プログラミング相談受付中

自営エンジニア歴 20年以上の 当ブログ作者が、プログラミングに関するオンライン相談(zoom 等)を受付中です。言語は HTML CSS JavaScript jQuery PHP MySQL VBScript など…

詳細・お問い合わせはこちら