2012年12月14日

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

こんにちは、浦本です。

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

IDEを開いた様子

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

起動時：

バーコードスキャン時：

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

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

アプリ作成手順

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

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

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

【www/index.html】
メイン画面です。ボタン類と結果テキストを表示します。


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>QR Code Reader</title>
  <script src="plugins/plugin-loader.js"></script>
  <script>
    monaca.viewport({width: 240});
  </script>
  <script src="js/zepto.min.js"></script>
  <script src="js/app.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="ScanButton" type="button">スキャンする</button>
<br>
<p id="ResultMessage">ここに結果が表示されます。</p>
<button id="BrowserOpenButton" type="button" style="display: none;">URLをブラウザで開く</button>
</body>
</html>

【www/js/app.js】
ボタンを押されたときの処理を記述します。


$(function() {
  
  // 「スキャンする」を押したときのイベント
  $("#ScanButton").click(function() {
    scanBarcode();
    return false;
  });
  
  // 「ブラウザで開く」を押したときのイベント
  $("#BrowserOpenButton").click(function() {
    // invokeBrowserを用いてブラウザでURLを開く
    monaca.invokeBrowser($("#ResultMessage").text());
    return false;
  });
});
// 「スキャンする」を押したときに実行される関数
function scanBarcode() {
  // BarcodeScannerプラグインを利用してスキャン
  window.plugins.barcodeScanner.scan(
    // 成功時に実行されるコールバック（キャンセル時も含む）
    function(result) {
      // キャンセルされたら何もしない
      if (result.cancelled) {
        return;
      }
      
      // 結果テキストを表示
      $("#ResultMessage").text(result.text);
      
      // URLなら「ブラウザで開く」ボタンを表示
      if (result.text.indexOf("http") === 0) {
        $("#BrowserOpenButton").show();
      } else {
        $("#BrowserOpenButton").hide();
      }
    },
    // エラー時に実行されるコールバック
    function(error) {
      $("#ResultMessage").text(error);
    }
  );
}

成功時のコールバックに渡される情報は、以下の形式となります。


result = {
  text: <string>, // 結果テキスト
  cancelled: <boolean>,  // キャンセルされたかどうか
  format: <string> // バーコード形式 (QR_CODE、UPC_Eなど)
}

【www/css/style.css】
メイン画面のスタイルです。ボタンのスタイル生成には、こちらのサイトを利用しました。


* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 90%;
  text-align: center;
  color: #222;
  background: #FFF;
  padding: 10px;
}
#ResultMessage {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #CCC;
}
/* ボタンのスタイル */
button {
    
    -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
    box-shadow:inset 0px 1px 0px 0px #ffe0b5;
    
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
    background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
    background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
    background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
    background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
    background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
    
    background-color:#fbb450;
    
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    
    border:1px solid #c97e1c;
    
    display:inline-block;
    color:#ffffff;
    font-family:Trebuchet MS;
    font-size:17px;
    font-weight:bold;
    padding:6px 11px;
    text-decoration:none;
    
    text-shadow:0px 1px 0px #8f7f24;
    
}
button:hover {
    
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
    background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
    background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
    background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
    background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
    background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
    
    background-color:#f89306;
}
button:active {
    position:relative;
    top:1px;
}