バーコード - Javascript

バーコードの種類

バーコードの規格	内容
CODE128	アスキーコード128文字（数字、アルファベット大文字/小文字、記号、制御コード）全てをバーコード化することができます
CODE39	数字、アルファベット大文字、記号(-.$/+%)、半角スペースに対応しています
QRcode	数字・英字・漢字・カナ・記号バイナリ・制御コード等が使用でき、縦・横の2次元でデータを表現しているので、バーコードと同じ情報量であれば、10分の1程度の大きさ

Javascript で、バーコードを作成するライブラリには「 qrcode.js 」や「 JsBarcode 」などがあります。

「 qrcode.js 」と「 JsBarcode 」の CDN の読み込み

JsBarcode

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.6/JsBarcode.all.min.js"></script>

qrcode.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

バーコードの作成

「 qrcode.js 」や「 JsBarcode 」のライブラリを使用します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.6/JsBarcode.all.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
</head>
<body>
  <h1>バーコード生成アプリ</h1>

  <p><input type="text" id="txt"></p>

  <p><button type="button" id="code">Barcode</button></p>
  <p><button type="button" id="qrcode">QR code</button></p>

  <div id="img_box"></div>
</body>
</html>

script.js

window.onload = function() {
  let code = document.getElementById('code');
  let qrcode = document.getElementById('qrcode');
  let img_box = document.getElementById('img_box');

  code.addEventListener('click', () => {
    let txt = document.getElementById('txt').value;
    img_box.innerHTML = '<svg id="barcode"></svg>';
    console.log(txt);
    JsBarcode("#barcode", txt, {
      format: "CODE128"
    });

    const input = document.getElementById('barcode');
    
    const svgData = new XMLSerializer().serializeToString(input);
    
    const image = new Image();
    const width = input.getAttribute('width');
    const height = input.getAttribute('height');
    const canvas = document.createElement('canvas');

    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);

    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, width, height);

    img_box.innerHTML = '<img alt="" id="output">';
    const output = document.getElementById('output');

    output.src = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(svgData);
  });

  qrcode.addEventListener('click', () => {
    let txt = document.getElementById('txt').value;
    img_box.innerHTML = '<div id="qrcode_display"></div>';
    var qrcode = new QRCode('qrcode_display', {
      text:  txt,
      width: 128,
      height: 128,
      correctLevel : QRCode.CorrectLevel.H
    });  
  });
}

バーコードリーダーを使ってバーコードを読み取る

バーコードリーダーを使ってバーコードを読みとってみます。

一般的なバーコードリーダは、読み取ったバーコードをキーボードのキー入力として置き換えます。

バーコードを読み取ったあと、最後に「 Enter 」キーを入力しています。

バーコードは適当なものを準備してください。ここでは、「 1923055034006 」というデータのバーコードを読み取っています。

Chrome デベロッパーツールを開き、コンソールにバーコードのデータ表示されるか確認してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

script.js

window.onload = function(){

    let txt = "";

    document.addEventListener('keypress', (e) => {
        console.log(e);
    });
}

// result Chrome コンソール
main.js:7 KeyboardEvent {isTrusted: true, key: '1', code: 'Digit1', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '9', code: 'Digit9', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '2', code: 'Digit2', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '3', code: 'Digit3', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '0', code: 'Digit0', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '5', code: 'Digit5', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '5', code: 'Digit5', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '0', code: 'Digit0', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '3', code: 'Digit3', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '4', code: 'Digit4', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '0', code: 'Digit0', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '0', code: 'Digit0', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: '6', code: 'Digit6', location: 0, ctrlKey: false, …}
main.js:7 KeyboardEvent {isTrusted: true, key: 'Enter', code: 'Enter', location: 0, ctrlKey: false, …}

ブラウザ上に読み取ったバーコードのデータを表示させる

「 index.html 」をブラウザで開いた状態にし、適当のバーコードを用意してバーコードリーダーで読み取ってください。

バーコードのデータがブラウザ上に表示されます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p id="display"></p>
</body>
</html>

script.js

const display = document.getElementById("display");

  let txt = "";

  document.addEventListener('keypress', (e) => {
    if(e.key == "Enter"){
      display.innerHTML = txt;
    } else {
      txt += e.key;
    }
  });