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

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

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

Google 日本語入力 – CGI API

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

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

郵便番号８桁を入力し [住所検索] ボタンをクリックすると、住所入力欄に住所が自動入力される…というサンプル 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(){
		（アクション１）
	});
</script>

ajax 通信 + JSON 形式

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

従って上記の（アクション１）の箇所は以下の通りになります…

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

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

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

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

リターン文字列

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

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

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

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] になりますので、このデータを（アクション２）で <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