バーコードスキャナープラグイン
この Cordova プラグインは、Monaca公式プラグインのバーコードスキャナープラグインを使用して Android、iOS上で QRコードやバーコードを読み込みます。
- Plugin ID/Package Name:
@monaca/monaca-plugin-barcode-scanner - Tested Version: 1.3.0
- Framework7: 6.3.16
- 本アプリをMonaca クラウド IDEでビルドしてください。アプリのビルドが終わったら端末にインストールしてください。
- 以下はアプリの使い方です。
- フッターのスキャンボタンをタップすると、スキャン画面が表示されます。
- 「スキャンする」リンクをタップすると、バーコードスキャナープラグインの機能でスキャナー画面へ遷移します。
- スキャナーがバーコードを検知すると、スキャン画面に戻り、結果を表示します。
- フッターの履歴ボタンをタップすると、スキャンした履歴が表示されます。
バーコードスキャナーはカメラを使うため、カメラ利用に関する許諾が必要となります。これは各プラットフォームによって設定の作業が異なりますの注意してください。
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>
この設定により、端末では下記のようなダイアログが表示されます。
Monaca クラウド IDE のAndroidアプリ設定で、ターゲットSDKバージョンを31以上に設定します。
サンプルでは次のようなオプションを設定しています。
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))
}
アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください
最終更新 29d ago