はじめに
プレーンなJavascript（Vanilla.js）による、コード番号からバーコードを生成するためのロジック構築について、前半と後半の２回に分けて紹介します。一般消費者では、恐らく一番目にすることが多い、JAN-13 に限定し、モバイル端末等バーコードリーダーにて認識可能なバーコード表示を目的とします。
今回は前半ということで、仕様の確認からロジックアウトラインの構築までとなります。
バーコードの表示方法については印刷目的ではないことと、 Canvasを使用したSVG版 は既に存在し、参考にもさせていただいているため、CSS による表示を選択しています。かなり泥臭く決してスマートとは言えない処理内容となってしまうのですが、ロジックとしては単純でわかりやすいかと思います。
なお、JANコードについての歴史や成り立ちなどの基本的な情報は割愛し、表示及び生成に必要な仕様情報のみをまとめています。また、当方ではjQueryは使用しませんので、ネットで散見されるライブラリについても一切触れません。
JANコードの公式な情報を確認したい方はこちらへ→JISX0507:2004 バーコードシンボル－ＥＡＮ／ＵＰＣ－基本仕様
仕様を理解する
ロジック構築の前に、JANコードの生成及び表示にかかる要件や仕様などを理解しておく必要があります。まずは座学、ということで、以下、JANコードの仕様をまとめました。
理解していないと話が進まない単位について
最低限、以下の２点は理解しているものとして話を進めていきます。
- キャラクタ：JANを構成する数字１文字のこと
- モジュール：バーコードを示すための最小構成単位のこと（白または黒の１本のバー）
コードのブロック構造
以下の７つのブロックによって構成されます。
- レフトクワイエットゾーン：左余白（１１モジュール以上）
- レフトガードバー：コード開始区切り
- レフトデータバー：左側６キャラクタ
- センターガードバー：中央区切り
- ライトデータバー：右側６キャラクタ
- ライトガードバー：コード終了区切り
- ライトクワイエットゾーン：右側余白（７モジュール以上）
キャラクタのモジュール構造
JANコードは１キャラクタにつき７つのモジュールを使用して表現します。モジュール構造は、白黒白黒、もしくは黒白黒白という ４本のバーによる交互パターン になっている必要があります。（それぞれの太さのパターンバリエーションでキャラクタを識別します）
モジュールの色調については、必ずしも白と黒でなければいけないというものではありません。本稿では印刷用のJANコードを生成することが目的ではないため深掘りはいたしませんが、興味がある方はこちらを参照ください→ バーコードの印字方法 | キーエンス
モジュールパターン
１キャラクタにつき７モジュールで表現する、と言うのは先述の通りです。キャラクタごとに下表の通り１と０の７桁のビット文字列でパターンが定義されています。
それぞれ１が黒、０が白で表現され、また、１キャラクタにつき ナンバーセット ごと、３つのモジュールパターンが定義されています。
ナンバーセット については そういったグループ分けがある 程度の認識で問題ないと思います。
■表１：キャラクタごとのモジュールパターン
| キャラクタ | ナンバーセットＡ | ナンバーセットＢ | ナンバーセットＣ |
|---|---|---|---|
| ０ | 0001101 | 0100111 | 1110010 |
| １ | 0011001 | 0110011 | 1100110 |
| ２ | 0010011 | 0011011 | 1101100 |
| ３ | 0111101 | 0100001 | 1000010 |
| ４ | 0100011 | 0011101 | 1011100 |
| ５ | 0110001 | 0111001 | 1001110 |
| ６ | 0101111 | 0000101 | 1010000 |
| ７ | 0111011 | 0010001 | 1000100 |
| ８ | 0110111 | 0001001 | 1001000 |
| ９ | 0001011 | 0010111 | 1110100 |
奇数パリティと偶数パリティ
パターンの構成（７モジュール）において、１の数が奇数のものを奇数パリティ （ナンバーセットＡ）、偶数のものを 偶数パリティ （ナンバーセットＢ）と呼びます。
上表において、ナンバーセットＣはナンバーセットＡをビット反転したものとなるため、偶数パリティ となります。
パターン及び 奇数パリティ、偶数パリティ については以下がわかりやすいでしょう。
１３桁のキャラクタそれぞれの役割について
- プレフィックスキャラクタ：最初の１桁
- 左データキャラクタ：２～７桁目までの６キャラクタ
- 右データキャラクタ：８～１２桁目までの５キャラクタ
- チェックデジット：最終桁の１キャラクタ（後述のモジュラス１０ウェイト３という計算式で算出される）
実は、バーコードそのものにはプレフィックスキャラクタのモジュールパターンは含まれていません。バーコードリーダー等で読み込んだ際、左データキャラクタのナンバーセットの並びを解析、プレフィックスキャラクタの数字を決定、出力データとして付加する、というハード側の仕様があります。
つまり、コード番号からJAN-13を生成しようとすると、プレフィックスキャラクタから左データキャラクタのナンバーセットパターンを参照、キャラクタごとのナンバーセットを決定、という逆の手順を踏む必要があります。
そのために必要なプレフィックスキャラクタとナンバーセットの並びを定義したものが以下の表となります。（表中ＡとＢはそれぞれナンバーセットを表します）
■表２：プレフィックスキャラクタごとのモジュールパターン定義
| プレフィックスキャラクタ | パターン構成 |
|---|---|
| ０ | AAAAAA |
| １ | AABABB |
| ２ | AABBAB |
| ３ | AABBBA |
| ４ | ABAABB |
| ５ | ABBAAB |
| ６ | ABBBAA |
| ７ | ABABAB |
| ８ | ABABBA |
| ９ | ABBABA |
プレフィックスキャラクタから左データキャラクタのナンバーセット決定プロセス
具体例）4912345678904の場合
上記の場合、プレフィックスキャラクタが ４、左データキャラクタが ９１２３４５ となります。表２より、左データキャラクタの構成は ABAABB となり、キャラクタごとのナンバーセットが決定されます。表１より、キャラクタごとのナンバーセットに対応するモジュールパターンが決定されます。
- 9 → ナンバーセットＡ → 0001011
- 1 → ナンバーセットＢ → 0110011
- 2 → ナンバーセットＡ → 0010011
- 3 → ナンバーセットＡ → 0111101
- 4 → ナンバーセットＢ → 0011101
- 5 → ナンバーセットＢ → 0111001
右データキャラクタはすべてナンバーセットＣ
補足：GS1事業者コード と 商品アイテムコード
画面表示には直接関係ありませんが、チェックデジット以外のキャラクタには、GS1事業者コード（JAN企業コード） と 商品アイテムコード という別の意味も含まれています。
先頭の7桁（9桁）の「JAN企業コード」（メーカーコード）は2012年に「GS1事業者コード」に改称されました。
従来、先頭の2桁が国コードで、45と49が日本という意味でしたが、現在は先頭3桁450～459、490～499が日本の事業者、という意味になります（参考：GS1 General Specifications V17）
JANコードの詳細より
モジュラス１０ウェイト３
後回しになりましたが、チェックデジットの計算式となります。その計算プロセスが以下となります。
- チェックデジット以外の最下位桁から見て奇数桁と偶数桁に分けてそれぞれ合計する
- 奇数桁の合計を３倍したものと偶数桁の合計をさらに合計する
- １０から合計値の１の位の値を減じる
- 3.の値がチェックデジットとなるが、合計値の１の位が０なら０となる
具体例）491234567890の場合
- 奇数桁合計：9+2+4+6+8+0=29、偶数桁合計：4+1+3+5+7+9=29
- 奇数桁合計×３+偶数桁合計：87+29=116
- 10-6=4
- チェックデジット：4
符号化プロセス
コード番号はプレフィックスキャラクタを除き、左右の余白、各ガードバーを含めて０と１のビット文字列へ変換します。なお、余白と各ガードバーのパターンは以下のように定義されています。
- 余白（１モジュール）：0
- 左右ガードバー（３モジュール）：101
- センターガードバー（５モジュール）：01010
先程の具体例に沿って符号化すると以下のようになります。
- レフトクワイエットゾーン：00000000000
- レフトガードバー：101
- レフトデータバー：（９１２３４５）0001011-0110011-0010011-0111101-0011101-0111001
- センターガードバー：01010
- ライトデータバー：（６７８９０４）1010000-1000100-1001000-1110100-1110010-1011100
- ライトガードバー：101
- ライトクワイエットゾーン：0000000
便宜上、キャラクタごとの区切りとしてハイフンを付加していますが、符号化の結果、１１３桁（１１３モジュール）のビット文字列となります。
バーコード生成ロジックの要件まとめ
挙動概要
- ブラウザベースとし、JANコード入力後ボタンクリックでバーコード表示
- エラーチェックは正規表現によるパターン照合とチェックデジットの照合のみ
- リセットボタンクリックでバーコード及びエラー表示の消去
表示
印刷用途としての利用ではないので忠実に再現する必要もないのですが、容易に実装できる範囲でこだわってみました。（反響があればさらに追求するかもしれません）
色調
白と黒の２値とします。
サイズ
印刷前提での基準では、モジュール幅は0.33mmが基本となり、基本寸法の0.8 ～ 2.0倍まで拡大、縮小が可能とされています。
画面表示時においては、モジュール幅１pxとした基本寸法（113px x 70pxとします）での表示を基準とし、初期表示サイズ、縮小・拡大はデバイスに依存するようにしておきます。
フォント
目視可能数字には，JIS X 9001で規定するOCR-Bなどの明確に読み取れるフォントを使用する。このフォントは，よく用いられる書体として参照しており，機械読取り又は検証することは意図していない。読みやすい表記形式であれば，適当なこれ以外の書体及び／又は文字サイズを用いてもよい。
JISX0507:2004 バーコードシンボル－ＥＡＮ／ＵＰＣ－基本仕様より
CDNにてフリーのOCR-Bフォントが使用可能なので、利用させていただくことにしました。
ロジック
- JANコードを受け取りエラーチェック
- 正規表現によるパターンチェック
- モジュラス１０ウェイト３によるチェックデジット照合
- JANコードの符号化
- 左データキャラクタの符号化
- 右データキャラクタの符号化
- 桁数分のモジュール表示用DOMエレメントを追加
- モジュールごとに奇数パリティ、偶数パリティ用のクラスを付加
最後に
JANコードやバーコード周辺の技術情報などについて興味がある方は以下を参考にしてみてください。これらがまとめられたPDF資料が大変参考になると思います。
次回はサンプルコードとロジックの解説を予定しています。
誰かのお役に立てたなら幸いです。