monaca 【5分で完成】QRバーコードリーダーを作る

Barcode Scannerのセットアップ

今日はmonacaを使ってQRバーコードリーダーを作ってみます。

アプリ開発はこれだけ!?NCMB・monaca・Onsen UIを使う プロジェクト作成の手順 monaca、UIのOnsen UI、mBaasのNCMBのプロジェクトを新規作成してみます。 mo...

デモアプリを作って、少しはまったので記録用でブログ書いてます。

※anguler版でもデバッガ―アプリでは動くので、ループしてました＠＠；

CordovaーBarcodeScanner プラグインを使います

ライブラリからプラグインを設定できるようになっています。

『設定』―『Cordovaプラグインの管理』をクリックします。

プラグインを検索して有効化

「barcode」のキーワードを入力すると、『BarcodeScanner』が表示されます。

『有効』ボタンをクリックします。

難しい設定なしでプラグインの設定を完了できます。

サンプルソースを利用する

monaca Docsのサンプルソースを利用して、index.htmlの使用する部分にソースに張り付けます。

■スクリプト部

function scanBarcode() {
　　window.plugins.barcodeScanner.scan( function(result) {
　　　　alert("We got a barcode\n" +
　　　　　　"Result: " + result.text + "\n" +
　　　　　　"Format: " + result.format + "\n" +
　　　　　　"Cancelled: " + result.cancelled);<
　　}, function(error) {
　　　　alert("Scanning failed: " + error);
　　}
　);
}

■body内ボタン

<input type="button" onClick ="scanBarcode()" value ="Scan" />

alert文をコーディングすることで、読み取り結果を使うことができます。resultオブジェクトのtextプロパティにバーコード値が入ります。

まとめ

Webアプリからでは難しいデバイスカメラや、GPSセンサーなど各種センサーも、アドインを使用することで容易に使用することができます。

QRバーコードリーダーはアプリ内での利用価値が高いので参考にしてみてください。

追記：エラーが発生した場合には参考にしてください。

https://ssit.jp/monaca-qr-barcode-error/