Giter Club home page Giter Club logo

yubinbango-core's Introduction

YubinBangoについて

これまでにない設定方法(なんとclassを指定するだけ!)のまったく新しいライブラリが誕生いたしました!
このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。

背景

設置後の郵便番号データの更新作業から解放される革新的なライブラリajaxzip3の公開から8年。Google Codeの閉鎖の告知とともにGithubに移行しましたが、これを機にTypescriptの新しいコードベースに移行することに。さらに郵便番号データの更新をGithub Actionsで自動化いたしました。
新しいコードは基本機能のみを抽出したCoreモジュールと、これまでのajaxzip3と互換性を保つためのモジュール、さらにまったく新しいYubinBangoライブラリの3つのモジュールと、Coreライブラリから参照される郵便番号データで構成されています。コードを見直すことによりさらに軽量化いたしました。 もちろん郵便番号が全角数字で入力された場合は半角数字に自動変換します。ハイフンが入力されても動作します。

YubinBangoの設定方法

今度の郵便番号検索ライブラリは、なんとclassを指定するだけ!
下記のようにmicroformats2の標準仕様に合わせたclassを記載をするだけで郵便番号検索機能が有効になります。

    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span><input type="text" class="p-postal-code" size="8" maxlength="8"><br>

      <input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
    </form>

その他の設定方法

住所欄を分ける場合は下記のようにします。

    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span><input type="text" class="p-postal-code" size="3" maxlength="3">
      <input type="text" class="p-postal-code" size="4" maxlength="4"><br>

      <input type="text" class="p-region" readonly /><br>
      <input type="text" class="p-locality" readonly /><br>
      <input type="text" class="p-street-address" /><br>
      <input type="text" class="p-extended-address" />
    </form>

YubinBangoライブラリを有効にするには?

YubinBangoが有効になる条件は下記の通りとなります。

  1. scriptタグでYubinBangoライブラリが読み込まれていること
    例: <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  2. formタグのclass指定の中に h-adr が含まれていること
    例: <form class="h-adr">
  3. form中で、国名(p-country-name) が Japan に指定されていること
    例1: <span class="p-country-name" style="display:none;">Japan</span>
    例2: <input type="hidden" class="p-country-name" value="Japan">
  4. 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
    例1: 〒<input type="text" class="p-postal-code" size="8" maxlength="8">
    例2: 〒<input type="text" class="p-postal-code" size="3" maxlength="3"><input type="text" class="p-postal-code" size="4" maxlength="4">
  5. 住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること

yubinbango-core's People

Contributors

koba-ninkigumi avatar shota avatar thujikun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yubinbango-core's Issues

TypeScriptでstrictモードを有効化すると発生するエラー

@koba-ninkigumi san

概要

発生内容

TypeScriptでstrictモードで利用するとImplicit any等のエラーが発生するようです。

対応について

エラー改修する想定等ありますでしょうか?
もし予定が無いようであれば、私からPR送ってもよろしいでしょうか?

エラー詳細

