バーコードスキャナープラグイン

この Cordova プラグインは、Monaca公式プラグインのバーコードスキャナープラグインを使用して Android、iOS上で QRコードやバーコードを読み込みます。

• Plugin ID/Package Name: @monaca/monaca-plugin-barcode-scanner

• Tested Version: 1.3.0

• Framework7: 6.3.16

2022年9月8日現在、本プラグインを確認する場合は、カスタムビルドデバッガー ( Android 版 または iOS 版 ) を作成する必要があります。

デモ

プロジェクトをインポート

使い方

• 本アプリをMonaca クラウド IDEでビルドしてください。アプリのビルドが終わったら端末にインストールしてください。

• 以下はアプリの使い方です。

  • フッターのスキャンボタンをタップすると、スキャン画面が表示されます。

  • 「スキャンする」リンクをタップすると、バーコードスキャナープラグインの機能でスキャナー画面へ遷移します。

  • スキャナーがバーコードを検知すると、スキャン画面に戻り、結果を表示します。

  • フッターの履歴ボタンをタップすると、スキャンした履歴が表示されます。

API リファレンス

ここでは、デモ で使用されている主な API やアプリのカスタマイズ方法についてのみ説明します。API リファレンスについては、こちら を参照してください。

カメラへのアクセス許可

バーコードスキャナーはカメラを使うため、カメラ利用に関する許諾が必要となります。これは各プラットフォームによって設定の作業が異なりますの注意してください。

iOSの場合

config.xmlの下記の設定で利用の助諾を求める設定をします。アプリに表示するメッセージは「need camera access to scan barcode」の部分を適宜変更してください。

<platform name="ios">
        <!-- 省略 -->
        <!-- 以下を追加 -->
        <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
                <string>need camera access to scan barcode</string>
        </edit-config>
</platform>

この設定により、端末では下記のようなダイアログが表示されます。

Androidの場合

Monaca クラウド IDE のAndroidアプリ設定で、ターゲットSDKバージョンを31以上に設定します。

monaca.BarcodeScanner.scan()

スキャナ画面に遷移します。パラメーターの詳細についてはこちらを参照してください。

サンプルでは次のようなオプションを設定しています。

www/pages/scan.html

const execute = () => {
    return new Promise((res, rej) => {
        const option = {
            "oneShot": true,
            "timeoutPrompt": {
                "show": true,
                "timeout": 5,
                "prompt": "Not detected"
            }
        }
        // バーコードスキャナー起動
        monaca.BarcodeScanner.scan(res, rej, option);
    });
}

パラメーター名	Value	説明
oneShot	true	trueにすることで、QRコード/バーコードを検知後、スキャナ画面を閉じるように設定
timeoutPrompt.show	true	検出タイムアウト時のメッセージを表示するように設定
timeoutPrompt.timeout	5	検出タイムアウト時間を5秒に設定
timeoutPrompt.prompt	Not detected	検出タイムアウト時のメッセージを設定

timeoutPromptの設定により、バーコードを検知しない場合、下記のような画面が表示されます。

戻り値

scan関数の戻り値はcallback関数を用いて取得します。下記のような形式のオブジェクトを取得できます。

{
    "data":{
        "text":"3068320128566",
        "format":"EAN_13"
    },
    "cancelled":false
}

取得結果を保存する

本サンプルでは、バーコードスキャナープラグインで取得した結果をLocalstrage（ローカルストレージ）に保存しています。

addScan ({ state }, scan) {
    // 省略

    localStorage.setItem('history', JSON.stringify(state.history))
}

アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください