書籍JANコードの一段目のバーコードを作成するための考え方と、webページで表示するためのjavascript

「ISBNを入力して私製スリップを表示する「vslip version0.0 （パイロット版）」を作りました」の続きになります。

先日8月5日（ほとんど6日）に公開した「vslip version0.0」を、バーコードを表示できる「vslip version0.1」にバージョンアップしました。
※8/18、ie11・edgeに対応しました。
※8/24、version0.3　バーコードの向きと位置・ボウズの位置・スリップの横幅・openBDで見つからなかったアイテムの表示等を変更

vslip version0.2 （パイロット版）※Chrome・ie11・edge対応
http://honno.info/vslip/

その際、書籍JANコードの作り方をようやく理解したので共有したいと思います。プログラミングが出来る方なら誰でも、WebページのHTMLが書ける方ならjavascriptの使い方を知るだけで、書籍JANコードに対応したバーコードを、プラグインなど使わずに、自社のサイトなどで表示できるようになります。

今回公開するjavascriptは、一段目のバーコード表示専用ですが、仕組みを理解したら、二段目も作れるようになります。なお、バーコードのルールや仕様については、以下のWebページを参考にいたしました。分かりやすく親切な内容で非常に助かりました。作者の方にお礼を申し上げます。本当にありがとうございます。
「バーコードの作成 - BIGLOBE」 http://www5d.biglobe.ne.jp/~bar/ 

以下、汎用性のあるバーコードの作成ではなく、書籍JANコードの一段目のバーコードの作成に特化した説明と、最後に実際のjavascriptの例を記載いたします。

「書籍JANコードに対応したバーコード（一段目）を作るための考え方」

1. 書籍JANコードに対応したバーコードは、数字を、同じ太さを持つ7本のスペース（白線）とバー（黒線）の組み合わせのパターンで表している。

2. ひとつの数字を表すスペースとバーの組み合わせのパターンは、一種類ではなく三種類あるが、数字の場所（先頭からの位置）によって種類が決まっている（書籍JANコードの場合）。

3. スペースとバーの組み合わせのパターンは、ISBN13桁のうち、先頭の9を除いた12桁の数字について、左側6文字は「（左側）奇数パリティ」「左側）偶数パリティ」という二種類、右側6文字は「（右側）偶数パリティ」という一種類のパターンを持つ（※同じ偶数パターンでも、左側と右側ではスペースとバーの組み合わせのパターンが異なる）。

4. 左側6文字の「奇数」と「偶数」のパターンで、先頭の数字を表している。ISBNの場合、先頭は「9」で固定なので、左側6文字のパターン（パリティ）の組み合わせは「奇数」「偶数」「偶数」「奇数」「偶数」「奇数」となる（この項、是非、上述の「バーコードの作成 - BIGLOBE http://www5d.biglobe.ne.jp/~bar/ をご参照ください。仕組みが理解できると頭の中の霧がスカッと晴れます。

5. 右側6文字は「（右側）偶数パリティ」で固定されている。

6. 4と5から、書籍JANコードのバーコードで使うスペースとバーの組み合わせのパターン（パリティ）は、9を除く12文字について全て固定されていることがわかる。ここで、（左側）奇数をo、（左側）偶数をe、（右側）偶数をrと置くと、12文字に使われるパターンは「oeeoeorrrrrr」と表される。

7. それぞれのパターン（パリティ）で数値を表すスペースとバーの組み合わせの実際は、以下の通り（パリティ,数値,線の組み合わせ（スペース：0、バー：1））。
o,0,0001101
o,1,0011001
o,2,0010011
o,3,0111101
o,4,0100011
o,5,0110001
o,6,0101111
o,7,0111011
o,8,0110111
o,9,0001011
e,0,0100111
e,1,0110011
e,2,0011011
e,3,0100001
e,4,0011101
e,5,0111001
e,6,0000101
e,7,0010001
e,8,0001001
e,9,0010111
r,0,1110010
r,1,1100110
r,2,1101100
r,3,1000010
r,4,1011100
r,5,1001110
r,6,1010000
r,7,1000100
r,8,1001000
r,9,1110100

8. バーコードの先頭には、10本の白線足す先頭を表す3本の線（0000000000＋101）が、中間（左6文字と右6文字の間）には、中間を表す5本の線（01010）が、末尾は末尾を表す3本の線と10本の白線（101＋0000000000）が付加される。

9. 出来上がった0と1の組み合わせを画像で出力。以上で書籍JANコードに対応したバーコードが作成できる。

上記の説明を踏まえて記述したjavascriptは以下の通り（パターンはoerではなく、012で表すことで、配列を二次元ではなく一次元にしました。また、バーコードの下に記述するISBNの数値、及び、SVGでの出力については、様々な方法が可能なので、ここでは特に説明を加えていません）。

var isbn = "9784876152117"; /* ISBNコードを設定 */
var barNum = isbn.slice(-12); /* バーコード作成に使う12文字 */
var module= Array("0001101", "0011001", "0010011", "0111101", "0100011", "0110001", "0101111", "0111011", "0110111", "0001011", "0100111", "0110011", "0011011", "0100001", "0011101", "0111001", "0000101", "0010001", "0001001", "0010111", "1110010", "1100110", "1101100", "1000010", "1011100", "1001110", "1010000", "1000100", "1001000", "1110100");
var parity = "011010222222"; /* スペースとバーの組み合わせパターン、oerではなく、012とすることで、配列を一次元にした */

/* 最終的なバーコードの元になる12文字それぞれのスペースとバーの組み合わせパターンを並べる（先頭・中間・末尾も付加） */
var bar = "0000000000101"; /* barに、スペースとバーの組み合わせを代入する。まず、先頭の付加分 */
var barISBN = "<span>9</span>"; /* バーコードの下に表示するISBN文字列（この項、特に説明なし） */
for (var i = 0; i < 12; i++){
	var barFlg; /* 三種類のパターンと数値の組み合わせ(数値、0－20） */
	var barVal; /* スペースとバーの組み合わせ */
	barFlg = Number(parity.substr(i,1))*10+Number(barNum.substr(i,1));
	barVal = module[barFlg];
	barISBN += "<span>" + barNum.substr(i,1) + "</span>";
	if(i==6){
		bar += "01010" + barVal;
	}else{
		bar += barVal;
	}
}
bar += "1010000000000";

/* 出来上がったbar（0と1の組み合わせ）を描画するためのSVGを記述する */
var barSvgX = 0;
var barSvgWidth = 0;
var barSwitch = 0;
var preVal = 0;
var barSvgFill ="";
var barSvg ="";
for(var j = 0; j < 115; j++){
	var val = Number(bar.substr(j,1));
	barSwitch = val - preVal;
	if( barSwitch == 1 ){
		barSvgFill = "#000";
		barSvgX = j;
		barSvgWidth =1;
	}else if( barSwitch == -1 ){
		barSvg += "<rect x='" + barSvgX + "' y='0' width='" + barSvgWidth + "' height='30' style='fill:" + barSvgFill + ";' />";
	}else{
		barSvgWidth += 1;
	}
	preVal = val;
}

barSvg = "<svg class='JAN-barcode' viewBox='0, 0, 115, 30' viewversion='1.1' xmlns='http://www.w3.org/2000/svg'>" + barSvg + "</svg>";
var barNumber = "<div class='JAN-isbn'>" + barISBN+ "</div>";

document.getElementById("barj").innerHTML = "<div class='JAN'>" + barSvg + barNumber + "</div>";

10.HTMLとCSSは以下の通り

＜div id="barj"＞</div>

.JAN{height:5vw;width:11.5vw;}
.JAN-barcode{width:100%;}
.JAN-isbn{height:1vw;width:9.5vw;margin:-0.7vw 1vw 0 1vw;font-size:1vw;display:flex;justify-content: space-between;}

以上、書籍JANコードの一段目のバーコードの作成に特化した説明とjavascriptの具体例でした。

「vslip」はPHPで書きましたが、今回、汎用性を高めるために、javascriptに書き直してみました。javascriptなら、出版社のWebサイトなどでも、より幅広く活用ができそうです。自分も、とりあえず、「重版出来ですYO！」の個別書誌情報ページや自社サイトなどでバーコードを表示してみます（「重版出来ですYO！」はお店で切れてることも多いようなので、現物なしでも発注できる流れが出来るとありがたいかも）。

Webページにバーコードを表示することが、書店からの受注にプラスになるかどうかは今のところまったくわかりません。ですが、「タブレットなどで検索した画面のバーコードをハンディターミナルでスキャン」といった使用シーンは、一見アナログに見えても、それぞれの使い勝手を考えると合理的なようにも思えます。どうですかね。