• 技術が集うTECH GUILD

    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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください