超便利な郵便番号から住所へ変換してくれるjQueryプラグイン

      2016/05/22

超便利な郵便番号から住所へ変換してくれるJQueryプラグイン

フォーム入力のシステムを作っていると、郵便番号と住所を入れる場面が多々あると思います。郵便番号入れているのに、住所を入れるの面倒くさいです。

郵便番号からある程度住所を補完してくれると非常にユーザビリティが向上します。そんな機能を簡単に実装することができるjQueryプラグインの紹介です。

 

■郵便番号→住所へ変換してくれるjQueryプラグイン【jpostal】

GitHub上にプロジェクトが存在しています。動作デモはこちらです。

利点として、github上で郵便番号と住所の関連情報のjsonを管理してくれているので、サーバ上に大量の郵便番号→住所のjson的な物を持っておかなくても良いです。住所の更新も自動となります。

 

サンプルスクリプトは以下のとおりです。とても簡単に実装することができます。

<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="//jpostal-1006.appspot.com/jquery.jpostal.js" type="text/javascript"></script>


<script>
$(document).ready(function(){
    $('#zipcode').jpostal({
        postcode : [
            '#zipcode',
        ],
        address : {
            '#address'  : '%3%4%5%6',
        }
    });
});
</script>
</head>
<body>

郵便番号
<input name="zipcode" class="form" type="text" id="zipcode">


住所
<input name="address" class="form" type="text" id="address">

</body>
</html>

 

ほんの少しフォームに手を加えるだけで、劇的にユーザビリティが向上します。運用も簡単なので、ぜひ導入を検討してみてください。では

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery , ,