Monaca Docs
検索
K

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

この 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))
}
アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください