バーコードリーダーをブラウザから使えるようにしたい！JSのバーコードリーダーライブラリを調査しました

はじめに

はじめましてorこんにちは！
ecbeing2年目、R&D部門所属のいかちゃんです。

前回や前々回には、Dockerの記事やスクラムに関する所感記事を書きました。
blog.ecbeing.tech blog.ecbeing.tech

そして今回は…技術寄りな記事となります。
具体的には、「バーコードリーダーが実装可能なJavaScriptライブラリについて」まとめていこうかと思います！

…というのも、半年前程に自分が所属するプロジェクトから「ブラウザベースでバーコードリーダーを実装してほしい」というオーダーがありまして。
また、「アプリ形式ではなく ブラウザから 利用したい」という条件付き。
((アプリ形式なら実践してみた系の記事はわんさかあるんですけどね

なぜこの様な条件が付いたかというと…。
当時の(今もですが)プロダクトはブラウザベースで稼働するものでして。
バーコードリーダーのためだけに、わざわざiOSやAndroid用のアプリを作るのは高コストだという背景があります。

「ブラウザベースでバーコードリーダーを実装してみた」系の記事は意外と少なく…。
中々いいJSライブラリが見つかりませんでしたが、それでも何とか3つほどライブラリを見つけられたので、こうして記事にまとめてみた次第です。

前置きが長くなりましたが…それでは記事本編へ参りましょう！

技術調査まとめ

「ブラウザベースでバーコードリーダーを実装してほしい」要望をかなえるべく、「JavaScriptのみでバーコードリーダーが実装可能なライブラリ」を探した所…。
該当するライブラリが3つ見つかりました:

• WebCodeCamJS
• JOB
• QuaggaJS

それぞれについての調査まとめはこんな感じです:

ライブラリ名	サンプルプログラムURL	スマホからのバーコード読み取り	実用度	サンプルプログラム作成に参考にした記事
WebCodeCamJS	サンプルページ	×	×	Qiita記事
JOB	サンプルページ	〇	△: ゆがみの自動補正無	記事
QuaggaJS	サンプルページ	〇	◎: ゆがみの自動補正有	記事

それぞれについて、少し詳しく話すと…。

WebCodeCamJSについては、サンプルプログラムを基に下記の環境下で実機検証したところ:

• iPhone7
• Safari Version604.1…設定画面よりカメラへのアクセスを許可した状態
• Chrome Version75.0.3770.103…設定画面よりカメラへのアクセスを許可した状態

Safariでは「カメラを認識してくれるが、カメラが何故か起動せず」、
Chromeでは「そもそもカメラを認識してくれない」事態に。

JOBについても、サンプルプログラムを基に上記と同様の環境下で実機検証したところ…。
「読み取り自体は可能」なのですが、「バーコードの表示が少しでもゆがむと読み取り不可」となり…。
((正方形の枠の中に、ゆがみなくバーコードをカメラへ納めないとダメな感じです

実生活の中で使う事を考えると、多少のゆがみも補正して読み取れないとダメだろうな…と感じ、JOBも不採用へ。

最後に残ったQuaggaJSについては、サンプルプログラムを基に上記と同様の環境下で実機検証したところ…。
「iOSではSafariでしか起動しない」のですが「多少のゆがみも自動補正してから読み取れる」という、JOBよりも実用性に優れた形で使えることが分かりました！
※もちろんAndroidでもばっちり動作しました

最終的には、この調査結果表と共にちょっとした総括を加え…。
チーム内で相談した結果、QuaggaJSでバーコードリーダーを実装することになりました！

…と、調査結果についてこんなに簡単な文で終わっちゃあ味気ないので。
お次は今回採用することになったQuaggaJSの特徴なりなんなりを書いていこうと思います。

余談: サーバーサイドで何とかする選択肢について

ちなみに、冒頭で述べた「JSライブラリではなくサーバーサイドで何とかする選択肢について」ですが…。
こちらは、「QuaggaJSという実用性に耐えそうなライブラリがあることが分かった段階」で本選択肢は除外しました。

そもそもクライアントのカメラ情報を取得しサーバーサイド側に送付するのはとても処理が重たそうですし、昨今のスマホは割と高性能なのでJSで多少負荷をかけても大丈夫だろうとも思いますし。

クライアント側で完結可能な処理(カメラ起動やバーコードの値読み取り)はクライアント側で任せ、サーバーサイドには取得したバーコードの値のみをAPIで送付する…なかなかイマドキ感ある実装に出来ますしね！

QuaggaJSについて

QuaggaJSはGithub上で公開されている、JavaScriptライブラリです。
ライセンスはMITライセンスです。

github.com

Star数は3.6k、Fork数700、Watch数133と…個人的な所感ですが、中々注目を集めていそうなライブラリかなと思います。
ただ、最終更新日は2017年の6月8日と少し古めです。

対応バーコードはJAN以外にも「CODE39」や「CODE128」等のバーコードに対応しています。
注意点として、QRコードは対応していません。

対応ブラウザは「下記のWeb APIをサポートしている」ブラウザです。
※これらAPIの対応状況を見たい場合はこちら

• webworkers
• canvas
• typedarrays
• bloburls
• blobbuilder
• stream
  • getUserMedia

また、QuaggaJSはカメラからだけでなく「 静止画の画像からも 」バーコードを読み取る事が可能です！
…カメラから使えるってだけで十分かなぁと思いますが。

お次はQuaggaJSの素敵ポイントや、使用時の注意について幾つか書いていきます！

QuaggaJSの素敵ポイント

QuaggaJSの素敵な点は、「多少のゆがみを自動補正して読み取ってくれる」点です！
バーコードであることを認識できる程度のサイズであれば読み取ってくれますし、下記の画像のように「斜め方向に読み取ろうとしても」きちんと読み取ってくれます。

こんなに歪んでてもOK!

ただし、下記の画像のように「曲面でゆがんでいる物」については読み取り精度が弱くなるので注意が必要です…。

これはダメ

どうして精度が落ちるかは、QuaggaJSの内部動作説明ブログを参照に。

簡単に話すと…。
QuaggaJSでは「カメラから取得した画像を正方形のグリッドでスライスし、拡縮された被写体や回転された被写体でも読み取れる」様になっています。
ただ、曲面のゆがみの様な「正方形のグリッドでは捉えきれない被写体」については非対応…という事です。

QuaggaJSの注意ポイント

QuaggaJSの注意点としては、「スマホだと対応ブラウザが限られてしまう」という事です。
対応デバイス外からアクセスすると、カメラ機能がONにならないのです…。
ざっくり言うと「iOSではSafari」「AndroidではChrome」しか対応していないっぽいです…。
※なお、WebViewでは上手く動いたケースがほとんどでした

また、各端末の最新VerのOSでないと動かないケースも散見されました。
最近だと、スマホはユーザーが意識しなくても勝手にアップデートされるケースも多いと思うため、特段気にする必要はないかもですね…。

具体的な対応機種は下記に:
※空欄は未調査です
※社内で小規模にしか調べてないので、下記以外にも利用できる機種はあるかもです

端末	OS	Chrome	Safari	WebView	Firefox	Opera
iPhoneSE	iOS 12.4	×	○
iPhone7	iOS 12.4.1	×	○	×	×
iPhone7	iOS 13.2.2		â—‹	â—‹
iPhone8	iOS 12.3.1		○	×
iPhoneXs max	iOS 13.1.3	×	○	○	×
iPhoneXs	iOS 13.2.3		×
iPhone11 Pro	iOS 13.2.3		â—‹
Xperia Z5 Compact SO-02H	Android 7	â—‹
Docomo Xperia XZ1	Android 9	○		○	×
Xperia XZ3 SOV-35	Android 8.0.0	â—‹
au Xperia XZ3	Android 9	â—‹
Xperia XZ3 SO-01L	Android 9	â—‹
Pixel3	Android 10	â—‹		â—‹	â—‹	â—‹

 まとめ

今回は、「ブラウザからバーコードリーダーが利用できる」JavaScriptライブラリについてまとめてみました。
ブラウザからバーコードリーダーが起動できるなんて、なかなかに素敵機能だと思いますが…JavaScriptのライブラリとしては、あまり無かったなぁと感じます。
((「バーコードリーダーライブラリ」で検索しても、iOSアプリのバーコードリーダーの実装のやり方しかヒットしなくてですね…。

このような、情報が少ない中でも技術調査に励む…R&Dっぽくてかっこいい事が出来たなぁと思います！
それでは～！

～ecbeingでは新しい技術を積極的に調査しまとめてくれる、発信力のある若手エンジニアを大募集中です！～ careers.ecbeing.tech