├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package.json ├── test ├── htdocs │ └── yubinbango.html ├── protractor.conf.js └── spec.js ├── tsconfig.json ├── yubinbango.js ├── yubinbango.js.map └── yubinbango.ts /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | build.py 4 | reserve.json 5 | yubinbango-src.js 6 | yubinbango-src.js.map 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Teruyuki Kobayashi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## YubinBangoについて 2 | 3 | これまでにない設定方法(なんとclassを指定するだけ!)のまったく新しいライブラリが誕生いたしました! 4 | このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。 5 | 6 | ## 背景 7 | 8 | 設置後の郵便番号データの更新作業から解放される革新的なライブラリajaxzip3の公開から8年。Google Codeの閉鎖の告知とともにGithubに移行しましたが、これを機にTypescriptの新しいコードベースに移行することに。さらに郵便番号データの更新をGithub Actionsで自動化いたしました。 9 | 新しいコードは基本機能のみを抽出したCoreモジュールと、これまでのajaxzip3と互換性を保つためのモジュール、さらにまったく新しいYubinBangoライブラリの3つのモジュールと、Coreライブラリから参照される郵便番号データで構成されています。コードを見直すことによりさらに軽量化いたしました。 10 | もちろん郵便番号が全角数字で入力された場合は半角数字に自動変換します。ハイフンが入力されても動作します。 11 | 12 | ## YubinBangoの設定方法 13 | 14 | 今度の郵便番号検索ライブラリは、なんとclassを指定するだけ! 15 | 下記のように[microformats2](http://microformats.org/wiki/h-adr)の標準仕様に合わせたclassを記載をするだけで郵便番号検索機能が有効になります。 16 | ```html 17 | 18 |
19 | 20 | 21 | 〒
22 | 23 |
24 |
25 | ``` 26 | ## その他の設定方法 27 | 28 | 住所欄を分ける場合は下記のようにします。 29 | ```html 30 |
31 | 32 | 33 | 〒 34 |
35 | 36 |
37 |
38 |
39 | 40 |
41 | ``` 42 | ## YubinBangoライブラリを有効にするには? 43 | 44 | YubinBangoが有効になる条件は下記の通りとなります。 45 | 46 | 0. scriptタグでYubinBangoライブラリが読み込まれていること 47 | 例: \ 7 | 8 | 9 |

YubinBango

10 |

郵便番号を3桁-4桁形式で入力される場合

11 |

住所欄をワンボックスにする場合

12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 〒 20 |
21 | 22 |
23 |
24 | 25 |

都道府県 と 以降の住所 に分ける場合

26 | 27 |
28 | 29 | 30 | 31 | 32 | 〒 33 |
34 | 35 |
36 |
37 |
38 | 39 |

都道府県 と 市町村区 と 以降の住所に分ける場合

40 | 41 |
42 | 43 | 44 | 45 | 46 | 〒 47 |
48 | 49 |
50 |
51 | 52 |
53 | 54 |

都道府県 と 市町村区 と 町域 と 以降の住所に分ける場合

55 | 56 |
57 | 58 | 59 | 60 | 61 | 〒 62 |
63 | 64 |
65 |
66 |
67 | 68 |
69 | 70 |

ワンボックスで郵便番号7桁を入力させる場合

71 |

住所欄をワンボックスにする場合

72 | 73 | 74 |
75 | 76 | 77 | 78 | 79 | 〒
80 | 81 |
82 |
83 | 84 |

都道府県 と 以降の住所 に分ける場合

85 | 86 |
87 | 88 | 89 | 90 | 91 | 〒
92 | 93 |
94 |
95 |
96 | 97 |

都道府県 と 市町村区 と 以降の住所に分ける場合

98 | 99 |
100 | 101 | 102 | 103 | 104 | 〒
105 | 106 |
107 |
108 | 109 |
110 | 111 |

都道府県 と 市町村区 と 町域 と 以降の住所に分ける場合

112 | 113 |
114 | 115 | 116 | 117 | 118 | 〒
119 | 120 |
121 |
122 |
123 | 124 |
125 | 126 |

inputタグが深い階層にある場合

127 | 128 |
129 | 130 | 131 | 132 | 133 | 〒 134 |
135 | 136 |
137 |
138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /test/protractor.conf.js: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | seleniumAddress: 'http://localhost:4444/wd/hub', 3 | framework: 'jasmine', 4 | 5 | jasmineNodeOpts: { 6 | showColors: true, 7 | defaultTimeoutInterval: 30000 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /test/spec.js: -------------------------------------------------------------------------------- 1 | browser.ignoreSynchronization = true; 2 | browser.get(browser.baseUrl+'/test/htdocs/yubinbango.html'); 3 | 4 | describe('YubinBango', function() { 5 | describe('郵便番号を3桁-4桁形式で入力される場合', function() { 6 | it('住所欄をワンボックスにする場合', function() { 7 | expect( element.all(by.css('#a1 .p-postal-code')).count() ).toEqual( 2 ); 8 | element.all(by.css('#a1 .p-postal-code')).get(0).sendKeys(100) 9 | .then(function(){ 10 | element.all(by.css('#a1 .p-postal-code')).get(1).sendKeys(8950) 11 | .then(function(){ 12 | browser.driver.sleep(1000) 13 | .then(function(){ 14 | expect(element(by.css('#a1 .p-region')).getAttribute('value')).toEqual('東京都千代田区霞が関1丁目2-1'); 15 | }); 16 | }); 17 | }); 18 | }); 19 | 20 | it('都道府県 と 以降の住所 に分ける場合', function() { 21 | expect( element.all(by.css('#a2 .p-postal-code')).count() ).toEqual( 2 ); 22 | element.all(by.css('#a2 .p-postal-code')).get(0).sendKeys(100) 23 | .then(function(){ 24 | element.all(by.css('#a2 .p-postal-code')).get(1).sendKeys(8950) 25 | .then(function(){ 26 | browser.driver.sleep(1000) 27 | .then(function(){ 28 | expect(element(by.css('#a2 .p-region')).getAttribute('value')).toEqual('東京都'); 29 | expect(element(by.css('#a2 .p-locality')).getAttribute('value')).toEqual('千代田区霞が関1丁目2-1'); 30 | }); 31 | }); 32 | }); 33 | }); 34 | 35 | it('都道府県 と 市町村区 と 以降の住所に分ける場合', function() { 36 | expect( element.all(by.css('#a3 .p-postal-code')).count() ).toEqual( 2 ); 37 | element.all(by.css('#a3 .p-postal-code')).get(0).sendKeys(100) 38 | .then(function(){ 39 | element.all(by.css('#a3 .p-postal-code')).get(1).sendKeys(8950) 40 | .then(function(){ 41 | browser.driver.sleep(1000) 42 | .then(function(){ 43 | expect(element(by.css('#a3 .p-region')).getAttribute('value')).toEqual('東京都'); 44 | expect(element(by.css('#a3 .p-locality')).getAttribute('value')).toEqual('千代田区'); 45 | expect(element(by.css('#a3 .p-street-address')).getAttribute('value')).toEqual('霞が関1丁目2-1'); 46 | }); 47 | }); 48 | }); 49 | }); 50 | 51 | it('都道府県 と 市町村区 と 町域 と 以降の住所に分ける場合', function() { 52 | expect( element.all(by.css('#a4 .p-postal-code')).count() ).toEqual( 2 ); 53 | element.all(by.css('#a4 .p-postal-code')).get(0).sendKeys(100) 54 | .then(function(){ 55 | element.all(by.css('#a4 .p-postal-code')).get(1).sendKeys(8950) 56 | .then(function(){ 57 | browser.driver.sleep(1000) 58 | .then(function(){ 59 | expect(element(by.css('#a4 .p-region')).getAttribute('value')).toEqual('東京都'); 60 | expect(element(by.css('#a4 .p-locality')).getAttribute('value')).toEqual('千代田区'); 61 | expect(element(by.css('#a4 .p-street-address')).getAttribute('value')).toEqual('霞が関'); 62 | expect(element(by.css('#a4 .p-extended-address')).getAttribute('value')).toEqual('1丁目2-1'); 63 | }); 64 | }); 65 | }); 66 | }); 67 | 68 | }); 69 | 70 | describe('ワンボックスで郵便番号7桁を入力させる場合', function() { 71 | it('住所欄をワンボックスにする場合', function() { 72 | expect( element.all(by.css('#b1 .p-postal-code')).count() ).toEqual( 1 ); 73 | element.all(by.css('#b1 .p-postal-code')).get(0).sendKeys(1008950) 74 | .then(function(){ 75 | browser.driver.sleep(1000) 76 | .then(function(){ 77 | expect(element(by.css('#b1 .p-region')).getAttribute('value')).toEqual('東京都千代田区霞が関1丁目2-1'); 78 | }); 79 | }); 80 | }); 81 | 82 | it('都道府県 と 以降の住所 に分ける場合', function() { 83 | expect( element.all(by.css('#b2 .p-postal-code')).count() ).toEqual( 1 ); 84 | element.all(by.css('#b2 .p-postal-code')).get(0).sendKeys(1008950) 85 | .then(function(){ 86 | browser.driver.sleep(1000) 87 | .then(function(){ 88 | expect(element(by.css('#b2 .p-region')).getAttribute('value')).toEqual('東京都'); 89 | expect(element(by.css('#b2 .p-locality')).getAttribute('value')).toEqual('千代田区霞が関1丁目2-1'); 90 | }); 91 | }); 92 | }); 93 | 94 | it('都道府県 と 市町村区 と 以降の住所に分ける場合', function() { 95 | expect( element.all(by.css('#b3 .p-postal-code')).count() ).toEqual( 1 ); 96 | element.all(by.css('#b3 .p-postal-code')).get(0).sendKeys(1008950) 97 | .then(function(){ 98 | browser.driver.sleep(1000) 99 | .then(function(){ 100 | expect(element(by.css('#b3 .p-region')).getAttribute('value')).toEqual('東京都'); 101 | expect(element(by.css('#b3 .p-locality')).getAttribute('value')).toEqual('千代田区'); 102 | expect(element(by.css('#b3 .p-street-address')).getAttribute('value')).toEqual('霞が関1丁目2-1'); 103 | }); 104 | }); 105 | }); 106 | 107 | it('都道府県 と 市町村区 と 町域 と 以降の住所に分ける場合', function() { 108 | expect( element.all(by.css('#b4 .p-postal-code')).count() ).toEqual( 1 ); 109 | element.all(by.css('#b4 .p-postal-code')).get(0).sendKeys(1008950) 110 | .then(function(){ 111 | browser.driver.sleep(1000) 112 | .then(function(){ 113 | expect(element(by.css('#b4 .p-region')).getAttribute('value')).toEqual('東京都'); 114 | expect(element(by.css('#b4 .p-locality')).getAttribute('value')).toEqual('千代田区'); 115 | expect(element(by.css('#b4 .p-street-address')).getAttribute('value')).toEqual('霞が関'); 116 | expect(element(by.css('#b4 .p-extended-address')).getAttribute('value')).toEqual('1丁目2-1'); 117 | }); 118 | }); 119 | }); 120 | 121 | }); 122 | 123 | it('inputタグが深い階層にある場合', function() { 124 | expect( element.all(by.css('#c1 .p-postal-code')).count() ).toEqual( 2 ); 125 | element.all(by.css('#c1 .p-postal-code')).get(0).sendKeys(100) 126 | .then(function(){ 127 | element.all(by.css('#c1 .p-postal-code')).get(1).sendKeys(8950) 128 | .then(function(){ 129 | browser.driver.sleep(1000) 130 | .then(function(){ 131 | expect(element(by.css('#c1 .p-region')).getAttribute('value')).toEqual('東京都千代田区霞が関1丁目2-1'); 132 | }); 133 | }); 134 | }); 135 | }); 136 | 137 | }); 138 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "UMD", 5 | "moduleResolution": "node", 6 | "isolatedModules": false, 7 | "jsx": "react", 8 | "experimentalDecorators": true, 9 | "emitDecoratorMetadata": true, 10 | "declaration": false, 11 | "noImplicitAny": false, 12 | "noImplicitUseStrict": false, 13 | "removeComments": true, 14 | "noLib": false, 15 | "preserveConstEnums": true, 16 | "suppressImplicitAnyIndexErrors": true 17 | }, 18 | "exclude": [ 19 | "node_modules", 20 | "typings/browser", 21 | "typings/browser.d.ts" 22 | ], 23 | "compileOnSave": true, 24 | "buildOnSave": false, 25 | "atom": { 26 | "rewriteTsconfig": false 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /yubinbango.js: -------------------------------------------------------------------------------- 1 | var t=[],YubinBango;!function(YubinBango){var n=function(){function n(t,n){if(void 0===t&&(t=""),this.URL="https://yubinbango.github.io/yubinbango-data/data",this.g=[null,"北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"],t){var e=t.replace(/[0-9]/g,function(t){return String.fromCharCode(t.charCodeAt(0)-65248)}),r=e.match(/\d/g),o=r.join(""),i=this.h(o);i?this.i(i,n):n(this.j())}}return n.prototype.h=function(t){if(7===t.length)return t},n.prototype.j=function(t,n,e,r,o){return void 0===t&&(t=""),void 0===n&&(n=""),void 0===e&&(e=""),void 0===r&&(r=""),void 0===o&&(o=""),{k:t,region:n,l:e,m:r,o:o}},n.prototype.p=function(t){return t&&t[0]&&t[1]?this.j(t[0],this.g[t[0]],t[1],t[2],t[3]):this.j()},n.prototype.q=function(t,n){window.$yubin=function(t){return n(t)};var e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("charset","UTF-8"),e.setAttribute("src",t),document.head.appendChild(e)},n.prototype.i=function(n,e){var r=this,o=n.substr(0,3);return o in t&&n in t[o]?e(this.p(t[o][n])):void this.q(this.URL+"/"+o+".js",function(i){return t[o]=i,e(r.p(i[n]))})},n}();YubinBango.Core=n}(YubinBango||(YubinBango={}));var n=["Japan","JP","JPN","JAPAN"],e=["p-region-id","p-region","p-locality","p-street-address","p-extended-address"],YubinBango;!function(YubinBango){var t=function(){function t(){this.s()}return t.prototype.s=function(){var n=this,e=document.querySelectorAll(".h-adr");[].map.call(e,function(e){if(n.t(e)){var r=e.querySelectorAll(".p-postal-code");r[r.length-1].addEventListener("keyup",function(e){t.prototype.u(n.v(e.target.parentNode))},!1)}})},t.prototype.v=function(t){return"FORM"===t.tagName||t.classList.contains("h-adr")?t:this.v(t.parentNode)},t.prototype.t=function(t){var e=t.querySelector(".p-country-name"),r=[e.innerHTML,e.value];return r.some(function(t){return n.indexOf(t)>=0})},t.prototype.u=function(t){var n=this,e=t.querySelectorAll(".p-postal-code");new YubinBango.Core(this.A(e),function(e){return n.B(t,e)})},t.prototype.A=function(t){return[].map.call(t,function(t){return t.value}).reduce(function(t,n){return t+n})},t.prototype.B=function(t,n){var r=[this.C,this.D];r.map(function(r){return e.map(function(e){return r(e,t,n)})})},t.prototype.C=function(t,n,e){if(e){var r=n.querySelectorAll("."+t);[].map.call(r,function(t){return t.value=""})}},t.prototype.D=function(t,n,e){var r={"p-region-id":e.k,"p-region":e.region,"p-locality":e.l,"p-street-address":e.m,"p-extended-address":e.o},o=n.querySelectorAll("."+t);[].map.call(o,function(n){return n.value+=r[t]?r[t]:""})},t}();YubinBango.MicroformatDom=t}(YubinBango||(YubinBango={})),document.addEventListener("DOMContentLoaded",function(){new YubinBango.MicroformatDom},!1); 2 | //# sourceMappingURL=./yubinbango.js.map -------------------------------------------------------------------------------- /yubinbango.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["node_modules/yubinbango-core/yubinbango-core.ts","yubinbango.ts"],"names":["CACHE","YubinBango","Core","inputVal","callback","this","URL","REGION","a","replace","s","String","fromCharCode","charCodeAt","b","match","c","join","yubin7","chk7","getAddr","addrDic","prototype","val","length","region_id","region","locality","street","extended","k","l","m","o","selectAddr","addr","jsonp","url","fn","window","data","scriptTag","document","createElement","setAttribute","head","appendChild","_this","yubin3","substr","ISO31661JP","HADRLIST","MicroformatDom","hadrloop","hadrs","querySelectorAll","map","call","hadr","countryNameCheck","postalcode","addEventListener","e","applyDom","getFormNode","target","parentNode","elm","tagName","classList","contains","querySelector","arr","innerHTML","value","some","indexOf","reduceVal","address","setAddr","reduce","fnlist","postalFormClear","postalFormSet","addrs","p-region-id","p-region","p-locality","p-street-address","p-extended-address"],"mappings":"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","file":"./yubinbango.js","sourceRoot":""} -------------------------------------------------------------------------------- /yubinbango.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | const ISO31661JP = ["Japan", "JP", "JPN", "JAPAN"]; 4 | const HADRLIST = ["p-region-id", "p-region", "p-locality", "p-street-address", "p-extended-address"]; 5 | module YubinBango { 6 | export class MicroformatDom { 7 | constructor( 8 | ) { 9 | this.hadrloop(); 10 | } 11 | hadrloop() { 12 | // HTML内のh-adr要素のリストに対して操作を行う 13 | const hadrs = document.querySelectorAll('.h-adr'); 14 | [].map.call(hadrs, (hadr) => { 15 | // country-name が日本かどうかチェック 16 | if (this.countryNameCheck(hadr)) { 17 | // 郵便番号の入力欄を取得 18 | const postalcode = hadr.querySelectorAll('.p-postal-code'); 19 | // 郵便番号入力欄が1つの場合でも3桁-4桁で2つに分かれている場合でも両方に対応するため、それぞれのh-adr内の中の最後のpostal-codeにkeyupイベントを付与する 20 | postalcode[postalcode.length - 1].addEventListener("keyup", (e)=>{ 21 | MicroformatDom.prototype.applyDom(this.getFormNode(e.target.parentNode)); 22 | }, false); 23 | } 24 | }); 25 | } 26 | getFormNode(elm){ 27 | return (elm.tagName !== "FORM" && !elm.classList.contains("h-adr"))? this.getFormNode(elm.parentNode) : elm; 28 | } 29 | // 日本かどうかチェックする 30 | countryNameCheck(elm) { 31 | const a = elm.querySelector('.p-country-name'); 32 | const arr:string[] = [a.innerHTML, a.value]; 33 | return (arr.some((val: string) => (ISO31661JP.indexOf(val) >= 0))) 34 | } 35 | applyDom(elm) { 36 | const postalcode = elm.querySelectorAll('.p-postal-code'); 37 | new YubinBango.Core(this.reduceVal(postalcode), (address) => this.setAddr(elm, address)); 38 | } 39 | reduceVal(postalcode: any[]): string { 40 | return [].map.call(postalcode, a => a.value).reduce((a, b) => a + b); 41 | } 42 | setAddr(elm, address) { 43 | const fnlist = [this.postalFormClear, this.postalFormSet]; 44 | // 住所欄に入力されているデータを削除 & 住所欄に入力 45 | fnlist.map((fn) => HADRLIST.map((val: string) => fn(val, elm, address))); 46 | } 47 | postalFormClear(val: string, elm, data?) { 48 | if (data){ 49 | const addrs = elm.querySelectorAll('.' + val); 50 | [].map.call(addrs, (addr) => { 51 | return addr.value = ''; 52 | }); 53 | } 54 | } 55 | postalFormSet(val: string, elm, data?) { 56 | const o = { 57 | "p-region-id": data.region_id, 58 | "p-region": data.region, 59 | "p-locality": data.locality, 60 | "p-street-address": data.street, 61 | "p-extended-address": data.extended 62 | }; 63 | const addrs = elm.querySelectorAll('.' + val); 64 | [].map.call(addrs, (addr) => { 65 | return addr.value += (o[val])? o[val] : ''; 66 | }); 67 | } 68 | } 69 | } 70 | document.addEventListener('DOMContentLoaded', () => { 71 | new YubinBango.MicroformatDom(); 72 | }, false); 73 | --------------------------------------------------------------------------------