クレジットカードの読み取り機能を実装する！

##はじめに

先日、クレジットカードをiPhonのカメラで読みとり、入力フォームに自動で入力される機能の実装を行なったので記事を書きます！
この機能の実装自体は難しくなかったですが、httpsで接続していないとこの機能は動かないみたいで、動作を検証する際に悩みました。。

##やりたいこと
以下画像のように、クレカ読み取り機能で、クレカを枠内に入れたらフォームにクレカ情報が自動的に入力されるようにしたい。

※注意
・読み取れる項目は、カードナンバーと有効期限とカードのタイプのみのようです。名前とCVVは手動で入力する必要があります。 (今回は、カードナンバーと有効期限のみ)
・iOS8以上でないと、読み取り機能は正常に機能しないみたいなので注意が必要です！
・Angularのアプリケーション内で実装したのですが、Angular Materialの mat-selectタグを使用すると上手く行かなかったので、通常のselectタグを使用しました。→ mat-selectタグでも実装できた人教えてください！笑

##環境

環境はこんな感じです。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.7
Node: 14.15.1
OS: darwin x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.0.7
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.7
typescript                      4.0.7

##実装

View側

特別な実装は以下の3点かと思います。
・カードナンバーフォームのname属性として、「"cardNumber"」を指定する。
・有効期限（月）フォームのname属性として、「"cardExpirationMonth"」を指定する。
・有効期限(年)フォームのname属性として、「"cardExpirationYear"」を指定する。

<form [formGroup]="paymentForm" (ngSubmit)="onSubmit()">
  <div>
    <input id="cardNumber" name="cardNumber" formControlName="cardNumber"><br><br>
  </div>
  <div>
    <select formControlName="expiration_month" name="cardExpirationMonth">
      <option *ngFor="let m of monthList">
        {{ m + '月'}}
      </option>
    </select>
    <select formControlName="expiration_year" name="cardExpirationYear">
      <option *ngFor="let key of yearList">{{ key }}</option>
    </select>
  </div>
  <button type="submit">決定</button>
</form>

コンポーネント側
通常のReactvieFormを作成するのと特に変わっていることはありません。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit {


  // セレクトタグのフォームの部品となる「月」の配列
  public monthList = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];

  // セレクトタグのフォームの部品となる「年」の配列
  public yearList = [2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031];
  
  public paymentForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit(): void {
    this.paymentForm = this.fb.group({
      'cardNumber': ['', [Validators.required]],
      'expiration_month': ['', [Validators.required]],
      'expiration_year' : ['', [Validators.required]]
    })
  }

// 一旦入力された値をコンソールログに出力する。
  public onSubmit(): void {
    console.log(this.paymentForm.get('cardNumber').value);
    console.log(this.paymentForm.get('expiration_month').value);
    console.log(this.paymentForm.get('expiration_year').value);
  }

}

##ローカル環境での動作確認

これでフォームとしては、機能しますがhttpsで接続していないと機能しません。なので、ローカル環境での検証をどうしようかなと調べました。どうにかして、ローカル環境にhttps接続したい。。。

調べた結果...
ngrokというライブラリを使用すると、ローカル環境にhttpsで接続することができます！
※ローカル環境にどこからでもアクセスできるようになってしまう為、セキュリティー的には危険です。その辺りを意識しながら使用してください。

さっそくインストール！

$ brew install ngrok --cask

バージョンが確認できればインストール完了です。

$ ngrok -v
$ ngrok version 2.3.39

ローカル環境にhttps接続する為には以下のコマンドを実行します。

# ポート番号は自分が立ち上げているアプリケーションのポート番号を指定
$ ngrok http 4200 -host-header="localhost:4200" 

上記コマンドを実行したら、下記のように表示されます。
スマホでSafariを開き、ForwardingのURLをアレスバーに入力すると、ページが表示されるはずです。

ngrok by @inconshreveable                                                                                   (Ctrl+C to quit)
                                                                                                                            
Session Status                online                                                                                        
Session Expires               1 hour, 59 minutes                                                                            
Version                       2.3.39                                                                                        
Region                        United States (us)                                                                            
Web Interface                 http://127.0.0.1:4040                                                                         
Forwarding                    http://acf3da528cdc.ngrok.io -> http://localhost:4200                                         
Forwarding                    https://acf3da528cdc.ngrok.io -> http://localhost:4200                                        
                                                                                                                            
Connections                   ttl     opn     rt1     rt5     p50     p90                                                   
                              0       0       0.00    0.00    0.00    0.00   

httpsで接続して、inputフォームをクリックする、以下の画像のように入力欄が表示され、「クレジットカードを読み取る」という項目が表示されます。

この項目をクリックするとカメラが起動して、以下の画像のような表示になります。
枠内にクレジットカードを入れるとフォームに自動的に、カード番号、有効期限が入力されます。

これで実装とローカルでの動作確認は終わりです！

##まとめ
クレジットカードの読み取り機能は、もう少し難しい実装になると思いましたが、案外簡単にできました。
ローカル環境にhttps接続する方法もついでに学べたので、よかったです。
ngrokではなく、serveoというサービスを使用してもできるようですので、今度はそちらを触ってみようかと思っています。

何か間違えている部分やこうしたほうが良いってところがあれば、コメント等で教えて頂ければ嬉しいです！

##参考##
クレカ読み取りについて
https://qiita.com/okumura_daiki/items/c5c28117b999252e22ca

ngrokについて
https://qiita.com/T-Com/items/7f1468167f80df00a87d
https://qiita.com/kitaro0729/items/44214f9f81d3ebda58bd
https://www.mathkuro.com/mac/brew-cask-command-error/

serveoについて
https://qiita.com/kaba/items/53b297e2bfb5b4f20a48