[jQuery] jquery.jpostal.jsを使って郵便番号から住所を取得
ちょっと前にphpのメール送信フォームを作って、その時は関係無かったんですがフォームで郵便番号から住所の自動取得とかどうやってやるんだろうと思って調べてみました。
どこかしらと契約してAPI的な物を使うのだろうかと思っていたのですが、フリー（MITライセンス）でスクリプトを公開されている方がいるみたいで、メジャーな物として
- ajaxzip3
- jquery.jpostal.js（jQueryプラグイン）
の２つがあり、今回は自分最近jQueryを使ってるのでjquery.jpostal.jsの方を使ってみました。
ちなみに、jquery.jpostal.jsは「Ninton合同会社」という会社が開発、保守しているようです。
使い方
GitHubのjquery.jpostal.jsのページ
此方の解説を読んだ上で、
<script type=”text/javascript” src=”//jpostal-1006.appspot.com/jquery.jpostal.js”></script>
をjQueryと合わせ設置する事で使用可能になります。
尚、今回ボタンクリックをトリガーに自動入力したいので、clickも併せて設定します。
例「convert_zipcode.html」
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery.jpostal.jsで郵便番号から住所をフォームに自動設定</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript" src="run_jpostal_js.js"></script>
</head>
<body>
<h2>郵便番号から住所を自動設定</h2>
<form action="sample.php" method="post">
<label>郵便番号：<input type="text" id="zipcode1" name="zipcode1" size="5" maxlength="3"></label>
<label> - <input type="text" id="zipcode2" name="zipcode2" size="6" maxlength="4"></label>
<button type="button" id="convert">取得</button><br>
<br>
<label>都道府県：<input type="text" id="address1" name="address1" size="20" maxlength="20"></label><br>
<label>市区町村：<input type="text" id="address2" name="address2" size="20" maxlength="20"></label><br>
<label>町域：<input type="text" id="address3" name="address3" size="20" maxlength="20"></label><br>
</form>
</body>
</html>
例「run_jpostal_js.js」
$(function(){
// clickにボタンのIDを設定
// postcodeに郵便番号入力フォームのIDを配列で指定
// addressに住所入力欄のIDを連想配列で指定
$('#postcode1').jpostal({
click :
'#convert',
postcode : [
'#zipcode1',
'#zipcode2'
],
address : {
'#address1' : '%3',
'#address2' : '%4',
'#address3' : '%5'
}
});
});
上記サンプル「jquery.jpostal.jsで郵便番号から住所をフォームに自動設定」
特記事項
（src=”// の部分をsrc=”http://にした上で確認）
データをjsonで取ってきたりしてる処理の関係か、ローカル環境では動かないみたいです。
所感
公式にclickの解説が無かった（他のサイトの紹介記事やコード上にはある）のが気になりましたが、手軽かつMITライセンスで使わせて頂けるとはとても有難いです。
※[2018/12/09 23:45]サンプルに一部問題があった為修正しました。
本家 Azure Contrail はこちら
コメントはありません。