スポンサーリンク
技術情報

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

monaca でQRバーコードリーダーを作る

Barcode Scannerのセットアップ

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

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

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

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

Google先生にて検索してみると2012年のサンプルが出てきます。
【JS/CSSコンポーネントの追加と削除】から検索すると
『anguler-phonegap-barcodeScanner』が出てきますMonaca Debuggerでは動きますがAndroidビルドアプリでは反応なしになります

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

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

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

monaca でBarcodeScanner プラグインを使います

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

「barcode」のキーワードを入力すると、『BarcodeScanner』が表示されます。
monaca でBarcodeScanner プラグインを検索

『有効』ボタンをクリックします。
monaca でBarcodeScanner プラグインを有効化ボタンをクリック

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

※『有効化』することでComponents/loader.jsでロードできるようになります。

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

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バーコードリーダーはアプリ内での利用価値が高いので参考にしてみてください。

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

monaca 【エラー発生】QRリーダーが動かない!?エラー対処方法!! エラー発生!?カメラが起動しない@@; 前回QRコードリーダーアプリの開発方法を紹介しました。 https://ssit.j...