Monacaでは一次元のバーコードや2次元のバーコードを読み込むアプリを作成できます。具体的には、JANコードやCODE39、QRコードなど様々なコードを読み込めます。

QRコードは(株)デンソーウェーブの登録商標です

諸注意

  • スマホのカメラでコードをスキャンするため、Monacaデバッガーが必要です。
  • 教育版のデバッガーである「Monaca for Study」のみ対応です(通常版のデバッガーでは動作しません)。
  • 通常版でコードを読み取る場合には「Proプラン以上」で「サードパーティー製プラグイン」である「PhoneGap BarcodeScanner プラグイン」を組み込んだ「カスタムビルド版デバッガー」を作成する必要があります。

教育版Monacaのデバッガー(Monaca for Study)では追加設定なく利用できます

文部科学省が推進する「教育の情報化」において教科書にQRコードが活用されていくことを鑑み、教育版Monacaではバーコードスキャナー機能をデバッガーアプリに標準で組み込むことに致しました。

PhoneGap BarcodeScanner プラグインについて

Monacaの中で使われているCordovaのサードパーティー製プラグインでバーコードを読み取ることができます。

phonegap-plugin-barcodescanner

サンプルプロジェクト

バーコードリーダーアプリ(zip)

ソースコード


    <script>
        let options = {
                preferFrontCamera : false,
                showFlipCameraButton : true,
                showTorchButton : true,
                torchOn: true, // Android only
                saveHistory: false, // Android only
                prompt : "スキャンエリアの中にバーコードを入れてください", // Android
                resultDisplayDuration: 500, // Android only
                formats : "all", 
                orientation : "unset", // Android only (portrait|landscape)
                disableAnimations : true, // iOS
                disableSuccessBeep: false // iOS and Android
        }
        function onSuccess (result) {
            alert("結果: " + result.text + "\n" +
                "バーコードの種類: " + result.format + "\n" +
                "スキャンが中断されたかどうか: " + result.cancelled);
        }
        function onError (error) {
            alert("スキャン失敗: " + error);
        }
        function scan() {
            cordova.plugins.barcodeScanner.scan(
                onSuccess,
                onError,
                options
            );
        }
    </script>
</head>
<body>
    <h1>バーコードリーダー<h1>
    <button onclick="scan()">スキャン</button>
</body>

解説

Monaca for Studyのデバッガーアプリ上で動かす限り、別途のJavaScriptライブラリは不要です。

cordova.plugins.barcodeScanner.scan()

この命令に、成功したときの処理と失敗したときの処理とオプションを渡せばOKです。

オプション

オプションでは、フロントカメラとリアカメラのどちらを使うか、や、読み込むバーコードの種類などを設定できます。

基本はそのままで動くのですが、Cordovaの公式ドキュメントではサンプルで「formats : “QR_CODE,PDF_417″」となっており、このまま動かすとJANコードなどが読み取れません。「formats : “all”」にしておけば、大体全部読み取れます。また、特定のフォーマットに絞り込みたいときは、対応したい物だけを列挙してください。

成功したときの処理

結果のオブジェクトが返ってきます。バーコードが示す文字列とフォーマット、それとスキャンが中断されたかどうかのフラグが返ってきます。

失敗したときの処理

スキャンが中断されたときと失敗したときの処理は分かれているようです。
例えば、カメラの使用許可が得られなかったときには、失敗の処理が呼ばれると思います(未確認)。

実行イメージ

ボタンを押したらscan命令を実行するようにしてみました。

カメラが起動してQRコードを読み取ります。

上手く行けばバーコードの文字列を取得できます。また、バーコードフォーマットの種類やスキャン中断の有無も確認できます。

バーコードのサンプル

動作確認用に幾つかのサンプルを置いておきます。

書籍のISBNコード(フォーマットはEAN_13と表示されます)

CODE39

QRコード

さいごに

ぜひ、上記サンプル以外の身近なバーコードも読み取ってみてください。
バーコードの種類や作り方についての解説は、改めて記事化いたします。