Ionic+AnglerJSでブラウザでQRやバーコードのReader

# Ionic+AnglerJSでブラウザでQRやバーコードのReader

Ionicでウェブアプリ的にQRなどのコードリーダーの実装に関するメモ

※開発環境がSSL必須になるので下記の記事でIonicのSSLするとちょうど良いです
https://qiita.com/mmt/items/78c2d76f3c648fc757a2

##開発環境

ブラウザはChromeのみ動作確認してます。

Ionicは新しいプロジェクト構築したあとの状態を想定しています。
「home」のページに機能を追加する想定です。
メモのため実際にIonicのページを最初から構築していないため、動作不良があるかもしれません。
ご了承ください。。

```
package.json
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"@zxing/ngx-scanner": "^2.0.1",
```

```
ionic -v
5.2.5
```



## 手順
1. ngモジュールのインストールと初期設定
2. 動作サンプル用HTMLとtsの実装
3. Ionic実行

###1. ngモジュールのインストールと初期設定

####モジュールインストール

```
//コンソール
npm i @zxing/ngx-scanner@latest --save
```

####初期設定

利用したいPageモジュールに利用を宣言
**src/app/my/my.module.ts**

**import** の末尾に下記を追加

```
import { ZXingScannerModule } from '@zxing/ngx-scanner';
```

**@NgModule**の**imports**の最後に**ZXingScannerModule**を追加

```
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ZXingScannerModule
  ],
```

追加した後の**src/app/home/home.module.ts**

```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { ZXingScannerModule } from '@zxing/ngx-scanner';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ZXingScannerModule
  ],
  declarations: [
    HomePage
  ]
})
export class HomePage{}
```

###2. 動作サンプルの実装

#### home.page.html にzxingタグ(カメラ読み込み)を追加

```
<zxing-scanner 
[formats]="allowedFormats" 
(camerasFound)="camerasFoundHandler($event)" 
(scanSuccess)="scanSuccessHandler($event)"
></zxing-scanner>
```

設定できるプロパティはコチラにまとめてあるみたいです
https://github.com/zxing-js/ngx-scanner/wiki/Advanced-Usage

#### home.page.ts にフォーマット指定と関数取得を追加

**import** の末尾に下記を追加

```
import { BarcodeFormat } from '@zxing/library';
```

**export class FieldPage implements OnInit {**に**allowedFormats**を追加
HTMLに記載した[formats]に渡す情報、読み込む形式を指定できる
バーコードやQR検知するなど

```
  allowedFormats = [
    BarcodeFormat.QR_CODE,
    BarcodeFormat.EAN_13,
    BarcodeFormat.CODE_128,
    BarcodeFormat.DATA_MATRIX
  ];
```

**export class FieldPage implements OnInit {**に**camerasFoundHandler()**と**scanSuccessHandler()**を追加
HTMLに記載した(camerasFound)(scanSuccess)の結果を受け取る
取得できるカメラ一覧と読み込み結果がある場合の受け取り

```
  camerasFoundHandler(evt: any) {
    console.log('camerasFoundHandler');
    console.log(evt);
  }
  scanSuccessHandler(evt: any) {
    console.log('scanSuccessHandler');
    console.log(evt);
  }
```

追加した後の**src/app/home/home.page.ts**

```
import { Component } from '@angular/core';
import { BarcodeFormat } from '@zxing/library';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  allowedFormats = [
    BarcodeFormat.QR_CODE,
    BarcodeFormat.EAN_13,
    BarcodeFormat.CODE_128,
    BarcodeFormat.DATA_MATRIX
  ];
  constructor() {}
  camerasFoundHandler(evt: any) {
    console.log('camerasFoundHandler');
    console.log(evt);
  }
  scanSuccessHandler(evt: any) {
    console.log('scanSuccessHandler');
    console.log(evt);
  }
}
```

### 3. Ionic実行

SSLの状態で実行が必要なので下記コマンド

```
ionic serve --ssl --key-path=./.ionic/ssl/key.pem --cert-path=./.ionic/ssl/cert.pem
```

**保護されていないサイト**だよって言われるけど、警告を無視して表示してます。。

### バーコード的なや色々

初めて見る形式もあったので余談的にGoogleの検索結果をリスト

- [QR_CODE](https://www.google.com/search?biw=1626&bih=758&tbm=isch&sxsrf=ACYBGNSBbq8hyYoSEQDVS6cddoCAy9-KFg%3A1568103845968&sa=1&ei=pV13XcLlOs-soATrm4SgDg&q=QR_CODE&oq=QR_CODE&gs_l=img.3..0i19j0i30i19l9.126976.126976..127544...0.0..0.78.78.1......0....2j1..gws-wiz-img.9AaBIqsBqWM&ved=0ahUKEwiCzNaF6sXkAhVPFogKHesNAeQQ4dUDCAY&uact=5)

- [EAN_13](https://www.google.com/search?q=EAN_13&sxsrf=ACYBGNQ8kZqgEN9DwJ9KNWQphyEqB4-cog:1568100836828&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjVmOfq3sXkAhUUyYsBHRNTBUUQ_AUIEygC&biw=1626&bih=758)

- [CODE_128](https://www.google.com/search?q=CODE_128&sxsrf=ACYBGNRqxm6hOOFV1Myr4cNpef1UCeXeeA:1568100833066&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiszoHp3sXkAhVpGaYKHUtfBY8Q_AUIEigB&biw=1626&bih=758)

- [DATA_MATRIX](https://www.google.com/search?q=DATA_MATRIX&sxsrf=ACYBGNRp_ev1lBhTgDRfYR0adTBRdTaIXA:1568100841907&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjzmJ3t3sXkAhUBE6YKHUyFDOkQ_AUIEigB&biw=1490&bih=758#imgrc=kf7waMNpVK_3UM:)







## 参考サイト
- @zxing/ngx-scanner<br>https://github.com/zxing-js/ngx-scanner
- @zxing/ngx-scanner GettingStart<br>https://github.com/zxing-js/ngx-scanner/wiki/Getting-Started
- ZXing TypeScript Examples<br>https://zxing-js.github.io/library/