重要なお知らせ
- 2025年5月から郵便局の公式APIが運用スタートしています
- 郵便番号から住所自動入力は「郵便局の公式API」のご利用をおすすめします
- https://guide-biz.da.pf.japanpost.jp/api/
-----
jquery.jpostal.js
Copyright 2014-, Aoki Makoto, Ninton G.K.
http://www.ninton.co.jp
Released under the MIT license - http://en.wikipedia.org/wiki/MIT_License
Requirements
jquery.js
郵便番号を入力すると住所欄へ自動入力するjQueryプラグインです。
jpostal-1006.appspot.comで公開していますので、jquery.jpostal.jsやjson/*.jsonを設置する必要がありません。
サイト運営者の定期的な郵便データ更新作業も必要ありません。
npmで、jquery-jpostal-jaとして公開しました。
npmでの使い方は最後。
都道府県をSELECTタグで表示する場合、OPTIONタグのvalueは次のどれでもかまいません。
使用例
(sample_1.html)
$3
#### 2-1. .jpostalを指定するセレクタ
$('#postcode1').jpostal({
郵便番号欄のセレクタを指定してください。
郵便番号欄が2個の場合は、最初の1個だけを指定してください。
DOM idを設定していたほうが指定が簡単です。
例1
DOM idありの場合
$('#postcode1_1').jpostal({
例2
DOM idなしの場合
$('[name=postcode1]').jpostal({
#### 2-2. 引数
##### postcode 郵便番号欄
郵便番号欄セレクタの配列
例1
郵便番号欄が1個
postcode : [
'#postcode'
]
例2
郵便番号欄が2個
postcode : [
'#postcode1',
'#postcode2'
]
##### address 住所欄
住所欄セレクタと入力項目フォーマットの連想配列
入力項目フォーマット
| 書式 | 意味 |
-----|-----
| %3 | 都道府県 |
| %4 | 市区町村 |
| %5 | 町域 |
| %6 | 大口事業所の番地 |
| %7 | 大口事業所の名称 |
| %8 | 都道府県カナ |
| %9 | 市区町村カナ |
| %10 | 町域カナ(予定) |
例1
都道府県欄、住所欄の2個
address : {
'#prefecture' : '%3',
'#address' : '%4%5',
}
例2
都道府県欄、住所欄、番地欄の3個
address : {
'#prefecture' : '%3',
'#address1' : '%4',
'#address2' : '%5',
}
設置方法B
ご自分のサーバに郵便データを設置する場合
$3
* アップロード先は任意です。
* htmlフォームと違うサーバも可能です。
アップロード先の例1
js/jpostal/jquery.jpostal.js
アップロード先の例2
js/jquery.jpostal.js
$3
* アップロード先は任意です。
* jquery.jpostal.jsとの相対関係はありません。
* htmlフォーム、jquery.jpostal.jsと違うサーバでもかまいません。
アップロード先の例1
js/jpostal/json/*.json
アップロード先の例2
js/json/*.json
$3
例
$3
#### 4-1. .jpostalを指定するセレクタ
2-1. .jpostalを指定するセレクタを参照
#### 4-2. 引数
##### postcode
2-2. 引数を参照
##### address
2-2. 引数を参照
##### url json/*.jsonのURL
住所フォームからjson/*.jsonへの相対URLまたは絶対URL。
http用、https用を指定してください。
例1
url : {
'http' : 'json/',
'https' : 'json/'
}
例2
url : {
'http' : 'http://www.example.jp/json/',
'https' : 'https://ssl.example.jp/mysite/json/'
}
例3
http、https どちらも同じホストとパスの場合
url : {
'http' : '//www.example.jp/json/',
'https' : '//www.example.jp/json/'
}
npm 使用例
$3
* test_npm/sample_1.html
* test_npm/src/main.js
$3
プロジェクトディレクトリで、jqueryとjquery-jpostal-jaをインストールしてください。
jquery-jpostal-jaをinstallしただけでは、jqueryを自動installされませんので、明示的にjqueryをinstallしてください。
$ npm install jqeury
$ npm install jquery-jpostal-ja
$3
$ = require('jquery');
require('jquery-jpostal-ja');
$(window).ready( function() {
$('#postcode1').jpostal({
postcode : [
'#postcode1',
'#postcode2'
],
address : {
'#address1' : '%3',
'#address2' : '%4',
'#address3' : '%5',
'#address1_kana' : '%8',
'#address2_kana' : '%9',
'#address3_kana' : '%10'
}
});
});
$3
$3
$ browserify src/main.js -o build/build.js