【Cordova】QRコードリーダーを実装するプラグイン「phonegap-plugin-barcodescanner」

今回はCordovaで開発しているアプリに、QRコードリーダーの機能を実装する方法について。
コードがかなり分かりやすかったのでおすすめのプラグインです。
使用したプラグインは「phonegap-plugin-barcodescanner」。
phonegap という名前が付いていますが、Cordovaでも問題なく使えます。

GitHubはこちらから。

GitHub – phonegap/phonegap-plugin-barcodescanner: cross-platform BarcodeScanner for Cordova / PhoneGap
https://github.com/phonegap/phonegap-plugin-barcodescanner

早速実装方法ですが、まず下記のコマンドでプラグインを追加します。

cordova plugin add phonegap-plugin-barcodescanner

プラグインの追加が終ったら、config.xml を確認します。
もし、下記の1行が追加されていなかったら追加してください。

<preference name="android-build-tool" value="gradle" />

また、iOSの場合は、info.plist に 「Privacy – Camera Usage Description」の項目を追加しないと、アプリからカメラが起動できないので、こちらも追加します。
設定はこのくらいです。

あとは、下記のコードを記述するだけです。

cordova.plugins.barcodeScanner.scan(
    function (result) {
        // QRコードの読み込み成功
        // 成功時の処理
        // Result: result.text
        // Format: result.format
        // Cancelled: result.cancelled
    }, 
    function (error) {
        // 読み込み失敗
        // 失敗時の処理
    }
);

上記のコードが実行されると、自動的にカメラを使用するかを尋ねるダイアログが表示され、許可を選択すると、画面内に四角形が表示されているQRコードリーダーが起動します。
で、カメラを適当に作成したQRコードにかざしたところ、無事コード内の情報を取得できました。

ちなみに、試しに作ったQRコードは、本記事のアイキャッチ画像でも使用しています。
なお、取得できるのはこのブログのURL https://cpoint-lab.co.jp/です。
このURLは、上記のコードでは、result.text で取得できます。
適当なコードが見つからない場合は、是非ご利用ください。

以上、CordovaアプリでQRコードリーダー機能を実装する方法でした。
最初はカメラを扱うということで、難しいのでは…と思っていましたが、実装が楽なプラグインのおかげでかなり簡単でした！
もし似たようなことを行いたいとお考えでしたら、是非ご参考にしてください。