【NW-7対応】jQuery（javascript）でバーコードを読み取ることができた

　こんにちわ、平昌オリンピックのスノーボードハーフパイプ、平野くんの銀メダルに興奮しましたね。さて、今回はjavascriptネタを一つ。ちょっと仕事でバーコードを読み取る機能を作らないといけなくなったのですが、探してみたらjavascriptでもバーコードを読み取ってくれる便利なライブラリがあったので紹介したいと思います。

　ネイティブアプリにはたくさんのバーコードリーダーがありますし、今ではiosの標準ライブラリ「AVFoundation」でも読み取ることもできる（NW-7は非対応）など、そこまで難易度は高くないんですが、webアプリで読み取るとなるとなかなかよさそうなライブラリがありませんでした。しかし、検索してみたところ「JOB」という優秀なライブラリがありました。

JOBとは？

　JOBとは、「Javascript Only Barcodereader」の略語で、その名の通りjavascriptだけでバーコードを読み取ることができるということになります。

対応しているバーコード規格

　JOBライブラリが対応しているバーコード規格は下記の通りとなります。

JOBライブラリの最大の特徴

　JOBライブラリの最大の特徴は、何と言っても「Codabar（NW-7）」というバーコード規格にも対応しているというところになります。

Codabar（NW-7）とは？

　Codebarとは、別名「NW-7」とも呼ばれる規格になり、ヤマト運輸や佐川急便、郵便局など郵送系のサービスで使用されているバーコード規格になります。実は、意外とこの規格に対応しているライブラリは少なくて、先ほど少し触れたiosの標準ライブラリのAVFoundationも今の所（2018年2月現在）この規格に対応していません。

JOBの使い方

　JOBライブラリの使い方は、デモページのソースコードを参照してカスタマイズするのがベストです。簡単に流れを追って説明すると下記のような感じになります。

プロジェクトに作成

　まずはじめに、適当にプロジェクトフォルダを作成して、「index.html」ファイルと「js」フォルダを作りましょう。

Githubからソースコードをダウンロード

　次に、Githubからサンプルコードをまるっとダウンロードします。

　ダウンロードしたら、「src」フォルダに入っている下記4つのファイルをjsフォルダにコピーしましょう。

Jqueryの読み込み

　次に、JOBはjQueryライブラリになるのでjQueryをダウンロードして読み込みます。今回はjQueryのバージョン3.3.1を使用します。

JOB.jsの読み込み

　jQueryを読み込んだら、JOB.jsファイルをダウンロードして、jsフォルダに格納し読み込みます。

HTMLの記述

　必要なファイルの読み込みが完了したら、適当にHTMLを記述します。今回は下記のようなコードを組みました。

　簡単に説明すると、inputタグでファイルのアップロードをして、解析した画像がcanvasに表示され、その下のpタグ（id:textbit）に解析結果が表示されるという形になります。

javascriptの記述

　最後に、下記のjavascriptのコードを丸っとコピーすればバーコードの読み込みができると思います。

スマホの横向きの撮影には非対応？

　実際にスマホで試してみたところ、縦向きの撮影では問題なく結構な精度で読み込んでくれたのですが、横向きの撮影だと正常に認識してくれませんでした。上記のサンプルコードではexifに対応していないことが原因かと思います。ソースファイルにはexif.jsファイルも入っているので、exifの制御をちゃんとしてあげればおそらく動くと思います。

まとめ

　というわけで、今回はjQueryのライブラリ「JOB」を使ったバーコードの読み取り方を紹介させていただきました。このようにネイティブアプリではなくてもバーコードリーダーが作れてしまう時代ですね。いろいろな使い方ができるんじゃないでしょうか。

それでは、今回はここまで！また！

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

Cody Lindley

• Amazon楽天