# バーコードスキャナープラグイン
この 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 版](/products_guide/debugger/installation/debugger_android.md#kasutamubirudo-monaca-debaggnobirudotoinsutru) または [iOS 版](/products_guide/debugger/installation/debugger_ios.md#kasutamubirudo-monaca-debaggnobirudo) ) を作成する必要があります。
{% endhint %}
## デモ
[プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=64caf41fe788856230031eac)
## 使い方
* 本アプリをMonaca クラウド IDEでビルドしてください。アプリのビルドが終わったら端末にインストールしてください。
* 以下はアプリの使い方です。
* フッターのスキャンボタンをタップすると、スキャン画面が表示されます。
* 「スキャンする」リンクをタップすると、バーコードスキャナープラグインの機能でスキャナー画面へ遷移します。
* スキャナーがバーコードを検知すると、スキャン画面に戻り、結果を表示します。
* フッターの履歴ボタンをタップすると、スキャンした履歴が表示されます。
## API リファレンス
ここでは、[デモ](https://monaca.mobi/ja/directimport?pid=63195385e78885a3345a2894) で使用されている主な API やアプリのカスタマイズ方法についてのみ説明します。API リファレンスについては、[こちら](/reference/power_plugins/monaca-plugin-scan-barcode.md) を参照してください。
### カメラへのアクセス許可
バーコードスキャナーはカメラを使うため、カメラ利用に関する許諾が必要となります。これは各プラットフォームによって設定の作業が異なりますの注意してください。
#### 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))
}
```
アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ja.docs.monaca.io/tutorials/barcode-scanner.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=64caf41fe788856230031eac)