AngularでQRする
はじめに
この記事は、下記のVersionでお送りします。
- Angular CLI : 7.0.3
どんな風に動作する？
こんな感じです。ちょっと見えづらいですが
一番下部で数字をカウントしているのがQRコードの読み取り結果です。
QRは2秒毎に0からカウントアップしていき、秒数をQRコードに変換しています。
QRコードの読み取りは早い方ではないでしょうか？
AngularでQRコードを読む
使用するライブラリ
QRコードを読むライブラリとしては、ネイティブではZxingが有名だと思います。
Angular用のZxingライブラリのngx-scannerが開発されいますので
今回はそれを使用しようと思います。
注意
今、iOS12でQRを読み込んでくれないバグが存在するようです。
が、上のGifの通り動作していますね。
Angular6 + ngx-scannerの食い合わせが悪いのかもしれません。
(今回、Angularはv7を使いました）
次のリリースで解決するとアナウンスはされていますが、使用する際は注意が必要です。
IOS12 iphone/ipad · Issue #140 · zxing-js/ngx-scanner · GitHub
ngx-scannerの事始め
QRコードの読み取り機能自体は、非常に簡単に使用することができます。
npm i @zxing/ngx-scanner --saveして
Angularでは恒例の、ngModuleでインストールしたライブラリを読み込んでやってから
Htmlテンプレートで<zxing-scanner></zxing-scanner>だけで使用できます。
ただし、Webカメラを使用する必要があるため
それを使用できるようにするまでで、ひと手間必要です。
デバイスで使用できるカメラを取得する
zxing-scanner コンポーネントで使用できるカメラを探してくれます。
結果は、コンポーネントの camerasFound ファンクションに
Obserbableで返却されます。
<zxingcomponent>.camerasFound.subscrive( devices => { hogehoge } ) で
引っ掛けて使用できるカメラデバイスを把握し
使用するカメラを選択する必要があります。
使用するカメラをコンポーネントの device プロパティに食わせて
使用できる状態にする必要があります。
簡単に書くと下記な感じでしょうか？
<zxingcomponent>.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
<zxingcomponent>.device = <zxingcomponent>.getDeviceById(devices["index?"].deviceId);
});
ただ、カメラデバイスを見つけた時のObservableのみでdeviceを設定すると
好きなカメラに変更できないので
<zxingcomponent>.device に食わせる値は変数にして
取得した devices を保持して変更できるようにしておいたほうが良いです。
プロパティに使用するカメラの情報を食わせると
カメラを使用してQRを読み込んでくれるようになります。簡単ですね。
読み取り結果を取得する
Scanした結果は、Zxingコンポーネントの 'scanSuccess' ファンクションに
Observableで返却されます。
<zxingcomponent>.scanSuccess().subscribe(result: string => { }) で
結果を引っ掛けるだけでOKです。
camerasFound も scanSuccess もEventEmitterで結果が返却されているようなので
<zxing-scanner (camerasFound)="hogehoge()" (scanSuccess)="fugafuga()" >...
としてもいいと思います。これも非常に簡単ですね。
AngularでQRコードを生成する
使用するライブラリ
ngx-scannerで紹介されていた ngx-kjua を使用します。
ngx-kjuaことはじめ
npm install ngx-kjua --save して、同様にngModuleでライブラリを読み込んでから
Htmlテンプレートで<ngx-kjua></ngx-kjua> で使用できます。
カメラ等のデバイスを使用しないため、特に前段階の準備をすることなく使用できます。
QRコードにしたい文字列かimageをコンポーネントのプロパティに下の感じで指定するだけで
QRコードが生成されます。超楽です。
<ngx-kjua [text]="'qrにしたい文字列'"></ngx-kjua>
さいごに
QRコードを用いたアプリケーションを比較的容易に作成することができます。
いろいろと利用できる範囲も広いですし、楽しい使い方もできると思います。
今回作成したWebApplicationは、下記レポジトリで管理してます。
Angularの勉強で使用したソースのごった煮ですが、ご容赦ください。
