CODE39に準じたバーコードフォントを作成する

バーコード・CODE39

QRコードと比べて情報量の少ないバーコードですがフォントとして利用すれば大量の表示が可能である事と視認性の高さやスペースの問題から今でも多く使用されています。

そんなバーコードには多くの種類があります。その中でも数字だけでなくアルファベットと一部の記号が使用でき、視認性に優れるCODE39は産業界でよく使用される存在です。

実際、自分自身も前職が製造業であったので進捗管理システム上でよくスキャンしていました。様々なきれいと言い難い協力会社の現場に廻されてときに猛者感を醸し出すものもいた図面と伝票ですが、バーコードスキャンエラーが出ることはありませんでした。今思うとこのバーコードもCODE39だったかもしれません。

CODE39について

CODE39は1975年に米インターメック社で開発されたバーコード規格で、数字、アルファベット、記号の合計43個の文字を符号化したものです。

9本の太細のバー、スペースで一つの文字（キャラクタ）を表わし、3本は常に太いバー・スペースになります。また始まりと終わりはバーとなります。文字列の終始には、スタート/ストップキャラクタと呼ばれる*（アスタリスク）が付けなくてはなりません。例えば123と表示したい場合は*123*と入力する必要があります。

それぞれの文字の区切りは細いスペースで表示され、キャラクタ間ギャップと呼びます。通常、細い線幅と同じサイズで作られます。太い線幅は細い線幅の2倍となっていますが、規定では最大値は3～5.3倍になっています。

日本国内では日本電子機械工業会（EIAJ）が“EIAJ-EDI標準”として規格化しており、アメリカなど海外では自動車や電気関係で数多く使用されています。

各符号パターン

b:細バー、B:太バー、s:細スペース、S:太スペース

キャラクタ	パターン	キャラクタ	パターン	キャラクタ	パターン	キャラクタ	パターン
0	bsbSBsBsb	A	BsbsbSbsB	K	BsbsbsbSB	U	BSbsbsbsB
1	BsbSbsbsB	B	bsBsbSbsB	L	BsbsbsbSB	V	bSBsbsbsB
2	bsBSbsbsB	C	BsBsbSbsb	M	BsBsbsbSb	W	BSBsbsbsb
3	BsBSbsbsb	D	bsbsBSbsB	N	bsbsBsbSB	X	bSbsBsbsB
4	bsbSBsbsB	E	BsbsBSbsb	O	BsbsBsbSb	Y	BSbsBsbsb
5	BsbSBsbsb	F	bsBsBSbsb	P	bsBsBsbSb	Z	bSBsBsbsb
6	bsBSBsbsb	G	bsbsbSBsB	Q	bsbsbsBSB	-	bSbsbsBsB
7	bsbSbsBsB	H	BsbsbSBsb	R	BsbsbsBSb	.	BSbsbsBsb
8	BsbSbsBsb	I	bsBsbSBsb	S	bsBsbsBSb		bSBsbsBsb
9	bsBSbsBsb	J	bsbsBSBsb	T	bsbsBsBSb	*	bSbsBsBsb

EugenesCODE39

ここまで説明してきましたが、CODE39に限らず最適なファイルを入手するのが煩わしいと感じていました。再配布も容易にでき、商用利用も可能なMITライセンスのようなフォントファイルは無いものかと。そこで一念発起し、作成してみました。その名もEugenesCODE39です。ライセンスはMITライセンスであるので商用利用はもちろん、再配布や改変も可能です。

通常のCODE39には@に該当するコードはありませんが、MITライセンスを示す特殊な記号を当てています。配布ファイルはttfとwoffの2つになります。(woffはgithubのみで配布)文字サイズは20ptで文字数は20文字以内を推奨します。必ず*アスタリスクで囲み、十分な余白を置いてください。

配布はgithubかここです。またAndroidアプリForMe12.6181のSETUP＞マクロシート取得からも入手できます。

作成過程

フォント作成ソフトはfontforgeを利用しました。ただ、直接作成するのは骨が折れること間違いなしだったので簡単なSVG自動作成プログラムを書くことにしました。どの言語で書くか一瞬悩みましたが、自身が開発・運営しているAndroidアプリForMeのミニアプリ開発機能のデバッグを兼ねてスマホ上でJavaScriptで作成することにしました。主なコードは以下になります。

HTML

<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 260"  width="260" height="260"></svg>

JavaScript

const sv = document.getElementById("msvg");

function renderCode39(code){//レンダリングコード
    var xx = 10, yy = 260, ww = 20;
    for(let i = 0;i < 9;i++){
        const lne = document.createElementNS("http://www.w3.org/2000/svg","line");
        if(code.charAt(i) === "b" || code.charAt(i) === "s"){
            ww = 20;
        }else if(code.charAt(i) === "B" || code.charAt(i) === "S"){
            ww = 40;
        }else{
            sv.innerHTML = "";
            break;
        }
        
        xx += ww/2;
        
        if(code.charAt(i) === "b" || code.charAt(i) === "B"){
            
            lne.setAttribute("x1",xx);
        	lne.setAttribute("y1",0);
	        lne.setAttribute("x2",xx);
	        lne.setAttribute("y2",yy);
	        lne.setAttribute("stroke","black");
	        lne.setAttribute("stroke-width",ww);
	        
	        xx += ww/2;
	        
	        sv.appendChild(lne);
        }else{
            xx += ww/2;
        }
    }
    
}

function shareSVG(){//共有用コード
    const svgText = new XMLSerializer().serializeToString(sv);
    const svgBlob = new Blob([svgText], { type: 'image/svg+xml' });
    const svgUrl = URL.createObjectURL(svgBlob);
    var name = "任意の名前";
    if(name.length === 0){
        name = "blank";
    }
    name += ".svg";
    exportBottomSheet(name,svgText);//AndroidアプリForMe独自機能
}

シンタックスを指定しました。ご指摘ありがとうございます。

このミニアプリは符号コードをb,s,B,Sで入力するとSVGで表示と保存ができるようにしています。手間はかかりますがダブルチェックの意味合いも持たせています。作成したSVGファイルをパソコンに送り、fontforgeで取り込んでttf、woffで出力しました。

fontforgeは日本語パスが開けないのとパス移動に時間がかかるのが厄介でしたが元になるSVGファイルさえあれば簡単にフォントファイルを出力できるので重宝しました。

おわりに

EugenesCODE39で生産性をあげる改善をしていただければ作成者冥利に付きます。