バーコードリーダーを使ったアプリ開発(QRコード対応/スマホ対応/無線対応)

バーコードリーダーを使ったアプリ開発(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>

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください