バーコードスキャナープラグイン
この 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でビルドしてください。アプリのビルドが終わったら端末にインストールしてください。
以下はアプリの使い方です。
フッターのスキャンボタンをタップすると、スキャン画面が表示されます。
「スキャンする」リンクをタップすると、バーコードスキャナープラグインの機能でスキャナー画面へ遷移します。
スキャナーがバーコードを検知すると、スキャン画面に戻り、結果を表示します。
フッターの履歴ボタンをタップすると、スキャンした履歴が表示されます。
API リファレンス
ここでは、デモ で使用されている主な API やアプリのカスタマイズ方法についてのみ説明します。API リファレンスについては、こちら を参照してください。
カメラへのアクセス許可
バーコードスキャナーはカメラを使うため、カメラ利用に関する許諾が必要となります。これは各プラットフォームによって設定の作業が異なりますの注意してください。
iOSの場合
config.xmlの下記の設定で利用の助諾を求める設定をします。アプリに表示するメッセージは「need camera access to scan barcode」の部分を適宜変更してください。
この設定により、端末では下記のようなダイアログが表示されます。
Androidの場合
Monaca クラウド IDE のAndroidアプリ設定で、ターゲットSDKバージョンを31以上に設定します。
monaca.BarcodeScanner.scan()
スキャナ画面に遷移します。パラメーターの詳細についてはこちらを参照してください。
サンプルでは次のようなオプションを設定しています。
パラメーター名 | Value | 説明 |
---|---|---|
oneShot | true | trueにすることで、QRコード/バーコードを検知後、スキャナ画面を閉じるように設定 |
timeoutPrompt.show | true | 検出タイムアウト時のメッセージを表示するように設定 |
timeoutPrompt.timeout | 5 | 検出タイムアウト時間を5秒に設定 |
timeoutPrompt.prompt | Not detected | 検出タイムアウト時のメッセージを設定 |
timeoutPromptの設定により、バーコードを検知しない場合、下記のような画面が表示されます。
戻り値
scan関数の戻り値はcallback関数を用いて取得します。下記のような形式のオブジェクトを取得できます。
取得結果を保存する
本サンプルでは、バーコードスキャナープラグインで取得した結果をLocalstrage(ローカルストレージ)に保存しています。
アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください
最終更新