アプリ開発不要。WEBサイトでバーコード検索を実現する。

Amazonのアプリなどでは商品についているJANコード（バーコード）で商品検索ができます。
商品点数の多いサイトやリピート購入のあるサイトでは、この機能は大変便利なのではないかと思います。

とはいえ、アプリを開発すると、iOS用とAndroid用の両方を用意することになるのでコストがかさみます。
また、せっかく よくできたスマートフォン用サイトがあるのに、アプリも作るというのはもったいないですし、バーコード読み取りしたい という理由だけでお客様に「アプリをダウンロードして使ってください」というのではダウンロードしてもらうこともままならないという状況になりそうです。

そこで、WEBサイトにそのままバーコードリーダー機能を実装できるのであれば実装したい！…というケースは多々あると思います。

しかし、今のところなかなかそのような事例が見当たりません。
QRコードを読むサイトは時々あるのですが、JANコードの例はほとんど見ません。

それで、バーコード検索機能をWEBサイトに組み込む方法について、ご紹介したいと思います。

「quaggaJS」で実現

「quaggaJS」というオープンソースのライブラリを利用すると、比較的簡単にバーコード読み取り機能をサイトに組み込むことができます。
https://github.com/serratus/quaggaJS/blob/master/LICENSE

ライセンスは使いやすい「MIT License」です。

シャッターボタンを押さなくても、スマートフォンのカメラに映る映像の中からバーコードを見つけて解析し、読み取ろうとしている範囲をリアルタイムで枠で囲ったり・線を表示したりという事もできます。

あとは、取り込んだバーコードの値（JANコード）を用いて、商品を検索する処理などを追加していけば出来上がりです。

実際に組み込んでみての使用感など

実際にバーコード読み取り機能をサイトに組み込んでみると、とても良い感じです。

アプリをインストールせずに、すぐにバーコードで検索できるというのはやはり便利ですし、色違いやサイズ違い等がたくさんあっても、バーコードなら 自分の目の前にある その商品ズバリをすぐに検索できます。

また、関連して行ないたい事も浮かんできます。例えば、以下の様な事です。

・バーコードを読み込んだ際に音を鳴らす
・13桁ではなく、8桁のバーコードへの対応
・検索した商品をカートに入れたり、「欲しいもの」リストに追加する
・取扱っていない商品を検索された場合の対応

これらの機能を組み込んでみて（もしくは、組み込もうとしてみて）得られたノウハウや、読み取り精度を向上させるための調整、テストセンターで最新の端末を借りて動作確認を行なった結果などについては、また機会を見つけて別途お伝えできたらと思っています。

まずは、この便利なライブラリについてご紹介できたらと思い、投稿いたしました。

余談…約10年を振り返って

弊社にて初めてEC-CUBEと連動するiOS用のアプリを作ったのは2010年で iPhone 3GSの時代でしたが、まだガラケー(フィーチャーフォン)対応のほうが重要視されていて スマートフォンアプリは見向きもされませんでした。
その後、とにかくアプリが作りたいという時代がありました。
現状ではOSのバージョンアップのたびにコストがかかるので、費用対効果を見極めて開発するという時代になっているように思えます。