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

#ECの知識

EC-CUBE公式アドバイザーに
ご相談いただけます

まずは相談する

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

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

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

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

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

「quaggaJS」で実現

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

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

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

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

EC-CUBE公式アドバイザーが、ツール選びからサイト制作、マーケティング・セキュリティの領域までアドバイスいたします。ご相談窓口はこちら

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

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

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

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

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

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

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

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

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

この記事を書いた人

羽生 賢太郎

小5の冬に図書館でプログラミングの本を借りてから、その魅力にとりつかれ、(ギター等に浮気しつつも)ゲーム作り三昧の中学~高校生活を送る。大学時代からアルバイトとしてN88BASIC、VB、VB.NET、Delphi、Java、Perl、PHPでのシステム開発に携わる。最近は主にBtoB(企業間取引)向けのサイト構築に従事。EC-CUBEコミュニティでは、ID:habuとして活動。

#ECの知識

ECサイト制作に関するご希望やお悩み、
まずはEC-CUBE公式アドバイザーにご相談ください。

他の記事もご覧ください

記事一覧に戻る

EC-CUBE公式アドバイザー
ご相談窓口

  • 他社のASPやパッケージとの違いを知りたい
  • BtoCのサイトにBtoB機能を追加したい
  • 何から手をつければよいかわからない
  • オープンソースならではの注意事項を知りたい
  • 自社にマッチした制作会社を探したい
  • サイト制作だけでなく運営もサポートしてほしい

新規構築・リニューアル・取引先向けのWeb受発注システム(BtoB)や事業の拡大など、
今抱えている課題を解決する最適な業者探しを、アドバイザーがお手伝いします。