CODE128で改行入りバーコードを作る：放課後マイコンクラブ：SSブログ

	ブログをはじめるログイン

2.5GbE計画 - 製品編｜USB type-C PD対応ディスプレ.. ブログトップ

CODE128で改行入りバーコードを作る　[JavaScript] [編集]

あるあるですが、端末にバーコードリーダーがあるけど、ログイン画面にはIDとパスワードの入力欄とログインボタンがあって、キーボードから、ID → [Enter] → パスワード → [Enter] でログインするシステム。
バーコードで楽々入力だと便利なのですが、CODE39やNW-7では入力できない文字があったり、IDとパスワードを１回で読み込むことができないということがあります。
それをCODE128で解決してみました。

HTML5ですので、以下のコードをテキストエディタにコピーして、文字コードはshift JISではなくUTF-8で、拡張子をhtmlにして保存してください。できたバーコードは右クリックで画像保存できます。（canvasのサイズ変更処理をすることでcanvasのクリアも兼ねていて、背景のリセット処理を省いているので透過画像になっています。）
スマホのバーコード、QRコード読み込みアプリで読み込めることを確認しました。
お約束ですが、ID・パスワードの管理は、印刷したものを無くさないようにするのはもちろん、上司やシステム管理の人にばれないように自己責任でおこなってください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バーコード128太郎</title>
<script type="text/javascript">
const BC128 = [
    "212222","222122","222221","121223","121322","131222","122213","122312",
    "132212","221213","221312","231212","112232","122132","122231","113222",
    "123122","123221","223211","221132","221231","213212","223112","312131",
    "311222","321122","321221","312212","322112","322211","212123","212321",
    "232121","111323","131123","131321","112313","132113","132311","211313",
    "231113","231311","112133","112331","132131","113123","113321","133121",
    "313121","211331","231131","213113","213311","213131","311123","311321",
    "331121","312113","312311","332111","314111","221411","431111","111224",
    "111422","121124","121421","141122","141221","112214","112412","122114",
    "122411","142112","142211","241211","221114","413111","241112","134111",
    "111242","121142","121241","114212","124112","124211","411212","421112",
    "421211","212141","214121","412121","111143","111341","131141","114113",
    "114311","411113","411311","113141","114131","311141","411131","211412",
    "211214","211232","2331112"];                           // code128パターン BSBSBS(B)

function dispCode(f) {
    let codeText, checkDigit, i, c, n, x, w;
    if( !f.txt1.value ) { f.txt1.focus();  return; }        // 入力されるまでfocusが留まる
    if( !f.txt2.value ) { f.txt2.focus();  return; }        //  → [Enter]で次のボックスへ
    // データの作成
    codeText  = BC128[ 104 ];   checkDigit = 104;  n = 0;   // STARTコード(B)設定
    for(i = 0; i < f.txt1.value.length; i++) {              // 1つ目のエンコード
        c = f.txt1.value.charCodeAt(i) - 32;                //     文字に対応する数値
        codeText += BC128[c];   checkDigit +=  c  * ++n;    //     パターン追加,check digit計算
    }
    codeText += BC128[ 101 ];   checkDigit += 101 * ++n;    // 改行:code A に変更
    codeText += BC128[  77 ];   checkDigit +=  77 * ++n;    //     :CR
    codeText += BC128[  74 ];   checkDigit +=  74 * ++n;    //     :LF
    codeText += BC128[ 100 ];   checkDigit += 100 * ++n;    //     :code B に戻す
    for(i = 0; i < f.txt2.value.length; i++) {              // 2つ目のエンコード
        c = f.txt2.value.charCodeAt(i) - 32;
        codeText += BC128[c];   checkDigit +=  c  * ++n;
    }
    codeText += BC128[ checkDigit % 103 ];                  // チェックディジット
    codeText += BC128[ 106 ];                               // STOPコード設定
    // バーコードを表示
    const ctx = document.getElementById("codeImage").getContext("2d");
    document.getElementById("codeImage").width = codeText.length * 11 / 6 + 22;
    for(i = 0, x = 10; i < codeText.length; i++) {
        w = parseInt(codeText.charAt(i));
        if( !(i%2) ) ctx.fillRect(x, 2, w, 60);
        x += w;
    }
}
</script>
</head>
<body>
<h1 style="background-color:green;padding-left:10px;color:white;">バーコード128太郎</h1>
<p>
<form method="post" name="f" onsubmit="dispCode(this); return false;">
<input type="text" name="txt1" size="10" pattern="^[¥x20-¥x7F]+$" autofocus />
<input type="text" name="txt2" size="10" pattern="^[¥x20-¥x7F]+$" />
<input type="submit" value="作成" /> 
<input type="reset" onClick="f.txt1.focus();" />
</form>
<p>
<canvas id="codeImage" height="64" style="border:solid 1px lightgray;"></canvas>
</body>
</html>