デスクトップはもちろんスマートフォンからでも使える可能性がありそうですよ!

ユーザは入力するのが嫌いです。そこでカメラを使った入力インタフェースを考えてみましょう。良く知られているところでバーコードを使ってみます…しかもWebで。そのためのライブラリがBarcodeReaderです。

[![](http://images.moongift.jp/2013/10/Screenshot 2013-10-23 11.51.36_thumb.1382498302.png)](http://images.moongift.jp/2013/10/Screenshot 2013-10-23 11.51.36.1382498302.png)
これくらいのバーコードであれば…

[![](http://images.moongift.jp/2013/10/Screenshot 2013-10-23 11.51.41_thumb.1382498307.png)](http://images.moongift.jp/2013/10/Screenshot 2013-10-23 11.51.41.1382498307.png)
ちゃんと認識されます。種類としてはCode128、Code93、Code39、EAN-13に対応しています。日本のバーコードはEAN-13なので問題ありません。

[![](http://images.moongift.jp/2013/10/Screenshot 2013-10-23 11.51.47_thumb.1382498312.png)](http://images.moongift.jp/2013/10/Screenshot 2013-10-23 11.51.47.1382498312.png)
Code128のデモ。結構細かいですが問題ないですね。

バーコードは画像をアップロードする訳で、となればスマートフォンのカメラが便利ですよね。ということでスマートフォンを使ってみます。

[![](http://images.moongift.jp/2013/10/2013-10-23 11.57.00_thumb.1382498320.png)](http://images.moongift.jp/2013/10/2013-10-23 11.57.00.1382498320.png)
iOS 6からカメラを使ってファイルアップロードができるようになったので便利ですね。ちなみにAndroidの場合、FileReader APIがサポートされていない場合があるのでその場合は動かないかも知れません(Android 2.x系だとダメなはず)。Google Chrome for Android 4.1で試してもうまく動きませんでした…。

[![](http://images.moongift.jp/2013/10/2013-10-23 11.59.44_thumb.1382498323.png)](http://images.moongift.jp/2013/10/2013-10-23 11.59.44.1382498323.jpg)
こんな感じで色々な文字が入るとうまく認識できませんでした。

[![](http://images.moongift.jp/2013/10/2013-10-23 12.00.44_thumb.1382498333.png)](http://images.moongift.jp/2013/10/2013-10-23 12.00.44.1382498333.png)
そこでトリミングした画像をアップロードすると、適切に数字が取得できます。

iPhoneの場合接写が上手ではないのでバーコード以外の情報が入り込んでしまう可能性が高くなります。業務システムで使おうと思ったら帳票のバーコードの周囲にはなるべく情報を載せないといったやり方が良いかも知れません。

でもBarcodeReaderがうまく使えば業務システムにおける入力の手間が大幅に軽減できる可能性があります。また、昔懐かしのバーコードバトラーのようなゲームをWebベースで(さらにスマートフォン向けに)作れる可能性だってある訳です。

技術的にはCanvasからデータの読み取りを行ったり、平行処理のためにWeb Workerを使ったりしています。そういった点も興味深いソフトウェアになります。

BarcodeReaderはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

BarcodeReader

EddieLa/BarcodeReader