エラーログ
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(1,5):
1:5 Variable 'CACHE' implicitly has type 'any[]' in some locations where its type cannot be determined.
  > 1 | let CACHE = [];
      |     ^
    2 | module YubinBango {
    3 |   export class Core {
    4 |     URL = 'https://yubinbango.github.io/yubinbango-data/data';
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(6,7):
6:7 Type 'null' is not assignable to type 'string'.
    4 |     URL = 'https://yubinbango.github.io/yubinbango-data/data';
    5 |     REGION: string[] = [
  > 6 |       null, '北海道', '青森県', '岩手県', '宮城県',
      |       ^
    7 |       '秋田県', '山形県', '福島県', '茨城県', '栃木県',
    8 |       '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県',
    9 |       '新潟県', '富山県', '石川県', '福井県', '山梨県',
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(17,40):
17:40 Parameter 'callback' implicitly has an 'any' type.
    15 |       '宮崎県', '鹿児島県', '沖縄県'
    16 |     ];
  > 17 |     constructor(inputVal: string = '', callback?) {
       |                                        ^
    18 |       if(inputVal){
    19 |         // 全角の数字を半角に変換 ハイフンが入っていても数字のみの抽出
    20 |         const a:string = inputVal.replace(/[0-9]/g, (s: string) => String.fromCharCode(s.charCodeAt(0) - 65248));
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(21,15):
21:15 Type 'RegExpMatchArray | null' is not assignable to type 'RegExpMatchArray'.
  Type 'null' is not assignable to type 'RegExpMatchArray'.
    19 |         // 全角の数字を半角に変換 ハイフンが入っていても数字のみの抽出
    20 |         const a:string = inputVal.replace(/[0-9]/g, (s: string) => String.fromCharCode(s.charCodeAt(0) - 65248));
  > 21 |         const b:RegExpMatchArray = a.match(/\d/g);
       |               ^
    22 |         const c:string = b.join('');
    23 |         const yubin7: string = this.chk7(c);
    24 |         // 7桁の数字の時のみ作動
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(23,15):
23:15 Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.
    21 |         const b:RegExpMatchArray = a.match(/\d/g);
    22 |         const c:string = b.join('');
  > 23 |         const yubin7: string = this.chk7(c);
       |               ^
    24 |         // 7桁の数字の時のみ作動
    25 |         if (yubin7) {
    26 |           this.getAddr(yubin7, callback);
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(48,49):
48:49 Element implicitly has an 'any' type because index expression is not of type 'number'.
    46 |     selectAddr(addr: string[]):{[key:string]: string} {
    47 |       if (addr && addr[0] && addr[1]) {
  > 48 |         return this.addrDic(addr[0],this.REGION[addr[0]],addr[1],addr[2],addr[3])
       |                                                 ^
    49 |       } else {
    50 |         return this.addrDic()
    51 |       }
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(53,24):
53:24 Parameter 'fn' implicitly has an 'any' type.
    51 |       }
    52 |     }
  > 53 |     jsonp(url: string, fn) {
       |                        ^
    54 |       window['$yubin'] = (data) => fn(data);
    55 |       const scriptTag = document.createElement("script");
    56 |       scriptTag.setAttribute("type", "text/javascript");
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(54,14):
54:14 Element implicitly has an 'any' type because index expression is not of type 'number'.
    52 |     }
    53 |     jsonp(url: string, fn) {
  > 54 |       window['$yubin'] = (data) => fn(data);
       |              ^
    55 |       const scriptTag = document.createElement("script");
    56 |       scriptTag.setAttribute("type", "text/javascript");
    57 |       scriptTag.setAttribute("charset", "UTF-8");
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(54,27):
54:27 Parameter 'data' implicitly has an 'any' type.
    52 |     }
    53 |     jsonp(url: string, fn) {
  > 54 |       window['$yubin'] = (data) => fn(data);
       |                           ^
    55 |       const scriptTag = document.createElement("script");
    56 |       scriptTag.setAttribute("type", "text/javascript");
    57 |       scriptTag.setAttribute("charset", "UTF-8");
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(61,29):
61:29 Parameter 'fn' implicitly has an 'any' type.
    59 |       document.head.appendChild(scriptTag);
    60 |     }
  > 61 |     getAddr(yubin7: string, fn):{[key:string]: string} {
       |                             ^
    62 |       const yubin3 = yubin7.substr(0, 3);
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
    64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(61,33):
61:33 Function lacks ending return statement and return type does not include 'undefined'.
    59 |       document.head.appendChild(scriptTag);
    60 |     }
  > 61 |     getAddr(yubin7: string, fn):{[key:string]: string} {
       |                                 ^
    62 |       const yubin3 = yubin7.substr(0, 3);
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
    64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(64,21):
64:21 Variable 'CACHE' implicitly has an 'any[]' type.
    62 |       const yubin3 = yubin7.substr(0, 3);
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
  > 64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
       |                     ^
    65 |         return fn(this.selectAddr(CACHE[yubin3][yubin7]));
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(64,40):
64:40 Variable 'CACHE' implicitly has an 'any[]' type.
    62 |       const yubin3 = yubin7.substr(0, 3);
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
  > 64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
       |                                        ^
    65 |         return fn(this.selectAddr(CACHE[yubin3][yubin7]));
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(64,46):
64:46 Element implicitly has an 'any' type because index expression is not of type 'number'.
    62 |       const yubin3 = yubin7.substr(0, 3);
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
  > 64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
       |                                              ^
    65 |         return fn(this.selectAddr(CACHE[yubin3][yubin7]));
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(65,35):
65:35 Variable 'CACHE' implicitly has an 'any[]' type.
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
    64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
  > 65 |         return fn(this.selectAddr(CACHE[yubin3][yubin7]));
       |                                   ^
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
    68 |           CACHE[yubin3] = data;
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(65,41):
65:41 Element implicitly has an 'any' type because index expression is not of type 'number'.
    63 |       // 郵便番号上位3桁でキャッシュデータを確認
    64 |       if (yubin3 in CACHE && yubin7 in CACHE[yubin3]) {
  > 65 |         return fn(this.selectAddr(CACHE[yubin3][yubin7]));
       |                                         ^
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
    68 |           CACHE[yubin3] = data;
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(67,49):
67:49 Parameter 'data' implicitly has an 'any' type.
    65 |         return fn(this.selectAddr(CACHE[yubin3][yubin7]));
    66 |       } else {
  > 67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
       |                                                 ^
    68 |           CACHE[yubin3] = data;
    69 |           return fn(this.selectAddr(data[yubin7]));
    70 |         });
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(68,11):
68:11 Variable 'CACHE' implicitly has an 'any[]' type.
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
  > 68 |           CACHE[yubin3] = data;
       |           ^
    69 |           return fn(this.selectAddr(data[yubin7]));
    70 |         });
    71 |       }
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(68,17):
68:17 Element implicitly has an 'any' type because index expression is not of type 'number'.
    66 |       } else {
    67 |         this.jsonp(`${this.URL}/${yubin3}.js`, (data) => {
  > 68 |           CACHE[yubin3] = data;
       |                 ^
    69 |           return fn(this.selectAddr(data[yubin7]));
    70 |         });
    71 |       }
ERROR in /path/to/node_modules/yubinbango-core2/yubinbango-core.ts(76,1):
76:1 Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead.
    74 | }
    75 | 
  > 76 | export = YubinBango;
       | ^
    77 |

000から始まる番号で404となりエラーになる

yubinbango-data000.js はありませんが、 000 のチェックがされていないため 000 始まりの番号が入力された際、

document.head.appendChild(scriptTag);

ここで404エラーになります。

if(inputVal){

ここの最初の形式チェックで 000 を明示的に弾くか、 yubinbango-data の方にダミーの 000.js を作成する必要があるのではないかと思います。

YubinBango module が export されていない

yubinbango-core を Webpack + ES6 のプロジェクトから利用しようと思っているのですが、YubinBango module がエクスポートされていないため、外部から Core を参照することができなくなってしまっています。対策としては下記の修正提案の通り export = の行を追加するだけで良いかと思います。(が、TypeScript に詳しくないためこれが最適な方法かどうかはちょっと自信がないです。)

修正提案

let CACHE = [];
module YubinBango {
    ...
}

export = YubinBango;    // <-- この1文が不足している

利用側

import { Core as YubinBangoCore } from 'yubinbango-core';

new YubinBangoCore('xxx-xxxx', address => { ... });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.