# バーコードスキャナープラグイン
この Cordova プラグインは、Monaca公式プラグインのバーコードスキャナープラグインを使用して Android、iOS上で QRコードやバーコードを読み込みます。
* Plugin ID/Package Name: `@monaca/monaca-plugin-barcode-scanner`
* Tested Version: 1.3.0
* Framework7: 6.3.16
{% hint style="info" %}
2022年9月8日現在、本プラグインを確認する場合は、カスタムビルドデバッガー ( [Android 版](https://ja.docs.monaca.io/products_guide/debugger/installation/debugger_android#kasutamubirudo-monaca-debaggnobirudotoinsutru) または [iOS 版](https://ja.docs.monaca.io/products_guide/debugger/installation/debugger_ios#kasutamubirudo-monaca-debaggnobirudo) ) を作成する必要があります。
{% endhint %}
## デモ
[
プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=64caf41fe788856230031eac)
## 使い方
* 本アプリをMonaca クラウド IDEでビルドしてください。アプリのビルドが終わったら端末にインストールしてください。
* 以下はアプリの使い方です。
* フッターのスキャンボタンをタップすると、スキャン画面が表示されます。
* 「スキャンする」リンクをタップすると、バーコードスキャナープラグインの機能でスキャナー画面へ遷移します。
* スキャナーがバーコードを検知すると、スキャン画面に戻り、結果を表示します。
* フッターの履歴ボタンをタップすると、スキャンした履歴が表示されます。
## API リファレンス
ここでは、[デモ](https://monaca.mobi/ja/directimport?pid=63195385e78885a3345a2894) で使用されている主な API やアプリのカスタマイズ方法についてのみ説明します。API リファレンスについては、[こちら](https://ja.docs.monaca.io/reference/power_plugins/monaca-plugin-scan-barcode) を参照してください。
### カメラへのアクセス許可
バーコードスキャナーはカメラを使うため、カメラ利用に関する許諾が必要となります。これは各プラットフォームによって設定の作業が異なりますの注意してください。
#### iOSの場合
config.xmlの下記の設定で利用の助諾を求める設定をします。アプリに表示するメッセージは「need camera access to scan barcode」の部分を適宜変更してください。
```html
need camera access to scan barcode
```
この設定により、端末では下記のようなダイアログが表示されます。
#### Androidの場合
Monaca クラウド IDE のAndroidアプリ設定で、ターゲットSDKバージョンを31以上に設定します。
#### monaca.BarcodeScanner.scan()
スキャナ画面に遷移します。パラメーターの詳細については[こちら](https://ja.docs.monaca.io/reference/power_plugins/monaca-plugin-scan-barcode#monaca.barcodescanner.scan)を参照してください。
サンプルでは次のようなオプションを設定しています。
{% code title="www/pages/scan.html" %}
```javascript
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);
});
}
```
{% endcode %}
| パラメーター名 | Value | 説明 |
| --------------------- | ------------ | ------------------------------------------ |
| oneShot | true | trueにすることで、QRコード/バーコードを検知後、スキャナ画面を閉じるように設定 |
| timeoutPrompt.show | true | 検出タイムアウト時のメッセージを表示するように設定 |
| timeoutPrompt.timeout | 5 | 検出タイムアウト時間を5秒に設定 |
| timeoutPrompt.prompt | Not detected | 検出タイムアウト時のメッセージを設定 |
timeoutPromptの設定により、バーコードを検知しない場合、下記のような画面が表示されます。
**戻り値**
scan関数の戻り値はcallback関数を用いて取得します。下記のような形式のオブジェクトを取得できます。
```json
{
"data":{
"text":"3068320128566",
"format":"EAN_13"
},
"cancelled":false
}
```
### 取得結果を保存する
本サンプルでは、バーコードスキャナープラグインで取得した結果をLocalstrage（ローカルストレージ）に保存しています。
```javascript
addScan ({ state }, scan) {
// 省略
localStorage.setItem('history', JSON.stringify(state.history))
}
```
アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください