QRコード/バーコードをスキャンするcordova-plugin-qr-barcode-scannerを試す

QRコードは世の中に広く普及しており、ちょっとしたメッセージ（URLなど）を送るのであれば、QRコードを使う場面が多くなっています。皆さんもQRコードを読み取る機能をアプリに追加したいと思うことがあるでしょう。

今回はQRコード読み取り（さらにバーコードも）機能を実現するcordova-plugin-qr-barcode-scannerの使い方を紹介します。

cordova-plugin-qr-barcode-scannerのインストール

cordova-plugin-qr-barcode-scannerはCordovaプラグインになりますので、Monacaの場合は「Cordovaプラグインの管理」から追加してください。

cordova-plugin-qr-barcode-scannerの使い方

インストールしたら、config.xmlにカメラ機能を求める際の説明文を追加します。

<allow-intent href="geo:*" />
<!-- 以下を追加（ここから） -->
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>QR/バーコードを読み取るためカメラを利用します</string>
</edit-config>
<!-- 以下を追加（ここまで） -->
<platform name="android">
    <allow-intent href="market:*" />
</platform>

cordova-plugin-qr-barcode-scannerはそのままだと昔ながらのコールバック方式になりますので、Promiseでラッピングすると使いやすくなります。今回はscanという関数にしました。

function scan(options) {
  return new Promise((res, rej) => {
    cordova.plugins.barcodeScanner.scan(res, rej, options);
  });
}

実際の呼び出し方ですが、次のようになります。

document.querySelector('button').onclick = async function() {
  const res = await scan();
  // 出力
  console.log(res);
}

初回実行時はカメラアクセスへの許可を求めるダイアログが出ます。

そして実行すると、カメラが立ち上がって緑色の枠が表示されます。

読み取れた場合、次のような形式でオブジェクトが返ってきます。カメラは自動的に閉じます。QRコードの場合、formatにQR_CODEと入っています。

{
  cancelled: 0,
  text: "https://ja.monaca.io/",
  format: "QR_CODE"
}

日本で普及しているバーコード（CODE39）も読み取れます。

{
  cancelled: 0,
  text: "MONACAF",
  format: "CODE_39"
}

書籍についているISBNは EAN_13 になります。

{
  cancelled: 0,
  text: "1920034018002", 
  format: "EAN_13"
}

そのほか、ITFという形式でも読み取れました。

{
  cancelled: 0,
  text: "12312345123456",
  format: "ITF"
}

キャンセルをタップすると cancelled が 1になります。

{
  cancelled: 1,
  text: "",
  format: ""
}

注意点

使ってみた実感ですが、読み取りに時間がかかるとうまくいかなくなることがあります。その場合は一旦キャンセルして、再度実行するとうまく読み取れました。

使いどころ

QRコードやバーコードを読み取る、いわゆるリーダー的なアプリが基本になるかと思います。またはQRコード読み取りを認証に使うこともできます。Webアプリケーションとスマートフォンアプリがあった場合、すでにログインしている端末でQRコードを読み取らせる（逆に読み取る）と認証できる仕組みを実現することもできます。読み取った後の処理で、正しく読み取れていることが保証できれば、ユーザはパスワード入力なしでログインすることができるでしょう。ほかにもSNSアカウントをフォローする機能として使うこともできるでしょう。

まとめ

QRコードは汎用性が高いので、アイディア次第でさまざまな使い方が考えられそうです。

https://www.npmjs.com/package/cordova-plugin-qr-barcode-scanner

cordova-plugin-qr-barcode-scannerのインストール

cordova-plugin-qr-barcode-scannerの使い方

注意点

使いどころ

まとめ

関連