> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/tutorials/barcode-scanner.md).

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

この 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 %}

## デモ

[<img src="https://docs.monaca.io/images/common/import_img.png" alt="" data-size="line">プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=64caf41fe788856230031eac)

<figure><img src="/files/32XqfqwHwz59un7vLh09" alt=""><figcaption></figcaption></figure>

## 使い方

* 本アプリを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
<platform name="ios">
        <!-- 省略 -->
        <!-- 以下を追加 -->
        <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
                <string>need camera access to scan barcode</string>
        </edit-config>
</platform>
```

この設定により、端末では下記のようなダイアログが表示されます。

![](/files/bP7w7AHqYRnUBMnTG7yT)

#### Androidの場合

Monaca クラウド IDE のAndroidアプリ設定で、ターゲットSDKバージョンを31以上に設定します。

![](/files/zF9Dg8ejdaVTlUKwBl2N)

#### 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の設定により、バーコードを検知しない場合、下記のような画面が表示されます。

![](/files/zTESrOThNu7h32I5hz4x)

**戻り値**

scan関数の戻り値はcallback関数を用いて取得します。下記のような形式のオブジェクトを取得できます。

```json
{
    "data":{
        "text":"3068320128566",
        "format":"EAN_13"
    },
    "cancelled":false
}
```

### 取得結果を保存する

本サンプルでは、バーコードスキャナープラグインで取得した結果をLocalstrage（ローカルストレージ）に保存しています。

```javascript
addScan ({ state }, scan) {
    // 省略

    localStorage.setItem('history', JSON.stringify(state.history))
}
```

アプリの要件によって、クラウド上のデータベースに保存するなど、適宜変更してください