ブラウザとバーコードのいい関係


初めまして。入社して3ヶ月ちょっと、エンジニアの天野です。

さて、

はじめに

先日、運用中のWebシステムの一部に関して、ここはバーコードで楽にしたいねーという話が上がりました。
紙でやりとりが必要な作業があり、それに印刷されたバーコードをスキャンして、対応する情報をブラウザ上に表示するというものです。(それまでは人力で紙の情報とWeb上の情報の紐付けを行っていました)

バーコードリーダーという単語から、コンビニやスーパーのレジで使用されているあのゴツイやつを連想してしまった僕。
「それって組込み系言語でがっつりネイティブアプリ作んなきゃなんでしょ。うひょー」とか思っていたわけですが、実際はJavaScriptでさっくり実装できました…

ということで、今回はWebシステムとバーコードを連携させたお話です。

バーコードの規格

まずはスキャンするバーコードの規格を決めなければいけません。

ご存知の方も多い?と思いますが、バーコードにはいろいろと種類があります。
大きくは一次元、二次元の区分から、規格レベルではJANコードやCODE128、おなじみのQRコードまでいろいろと。

JANコード
jan
CODE128
code128
QRコード
qr

今回はその内から、要件に合っていて表現できる文字数が多く、わりとポピュラーそうだったCODE128を選択しました。

バーコードリーダー選び

次にバーコードリーダーです。

バーコードリーダーも同じく種類が豊富です。
一次元のみ対応か二次元にも対応か、CCDかレーザーか、堅牢性やその他いろいろと比較する点があります。

1台目には、お手頃価格で無難そうに見えたCCDタイプのバーコードリーダーを購入したのですが、たった2週間程で故障してしまいました….
それを踏まえ、実運用時にはレーザータイプで堅牢性の高さを謳っていたものを選択しました。堅牢性って大事。

↓ これを使用しています
VEGA V-1030
scanner

本題

あとは実装です。

今回、バーコードの生成には zend-barcode を使用しました。
非常に簡単にバーコードを生成できます。実際の使用方法はドキュメントをご覧くださいませ。

肝心のスキャン部分についてですが、こちらも非常に単純です。
というのも、USB接続のバーコードリーダーの多くはPCから外付けキーボードとして認識され、読み取ったバーコード文字列を一文字ずつキー入力していくように設定できるからです。

そうです。つまり、JavaScriptのKeyboardEventで拾えます!

$(document).keypress(function(e) {
  var key = String.fromCharCode(e.charCode);
  console.log(key);
});

返ってくるのはキーコードなので変換しときましょう。 ASCII以外の文字は適当に。

あとは順番に入力されてくる文字列を結合します。

var words = '';
$(document).keypress(function(e) {
  var key = String.fromCharCode(e.charCode);
  words = words + key;
  console.log(words);
});

これでスキャンされた文字を得ることができました。

ですが、これだけだと全てのキー入力に反応するデリケートな子になってしまいます。
そこで、

var words = '';
var scanning = false;
$(document).keypress(function(e) {
  if (e.charCode == 13) {
    if (scanning) {
      console.log(words);
      words = '';
      scanning = false;
    } else {
      scanning = true;
    }
    return false;
  }
  if (scanning) {
    var key = String.fromCharCode(e.charCode);
    words = words + key;
  }
});

このような感じでエンターキー入力でスキャン開始と終了を判別させました。

そのエンターキーは誰が入力するんじゃいっ!って感じですが、これも簡単です。
バーコードリーダーの設定を変えると、スキャンの前後に任意のキーを入力させることができるんです。

例えば、「Raksul」という文字列のバーコードをスキャンすると、

エンターキー → R → a → k → s → u → l → エンターキー

とバーコードリーダーにキー入力させることができるのです。便利!!

あとはスキャンされた文字を煮るなり焼くなりAPIに投げるなり、好きに処理することができます。

おわりに

JavaScriptを使うことでWebシステムとバーコードを非常に簡単に繋ぐことができました。

素晴らしいですね。バーコードが好きになってきました。
もうバーコードを見かけると、ついどの規格なのか考えてしまいます。

もちろんほとんどの方は、たったこれだけの記事ではバーコードに興味を持つことなど難しいでしょうし、使う機会もないかと思います。
ですが、何か(たとえば書籍だとか)を管理する選択肢の一つとして、頭の片隅に留めておいていただけると、きっとどこかで役立つ日が来るかもしれません…..

いつかこの記事が、みなさんのバーコードライフの一助となることを願っています!

※ ラクスルではバーコードを愛するエンジニアもそうでないエンジニアも絶賛募集中です!