JavaScriptライブラリを使ったバーコードシンボルの生成方法について

みなさん「バーコードシンボル」って知っていますか？

そりゃ知っていますよね。

こいつです。

"白い背景"に"太さの違いがある縦線"と"文字列"がはいっているアレです。（たまたま記事を書いているときに飲んでいた午後の紅茶についていたので写真撮りました。）

一般的に単にバーコードと呼ばれていたりします。

本記事では、私が関わった某案件にて、クライアントサイド(JavaScript)でバーコードシンボルを生成する必要があったため、その際に調べたことについてまとめておきます。

筆者は「そもそもバーコードって知ってるけど知らない」という知識レベルだったので「バーコードとはなんなんだ！？」というところから調べ始めました。

そのことも備忘録として本記事にまとめておきますが、単純にJavaScriptライブラリの比較について知りたい人は「JavaScriptライブラリの比較」まで読み飛ばしてください。

そもそもバーコードシンボルって何？

バーコードシンボルは、光学的反射率の高い部分と低い部分との組み合わせで情報を表示し、機械的に読取可能にした情報媒体の総称である。

引用：「バーコードシンボルとは」

はい。何言ってるかよくわかりませんね。

要は、「数字や文字列を機械（スキャナー）で読み取れるように、画像に置き換えたもの」ということです。シンプルかつ印刷も容易なので、広く普及した規格らしいです。

JANコードとは？

バーコードシンボルは「数字や文字列を機械（スキャナー）で読み取れるように、画像に置き換えたもの」と説明しましたが、シンボルの元になっているコードを日本では一般的にJANコード（もしくは、単純に"JAN"）と呼んでいます。

JAN(Japanese Article Number)は「どの事業者の、どの商品かを表す、世界共通の商品識別番号」のことで、国際的にはEAN（イアン）または、GTIN-8, GTIN-13と別の呼称となっています。

ちなみに、この「バーコードシンボルを生成するための数字や文字列」にはさまざまな種類が存在します。

後述するJavaScirptライブラリの選定においては、生成したいコード（規格）に対応しているのか否かという観点でライブラリ選定を行う必要があります。

JANコードの種類について

・JAN/EAN(数字13桁or8桁)：共通商品コードとして使用される
・Interleaved2of5 / ITF(数字偶数桁)：小物ラベル等に使用される。
・Codabar / NW7(数字, 記号,スタート・ストップ)：宅配伝票等に使用される。
・Coda39(数字,英字,記号)：FAラベルや伝票に使用される。
・Code128(数字,英字,記号,制御文字)：公共料金振込用紙等に使用される。
・RSS14(数字,識別子01+14桁)：果物、食肉、薬品等に使用される。

参照：「バーコードシンボルとは」

はい。色々ありますね。

実際の案件で「JANコードをフロントにAPIで渡すからJavaScriptで生成してね！」と言われても一般名称として「JANコード」と言っているだけかもしれないので、コードの種類についてはしっかりと確認しましょうね。

私が関わった案件は実際のデータの種類としては、「ITF」でした。後述する実装サンプルもITF形式に対応したものとなります。

JavaScriptライブラリの比較

▼JsBarcode

今回私が採用したライブラリです。ITF形式に対応していて、オプションも豊富。githubのstar数も多かったのが採用の決め手です。

lindell/JsBarcode

▼quaggaJS

ITFも対応。githubのstar数は2019/12/09時点でJsBarcodeよりも多かったのですが、ドキュメントがJsBarcodeよりも読みづらかったため、採用は見送りました。

serratus/quaggaJS

▼barcode generator control

実績は十分あるのですが、有料なのでそもそも採用は見送り。Vue/React/Angularなどのフレームワークのサポートが充実しているようなので、予算十分なアプリケーション作るときは採用検討しても良さそうです。

JavaScript Barcode Generator Library | Syncfusion

▼Simple jQuery Based Barcode Generator

standard 2 of 5 (industrial)に対応と書いてあるので、おそらく対応しているはずなのですが、jQuery依存は避けたかったので見送り。

Simple jQuery Based Barcode Generator - Barcode

JsBarcodeのサンプル

実際にJsBarcodeを使って実装してみたサンプルは下記の通りです。

const pram = {
  format: "ITF",
  text: splitNum(num),
  width: 2.8,
  height: 210,
};

JsBarcode(target, num, pram);

JsBarcodeに対して、第一引数に画像を表示させるDOMを渡してあげて、第二引数にバーコードシンボルの生成元となる、JANコードを渡してあげるだけで勝手に画像が生成されます。簡単ですね。

第三引数に色々とパラメータを渡してあげて、サイズなんかも変えられたりします。あら便利。

上記サンプルでは、バーコード下に表示させるJANコードをチェックデジット無し、且つ4桁区切りで表示させるための実装も入れています。

下の数字は店舗の運用でスキャナが上手く機能しないときに、実際に手入力で数字をPOSレジに打ち込むように存在しているらしいです。（そのため、シンボルだけではなく、数字も読みやすくすることが大事。）

そういえば、昔レジ打ちやったなあということも思い出しました。

おわりに

実装時、そもそも「バーコードって何？」というところから調べ始めるところから始まりました。

加えて、意外とバーコードの読み取り用ライブラリは存在するけれど、生成用ライブラリの日本語情報がありませんでした。

私と同じく、「全くバーコードについて知らないけれど、フロントエンドで実装する必要がある」といった人に本記事が役立てば幸いです。

では！