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

この 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);
    });
}

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

戻り値

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

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

取得結果を保存する

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

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

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

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

前へWeb APIの利用方法次へCordova Sqlite Storage プラグイン

最終更新 1 年前