こんにちは、浦本です。
Monacaチームではユーザ様のご要望に応じて日々、機能追加を行っています。
先週のデバッガ＆フレームワークの新バージョンリリースでは、
PhoneGapのプラグインであるBarcodeScannerプラグインも搭載しました。
そこで今回は、このプラグインを用いて前回の記事で作成したQRコードリーダアプリと同様のアプリを作成してみたいと思います。
IDEを開いた様子
今回作成するアプリのスクリーンショット
起動時：
バーコードスキャン時：
結果テキストがURLだった場合：
結果テキストがURL以外だった場合：
バーコードスキャン時：
結果テキストが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;
}
以上となります。
こんなに楽ちんにバーコードと連携するアプリを作れちゃいます。皆様もぜひお試し下さい。