Asial Blog

Recruit! Asialで一緒に働きませんか?

MonacaでQRコードリーダを作ってみた - BarcodeScannerプラグイン編

カテゴリ :
Monaca
タグ :
Tech
Monaca
iPhone
Android
JavaScript
こんにちは、浦本です。

Monacaチームではユーザ様のご要望に応じて日々、機能追加を行っています。
先週のデバッガ&フレームワークの新バージョンリリースでは、
PhoneGapのプラグインであるBarcodeScannerプラグインも搭載しました。
そこで今回は、このプラグインを用いて前回の記事で作成したQRコードリーダアプリと同様のアプリを作成してみたいと思います。

IDEを開いた様子




今回作成するアプリのスクリーンショット



起動時:

バーコードスキャン時:

結果テキストがURLだった場合:

結果テキストがURL以外だった場合:



アプリ作成手順


Monacaにログイン後、ダッシュボードから新規プロジェクトを作成してください。その際、テンプレートとして「最小限のプロジェクト」を選択してください。

こちらからzepto.min.jsを入手し、それを「www/js」フォルダに配置してください。

以下のHTML、JS、CSSファイルを記述すればアプリ完成です!

【www/index.html】
メイン画面です。ボタン類と結果テキストを表示します。
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>QR Code Reader</title>
  6.   <script src="plugins/plugin-loader.js"></script>
  7.   <script>
  8.     monaca.viewport({width: 240});
  9.   </script>
  10.   <script src="js/zepto.min.js"></script>
  11.   <script src="js/app.js"></script>
  12.   <link rel="stylesheet" href="css/style.css">
  13. </head>
  14. <body>
  15.  
  16. <button id="ScanButton" type="button">スキャンする</button>
  17.  
  18. <br>
  19.  
  20. <p id="ResultMessage">ここに結果が表示されます。</p>
  21.  
  22. <button id="BrowserOpenButton" type="button" style="display: none;">URLをブラウザで開く</button>
  23.  
  24. </body>
  25. </html>

【www/js/app.js】
ボタンを押されたときの処理を記述します。
  1. $(function() {
  2.   
  3.   // 「スキャンする」を押したときのイベント
  4.   $("#ScanButton").click(function() {
  5.     scanBarcode();
  6.     return false;
  7.   });
  8.   
  9.   // 「ブラウザで開く」を押したときのイベント
  10.   $("#BrowserOpenButton").click(function() {
  11.     // invokeBrowserを用いてブラウザでURLを開く
  12.     monaca.invokeBrowser($("#ResultMessage").text());
  13.     return false;
  14.   });
  15.  
  16. });
  17.  
  18. // 「スキャンする」を押したときに実行される関数
  19. function scanBarcode() {
  20.   // BarcodeScannerプラグインを利用してスキャン
  21.   window.plugins.barcodeScanner.scan(
  22.     // 成功時に実行されるコールバック(キャンセル時も含む)
  23.     function(result) {
  24.       // キャンセルされたら何もしない
  25.       if (result.cancelled) {
  26.         return;
  27.       }
  28.       
  29.       // 結果テキストを表示
  30.       $("#ResultMessage").text(result.text);
  31.       
  32.       // URLなら「ブラウザで開く」ボタンを表示
  33.       if (result.text.indexOf("http") === 0) {
  34.         $("#BrowserOpenButton").show();
  35.       } else {
  36.         $("#BrowserOpenButton").hide();
  37.       }
  38.     },
  39.     // エラー時に実行されるコールバック
  40.     function(error) {
  41.       $("#ResultMessage").text(error);
  42.     }
  43.   );
  44. }

成功時のコールバックに渡される情報は、以下の形式となります。
  1. result = {
  2.   text: <string>, // 結果テキスト
  3.   cancelled: <boolean>,  // キャンセルされたかどうか
  4.   format: <string> // バーコード形式 (QR_CODE、UPC_Eなど)
  5. }

【www/css/style.css】
メイン画面のスタイルです。ボタンのスタイル生成には、こちらのサイトを利用しました。
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. body {
  7.   font-size: 90%;
  8.   text-align: center;
  9.   color: #222;
  10.   background: #FFF;
  11.   padding: 10px;
  12. }
  13.  
  14. #ResultMessage {
  15.   margin: 20px 0;
  16.   padding: 10px;
  17.   border: 1px solid #CCC;
  18. }
  19.  
  20. /* ボタンのスタイル */
  21. button {
  22.     
  23.     -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
  24.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
  25.     box-shadow:inset 0px 1px 0px 0px #ffe0b5;
  26.     
  27.     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
  28.     background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
  29.     background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
  30.     background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
  31.     background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
  32.     background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
  33.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
  34.     
  35.     background-color:#fbb450;
  36.     
  37.     -moz-border-radius:7px;
  38.     -webkit-border-radius:7px;
  39.     border-radius:7px;
  40.     
  41.     border:1px solid #c97e1c;
  42.     
  43.     display:inline-block;
  44.     color:#ffffff;
  45.     font-family:Trebuchet MS;
  46.     font-size:17px;
  47.     font-weight:bold;
  48.     padding:6px 11px;
  49.     text-decoration:none;
  50.     
  51.     text-shadow:0px 1px 0px #8f7f24;
  52.     
  53. }
  54. button:hover {
  55.     
  56.     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
  57.     background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
  58.     background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
  59.     background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
  60.     background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
  61.     background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
  62.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
  63.     
  64.     background-color:#f89306;
  65. }
  66. button:active {
  67.     position:relative;
  68.     top:1px;
  69. }

以上となります。
こんなに楽ちんにバーコードと連携するアプリを作れちゃいます。皆様もぜひお試し下さい。