バーコードリーダーを使ったアプリ開発(QRコード対応/スマホ対応/無線対応)
QRコード読み取り対応のBluetoothバーコードリーダを入手したので、バーコードリーダを使った簡単なWebアプリを作ってみました。
私は、バーコードリーダが特殊なデバイスだと思っていたので、専用ドライバをインストールしたり、スマホから利用するならネイティブアプリ(リーダの読み取り結果を受け取って処理する仕組み)を自作する必要があると思っていましたが、汎用のバーコードリーダは、もっと簡単な仕組みで利用できることがわかりました。
概要
実はバーコードリーダーは、外付けキーボードと同じ動きをしますので、QRコード読み込み→文字列に変換→入力欄に入力→送信としているだけです。
キーボードから直接ID文字列打つ代わりにピッてやってるだけです。
そんなわけでWebアプリでも特殊な処理なく入力を受け取れます。つまりスマホでネイティブアプリ化する必要もなく、Win/macでも専用ドライバ不要です。
一方で、入力欄にフォーカスしていないと文字が入らない、日本語変換IMEが有効だと意図した挙動をしないなど、別の配慮が必要になります。
作成したデモサイト
https://lab.tech-guild.com/barcode/
音が鳴るので注意
バーコードリーダがなくても入力欄に”00163a”, “00294d”, “00830f”と入れるとカウントされます。
これを見ると、「え？ただ文字入れて送信してるだけじゃん」と思うと思います。
Webアプリ(PCから利用)
動作する様子の動画
https://tech-guild.com/wp/wp-content/uploads/2019/06/img_7675.mov
在庫棚卸チェックをイメージして、商品QRを読み取る場面としました。
QRコードを大きく印刷してしまったので、リーダと紙の距離を取る必要がありました。縮小すればもう少し短距離で読み取りできると思います。
Webアプリ(スマホから利用)
動作する様子の動画
https://tech-guild.com/wp/wp-content/uploads/2019/06/img_7680.mov
リーダーがBluetooth対応しているので、iPhone/iPadに接続して、iOSでも利用できます。ただし、キーボード設定によっては日本語入力変換モードなっているため、リーダーがENTERキーを押しても送信されません。またフォーカスがはずれていると入力されないため、QRコード入力、画面ボタンタッチのようなオペレーションを想定していると結構面倒だと感じます。
Bluetooth再接続の様子
https://tech-guild.com/wp/wp-content/uploads/2019/06/img_7679.mov利用した製品
Eyoyo ブルートゥース バーコードリーダー 2.4 Gドングル 設定不要 高速読み取 1D 2D QR ワイヤレス バーコードスキャナー 有線 無線対応 USBケーブル付き 3in1手持ち式 スキャナー iPad iPhone Android Windowsタブレット スマホ 対応 店舗・オフィス・物流・倉庫・図書館 適用
https://www.amazon.co.jp/dp/B07R9SFYKW/
開封してすぐ利用できました。Bluetooth接続は、説明書に記載のQRコードを読み取るとペアリングモードとなります。ボタンは1つでシンプルな構造。
QRコードの作成
ちなみにQRコードの生成は、iPhone単体で出来ます。iOS標準アプリの「ショートカット」で2つブロックを組み合わせます。
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>棚卸しデモ</title>
<style>
body {
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}
img {
width: 160px;
height: 160px;
}
input#code {
ime-mode: inactive;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
/* 商品マスタ */
items = {
"00163a" : {"name" : "アヒル", "img" : "duck.png"},
"00294d" : {"name" : "考える人", "img" : "thinker.png"},
"00830f" : {"name" : "猫", "img" : "cat.png"}
};
/* 効果音 */
var audio = new Audio('./audio/enter.mp3');
$(function() {
$("#submit").on('click', function() {
// 商品コードを取得
var code = $("#code").val();
// 商品コードから商品の情報を取得
var item = items[code];
// 商品画像を表示
$("#img").attr("src", "./img/" + item.img);
// 商品名をテーブルに追加
var td = $("<td>").text(item.name);
var tr = $("<tr>").append(td);
$("#result tbody").append(tr);
// 商品コード入力欄をクリア
$("#code").val("");
// 音を鳴らす
audio.play();
});
// ENTER押下でボタンクリック
$("#code").on('keypress', function(e) {
if(e.keyCode == 13) {
$("#submit").trigger('click');
}
});
// 画面ロード時に入力欄にフォーカス
$("#code").focus();
});
</script>
</head>
<body>
<div class="container">
<div class="row" style="height: 400px;">
<div class="col-6">
<img id="img"><br>
<input type="text" id="code" autofocus>
<button class="btn btn-primary" id="submit">送信</button>
</div>
<div class="col-6">
<table id="result" class="table table-striped">
<thead class="thead-dark">
<tr>
<th>商品名</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<img class="qr" src="./img/00163a.png">
<img class="qr" src="./img/00294d.png">
<img class="qr" src="./img/00830f.png">
</div>
</div>
</body>
</html>