Barcode.wasm

ブラウザだけで、18種のバーコードを自在に生成。

ユーザーズマニュアル

バージョン 1.1 — 2026年2月

有限会社 パオ・アット・オフィス

https://www.pao.ac/

目次

1. はじめに
2. 1.1 Barcode.wasmとは
3. 1.2 特長

4. 1.3 対応バーコード一覧

5. できること

6. 2.1 PNG画像出力 — そのまま表示できるBase64
7. 2.2 SVGベクター出力 — 拡大しても美しい

8. 2.3 カスタマイズ — 色もテキストも思いのままに

9. 導入方法

10. 3.1 ダウンロード・インストール
11. 3.2 HTML + JavaScript での導入
12. 3.3 TypeScript + Vite での導入

13. 3.4 npm パッケージでの導入

14. クイックスタート — 最初の1本を生成しよう

15. 4.1 JavaScript + PNG出力
16. 4.2 JavaScript + SVG出力
17. 4.3 TypeScript + PNG出力

18. 4.4 TypeScript + SVG出力

19. 実践サンプル集

20. 5.1 1次元バーコード — 物流・工業の定番
21. 5.2 2次元バーコード — 大容量データを小さな面積に
22. 5.3 GS1系バーコード — 流通のインフラ

23. 5.4 商品・郵便バーコード — 身の回りのバーコード

24. APIリファレンス

25. 6.1 共通メソッド（全バーコード）
26. 6.2 1次元バーコード共通メソッド
27. 6.3 Code39
28. 6.4 Code93
29. 6.5 Code128
30. 6.6 GS1-128
31. 6.7 NW-7（Codabar）
32. 6.8 Matrix 2of5
33. 6.9 NEC 2of5
34. 6.10 JAN-8（EAN-8）
35. 6.11 JAN-13（EAN-13）
36. 6.12 UPC-A
37. 6.13 UPC-E
38. 6.14 GS1 DataBar 標準型
39. 6.15 GS1 DataBar 限定型
40. 6.16 GS1 DataBar 拡張型
41. 6.17 郵便カスタマバーコード
42. 6.18 QRコード
43. 6.19 DataMatrix

44. 6.20 PDF417

45. 動作環境

46. ライセンス・お問い合わせ

47. 8.1 使用許諾
48. 8.2 ライセンス

1. はじめに

1.1 Barcode.wasmとは

商品のパッケージ、宅配便の送り状、病院の検体ラベル、工場の部品管理タグ——。 私たちの日常には、驚くほど多くのバーコードが存在しています。

Barcode.wasm は、そのバーコードを ブラウザだけで生成 できるライブラリです。

C++で開発された高性能バーコードエンジンをWebAssembly（WASM）にコンパイルしているため、サーバー通信は一切不要。JavaScript / TypeScript から呼び出すだけで、1次元・2次元あわせて 全18種 のバーコードを、PNG画像 または SVGベクター で出力できます。

たった数行のコードで、目の前にバーコードが現れる。 その手軽さを、ぜひ体感してみてください。

const barcode = new module.Jan13();
barcode.setShowText(true);
const result = barcode.draw('491234567890', 300, 100);
document.getElementById('barcode').src = result;
barcode.delete();

これだけで、おなじみの13桁商品バーコードが画面に表示されます。

1.2 特長

1.3 対応バーコード一覧

1次元バーコード（11種類）

GS1 DataBar（3種類）

郵便バーコード（1種類）

2次元バーコード（3種類）

2. できること

2.1 PNG画像出力 — そのまま表示できるBase64

draw() メソッドを呼ぶだけで、Base64エンコードされたPNG画像が返ってきます。 <img> タグの src にそのまま渡すだけ。ファイル保存もサーバー通信も不要です。

const barcode = new module.Code128();
barcode.setShowText(true);
const base64 = barcode.draw('Hello123', 400, 100);

// これだけでバーコードが表示される
document.getElementById('barcode').src = base64;
barcode.delete();

PNGが向いている場面: - 画面上でのプレビュー表示 - 固定解像度での画像出力 - あらゆるブラウザでの互換性を重視する場合

2.2 SVGベクター出力 — 拡大しても美しい

出力形式を 'svg' に切り替えるだけで、ベクター形式のSVG文字列が得られます。 どれだけ拡大しても線がぼやけないため、印刷用途に最適です。

const barcode = new module.Code128();
barcode.setShowText(true);
barcode.setOutputFormat('svg');
const svg = barcode.draw('Hello123', 400, 100);

// HTMLに直接挿入
document.getElementById('container').innerHTML = svg;
barcode.delete();

SVGが向いている場面: - ラベル印刷（拡大しても劣化しない） - CSSでバーコードの色やサイズを動的に変更したい場合 - ファイルサイズを小さく抑えたい場合

ヒント: 同じバーコードオブジェクトで setOutputFormat() を切り替えれば、PNG版とSVG版の両方を生成できます。プレビューはPNG、ダウンロードはSVG、という使い分けも簡単です。

2.3 カスタマイズ — 色もテキストも思いのままに

色を変える

前景色（バーの色）と背景色を自由に指定できます。 透明度（アルファ値）にも対応しているので、背景を透明にすることも可能です。

// 紺色のバーにアイボリーの背景
barcode.setForegroundColor(0, 0, 128, 255);
barcode.setBackgroundColor(255, 255, 240, 255);

// 背景を透明にする（ロゴの上に重ねたいときなどに）
barcode.setBackgroundColor(0, 0, 0, 0);

テキスト表示を調整する

バーコード下部のテキスト（ヒューマンリーダブル）は、表示・非表示だけでなく、サイズや配置まで細かく調整できます。

barcode.setShowText(true);          // テキストを表示する
barcode.setTextFontScale(1.2);      // 少し大きめに
barcode.setTextGap(0.5);            // バーとの隙間を狭く
barcode.setTextEvenSpacing(true);   // 1文字ずつ均等に配置

ヒント: setTextEvenSpacing(true) にすると、テキストが各バーの真下に揃って配置されます。見た目がすっきりするので、一般的な1Dバーコードではおすすめです。

バー幅を微調整する（印刷のにじみ対策）

実際に印刷すると、インクのにじみで黒バーが太くなることがあります。 バーコードリーダーの読み取り精度が落ちてしまう場合は、この機能で補正しましょう。

barcode.setPxAdjustBlack(-1);  // 黒バーを1px細く（にじみ対策）
barcode.setPxAdjustWhite(1);   // 白スペースを1px広く

幅ぴったり描画

指定した幅にバーコードをぴったり収めたい場合に使います。

barcode.setFitWidth(true);   // 小数ピクセルを使って幅ぴったりに
barcode.setFitWidth(false);  // 整数ピクセルのみ（若干余白が出ることがある）

3. 導入方法

導入はとてもシンプルです。必要なのは2つのファイル（barcode.js と barcode.wasm）だけ。 お好みの方法で、プロジェクトに取り込んでください。

3.1 ダウンロード・インストール

ダウンロード

https://www.pao.ac/barcode.wasm/#download

npm

npm install @pao-at-office/barcode-wasm

パッケージURL: https://www.npmjs.com/package/@pao-at-office/barcode-wasm

3.2 HTML + JavaScript での導入

最もシンプルな方法です。HTMLファイル1つで動きます。

ファイル構成

my-project/
├── index.html
└── wasm/
    ├── barcode.js
    └── barcode.wasm

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Barcode.wasm サンプル</title>
</head>
<body>
    <h1>バーコード生成</h1>
    <img id="barcode" alt="バーコード">

    <script type="module">
        // WASMモジュールをインポート
        import createBarcodeModule from './wasm/barcode.js';

        // モジュールを初期化（非同期）
        const module = await createBarcodeModule({
            locateFile: (path) => {
                if (path.endsWith('.wasm')) {
                    return './wasm/barcode.wasm';
                }
                return path;
            }
        });

        // バーコード生成
        const barcode = new module.Code39();
        barcode.setShowText(true);
        const base64 = barcode.draw('HELLO123', 400, 100);
        document.getElementById('barcode').src = base64;

        // メモリ解放（重要！）
        barcode.delete();
    </script>
</body>
</html>

ローカルでの実行方法

注意: HTMLファイルをダブルクリックで直接開くと、セキュリティ制限でWASMを読み込めません。ローカルサーバーを起動してください。

VS Code + Live Server（おすすめ）: 1. VS Codeで「Live Server」拡張機能をインストール 2. HTMLファイルを右クリック →「Open with Live Server」

Python 3:

python -m http.server 8080
# → http://localhost:8080

Node.js:

npx http-server -p 8080
# → http://localhost:8080

3.3 TypeScript + Vite での導入

TypeScriptの型安全を活かしたい方向けです。

1. プロジェクト作成

npm create vite@latest barcode-demo -- --template vanilla-ts
cd barcode-demo
npm install

2. WASMファイルの配置

barcode-demo/
├── src/
│   ├── wasm/
│   │   ├── barcode.js      ← ここに配置
│   │   └── barcode.wasm    ← ここに配置
│   └── main.ts
├── index.html
├── package.json
└── vite.config.ts

3. vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ['./src/wasm/barcode.js']
  },
  assetsInclude: ['**/*.wasm']
})

4. main.ts

interface BarcodeModule {
  Code39: new () => Barcode1D;
  // 他のバーコードクラスも同様に定義可能
}

interface Barcode1D {
  setShowText(show: boolean): void;
  setOutputFormat(format: string): void;
  setTextEvenSpacing(even: boolean): void;
  draw(data: string, width: number, height: number): string;
  delete(): void;
}

async function init(): Promise<void> {
  const Module = await import('./wasm/barcode.js');
  const module: BarcodeModule = await Module.default();

  const barcode = new module.Code39();
  barcode.setShowText(true);
  barcode.setTextEvenSpacing(true);
  barcode.setOutputFormat('png');

  const result = barcode.draw('HELLO123', 400, 100);

  const img = document.getElementById('barcode') as HTMLImageElement;
  img.src = result;

  barcode.delete();
}

document.addEventListener('DOMContentLoaded', init);

ヒント: npm パッケージ版には型定義ファイル（index.d.ts）が含まれているため、上記のような手動の型定義は不要になります。

5. 開発サーバー起動

npm run dev
# → http://localhost:5173

3.4 npm パッケージでの導入

npm パッケージを使えば、型定義もついてきます。

npm install @pao-at-office/barcode-wasm

import { initBarcodeModule } from '@pao-at-office/barcode-wasm';

async function generateBarcode(): Promise<void> {
  const module = await initBarcodeModule({
    wasmPath: '/barcode.wasm'
  });

  const barcode = new module.Code39();
  barcode.setShowText(true);
  barcode.setTextEvenSpacing(true);
  const base64 = barcode.draw('HELLO123', 400, 100);

  document.getElementById('barcode')!.src = base64;

  barcode.delete();  // 忘れずに！
}

4. クイックスタート — 最初の1本を生成しよう

ここでは、PNG出力とSVG出力のそれぞれで、コピー＆ペーストですぐ動くサンプルを紹介します。

4.1 JavaScript + PNG出力

<img id="barcode" alt="Code39">

<script type="module">
import createBarcodeModule from './wasm/barcode.js';
const module = await createBarcodeModule();

const barcode = new module.Code39();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);

const base64 = barcode.draw('HELLO123', 400, 100);
document.getElementById('barcode').src = base64;

barcode.delete();
</script>

draw() の戻り値は data:image/png;base64,iVBORw0KGgo... 形式の文字列です。 <img> の src にそのまま設定できます。

4.2 JavaScript + SVG出力

<div id="container"></div>
<a id="download" download="barcode.svg">SVGをダウンロード</a>

<script type="module">
import createBarcodeModule from './wasm/barcode.js';
const module = await createBarcodeModule();

const barcode = new module.Code39();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setOutputFormat('svg');

const svg = barcode.draw('HELLO123', 400, 100);

// SVGは直接HTMLに挿入
document.getElementById('container').innerHTML = svg;

// ダウンロードリンクも作れる
const blob = new Blob([svg], { type: 'image/svg+xml' });
document.getElementById('download').href = URL.createObjectURL(blob);

barcode.delete();
</script>

SVGモードでは <svg xmlns="...">...</svg> 形式の文字列が返ります。

4.3 TypeScript + PNG出力

interface BarcodeModule {
  Code39: new () => Barcode1D;
}

interface Barcode1D {
  setShowText(show: boolean): void;
  setOutputFormat(format: string): void;
  setTextEvenSpacing(even: boolean): void;
  draw(data: string, width: number, height: number): string;
  delete(): void;
}

async function generatePNG(): Promise<void> {
  const Module = await import('./wasm/barcode.js');
  const module: BarcodeModule = await Module.default();

  const barcode = new module.Code39();
  barcode.setShowText(true);
  barcode.setTextEvenSpacing(true);

  const base64: string = barcode.draw('HELLO123', 400, 100);

  const img = document.getElementById('barcode') as HTMLImageElement;
  img.src = base64;

  barcode.delete();
}

generatePNG();

4.4 TypeScript + SVG出力

interface BarcodeModule {
  Code39: new () => Barcode1D;
}

interface Barcode1D {
  setShowText(show: boolean): void;
  setOutputFormat(format: string): void;
  setTextEvenSpacing(even: boolean): void;
  draw(data: string, width: number, height: number): string;
  delete(): void;
}

async function generateSVG(): Promise<void> {
  const Module = await import('./wasm/barcode.js');
  const module: BarcodeModule = await Module.default();

  const barcode = new module.Code39();
  barcode.setShowText(true);
  barcode.setTextEvenSpacing(true);
  barcode.setOutputFormat('svg');

  const svg: string = barcode.draw('HELLO123', 400, 100);

  const container = document.getElementById('container') as HTMLDivElement;
  container.innerHTML = svg;

  // ダウンロードリンクを作成
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  const link = document.getElementById('download') as HTMLAnchorElement;
  link.href = URL.createObjectURL(blob);
  link.download = 'barcode.svg';

  barcode.delete();
}

generateSVG();

5. 実践サンプル集

ここからは、バーコードの種類ごとに実践的なサンプルを紹介します。 各バーコードが「どんな場面で使われているか」も添えていますので、用途に合ったバーコードを選ぶ参考にしてください。

5.1 1次元バーコード — 物流・工業の定番

Code39 — 工場で最も古くから使われるバーコード

英数字と一部の記号を表現できます。スタート/ストップコード（*）で囲まれるのが特徴です。

const barcode = new module.Code39();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setShowStartStop(true);     // *HELLO123* と表示
const result = barcode.draw('HELLO123', 400, 100);
barcode.delete();

入力可能: 数字（0-9）、英大文字（A-Z）、記号（- . $ / + % スペース）

Code93 — Code39の高密度版

Code39と同じ文字を、より狭いスペースでエンコードできます。さらにASCII全文字に対応。

const barcode = new module.Code93();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
const result = barcode.draw('Hello123', 400, 100);
barcode.delete();

Code128 — 物流業界の標準

ASCII全文字に対応し、数字は高密度でエンコードできるため、物流伝票で広く使われています。コードモードは通常 AUTO にしておけば、最短幅になるよう自動で最適化されます。

const barcode = new module.Code128();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setCodeMode('AUTO');  // AUTO / A / B / C
const result = barcode.draw('Hello123', 400, 100);
barcode.delete();

ヒント: 制御文字を入力するには {CR}, {LF}, {TAB} のように中括弧で囲みます。

NW-7 (Codabar) — 宅配便の送り状でおなじみ

先頭と末尾にスタート/ストップコード（A/B/C/D）を付けるのがルールです。

const barcode = new module.NW7();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setShowStartStop(true);
const result = barcode.draw('A1234567A', 400, 100);
barcode.delete();

5.2 2次元バーコード — 大容量データを小さな面積に

QRコード — 日本発、世界で最も使われている2Dコード

URL、テキスト、連絡先——なんでも格納できる万能選手です。日本語もそのままエンコードできます。

const qr = new module.QR();
qr.setStringEncoding('utf-8');
qr.setErrorCorrectionLevel('M');   // 復元能力: L(7%) / M(15%) / Q(25%) / H(30%)
qr.setVersion(0);                  // 0=自動（データに応じた最小サイズ）
const result = qr.draw('https://www.pao.ac/', 300);
qr.delete();

DataMatrix — 極小マーキングの世界標準

電子部品やヘルスケア製品の超小型マーキングに使われています。小さくても大容量。

const dm = new module.DataMatrix();
dm.setStringEncoding('utf-8');
dm.setCodeSize('AUTO');
dm.setEncodeScheme('AUTO');
const result = dm.draw('Hello World', 200);
dm.delete();

PDF417 — 運転免許証にも使われている大容量コード

1次元バーコードを積み重ねたような構造で、テキスト・数字・バイナリの大量データを格納できます。

const pdf = new module.PDF417();
pdf.setStringEncoding('utf-8');
pdf.setErrorLevel(2);
pdf.setColumns(3);
pdf.setAspectRatio(3.0);
pdf.setYHeight(3);
const result = pdf.draw('Hello World', 400);
pdf.delete();

5.3 GS1系バーコード — 流通のインフラ

GS1-128 — AI（アプリケーション識別子）で情報を構造化

ロット番号、有効期限、重量——さまざまな情報をAIコードで構造化して格納します。

const gs1 = new module.GS1_128();
gs1.setShowText(true);
gs1.setTextEvenSpacing(true);
const result = gs1.draw('{FNC1}0100012345678905{AI}10ABC123', 500, 120);
gs1.delete();

コンビニバーコード（標準料金代理収納）

公共料金の払込票に印字されているあのバーコードです。専用メソッド drawConvenience() で生成します。

const gs1 = new module.GS1_128();
gs1.setShowText(true);
const result = gs1.drawConvenience(
  '{FNC1}9191234500000000000000452087500401310029500', 500, 150
);
gs1.delete();

GS1 DataBar 標準型 — 青果・精肉売り場で活躍

重量や価格情報をコンパクトにエンコードできるバーコードです。

const db = new module.GS1DataBar14();
db.setShowText(true);
db.setSymbolType('OMNIDIRECTIONAL');  // 標準型
// db.setSymbolType('STACKED');           // 二層型
// db.setSymbolType('STACKED_OMNIDIRECTIONAL'); // 標準二層型
const result = db.draw('1234567890128', 200, 80);
db.delete();

GS1 DataBar 拡張型 — クーポンや特売情報も格納可能

可変長データに対応し、多層型（スタック）にも対応しています。

// 一層型
const db = new module.GS1DataBarExpanded();
db.setShowText(true);
db.setSymbolType('UNSTACKED');
const result1 = db.draw('0100012345678905{AI}10ABC123', 400, 80);

// 多層型（スペースが限られる場合）
db.setSymbolType('STACKED');
db.setNoOfColumns(4);
const result2 = db.drawStacked('0100012345678905{AI}10ABC123', 300, 100);

db.delete();

5.4 商品・郵便バーコード — 身の回りのバーコード

郵便カスタマバーコード — 郵便物を高速仕分け

長さの異なる4種類のバー（ロング・セミアッパー・セミロウワー・タイミング）で住所情報を表現します。 幅はバーの本数から自動計算されるため、高さだけを指定します。

const yubin = new module.YubinCustomer();
const result = yubin.draw('27500263-29-2-401', 25);
yubin.delete();

入力形式: 郵便番号7桁 + 住所表示番号（ハイフン区切り可）

JAN/EAN バーコード — スーパーのレジで毎日活躍

// JAN-13（日本の標準的な商品バーコード）
const jan13 = new module.Jan13();
jan13.setShowText(true);
jan13.setExtendedGuard(true);      // ガードバーを長く伸ばす
jan13.setTextEvenSpacing(false);   // セクション別のテキスト配置
const result = jan13.draw('491234567890', 300, 100);
jan13.delete();

// JAN-8（小型商品向け）
const jan8 = new module.Jan8();
jan8.setShowText(true);
jan8.setExtendedGuard(true);
jan8.setTextEvenSpacing(false);
const result2 = jan8.draw('4901234', 200, 100);
jan8.delete();

チェックディジットは自動計算されるため、JAN-13なら12桁、JAN-8なら7桁を入力すればOKです。

ヒント: JAN/UPCバーコードでは setExtendedGuard() と setTextEvenSpacing() の組み合わせで見た目が変わります。商品バーコードらしい標準的な見た目にするには、 extendedGuard=true + textEvenSpacing=false の組み合わせがおすすめです。

UPC バーコード — 北米の商品コード

// UPC-A（12桁）
const upcA = new module.UPC_A();
upcA.setShowText(true);
upcA.setExtendedGuard(true);
upcA.setTextEvenSpacing(false);
const result = upcA.draw('01234567890', 300, 100);
upcA.delete();

// UPC-E（8桁、ゼロ圧縮版）
const upcE = new module.UPC_E();
upcE.setShowText(true);
upcE.setExtendedGuard(true);
upcE.setTextEvenSpacing(false);
const result2 = upcE.draw('425261', 200, 100);
upcE.delete();

6. APIリファレンス

ここからは、全メソッドの詳細なリファレンスです。 各メソッドのパラメータ、戻り値、デフォルト値を網羅しています。

6.1 共通メソッド（全バーコード）

すべてのバーコードクラスで使用できるメソッドです。

setOutputFormat(format)

出力形式を設定します。

barcode.setOutputFormat('png');  // PNG（Base64）— デフォルト
barcode.setOutputFormat('svg');  // SVGベクター

デフォルト: 'png'

setForegroundColor(r, g, b, a)

前景色（バーの色）を設定します。

barcode.setForegroundColor(0, 0, 0, 255);      // 黒（デフォルト）
barcode.setForegroundColor(0, 0, 128, 255);    // 紺色
barcode.setForegroundColor(255, 0, 0, 128);    // 半透明の赤

setBackgroundColor(r, g, b, a)

背景色を設定します。

barcode.setBackgroundColor(255, 255, 255, 255);  // 白（デフォルト）
barcode.setBackgroundColor(255, 255, 240, 255);  // アイボリー
barcode.setBackgroundColor(0, 0, 0, 0);          // 透明

delete()

バーコードオブジェクトのメモリを解放します。使い終わったら必ず呼んでください。

const barcode = new module.Code39();
// ... バーコード生成 ...
barcode.delete();  // 必須！

なぜ必要？ WASMオブジェクトはJavaScriptのガベージコレクション対象外です。delete() を呼ばないとメモリリークの原因になります。ループで大量生成する場合は特に注意してください。

6.2 1次元バーコード共通メソッド

1次元バーコード（郵便カスタマバーコードを除く）で共通して使用できるメソッドです。

draw(data, width, height)

バーコードを生成します。

const result = barcode.draw('HELLO123', 400, 100);

戻り値: - PNG: data:image/png;base64,... 形式の文字列 - SVG: <svg xmlns="...">...</svg> 形式の文字列 - エラー時: 空文字列 ""

setShowText(show)

バーコード下部のテキスト表示を切り替えます。

デフォルト: true

setTextFontScale(scale)

テキストのフォントサイズ倍率を設定します。

barcode.setTextFontScale(1.0);  // 標準
barcode.setTextFontScale(1.5);  // 1.5倍
barcode.setTextFontScale(0.8);  // 小さめ

デフォルト: 1.0

setTextGap(scale)

バーコードとテキストの間隔を調整します。

barcode.setTextGap(1.0);  // 標準
barcode.setTextGap(0.5);  // 狭め
barcode.setTextGap(2.0);  // 広め

デフォルト: 1.0

setTextEvenSpacing(even)

テキストの均等割付を設定します。

barcode.setTextEvenSpacing(true);   // 1文字ずつ等間隔に配置
barcode.setTextEvenSpacing(false);  // テキストを中央にまとめて配置

デフォルト: true

使い分けのコツ: 一般的な1Dバーコード（Code39, Code128など）では true（均等割付）にすると、各文字がバーの真下に揃って読みやすくなります。一方、JAN/UPCバーコードでは false にして setExtendedGuard(true) と組み合わせるのが、商品バーコードとしての標準的な見た目です。

setFitWidth(fit)

指定した幅にぴったり収めるかどうかを設定します。

デフォルト: true

仕組み: true の場合、バーの幅に小数ピクセルを使用して指定幅にぴったり収めます。false の場合は整数ピクセルのみ使用するため、指定幅より若干小さくなることがあります。

setPxAdjustBlack(px)

黒バーの幅を微調整します。印刷時のにじみ補正に使います。

barcode.setPxAdjustBlack(0);   // 調整なし（デフォルト）
barcode.setPxAdjustBlack(-1);  // 1px細く（にじみ対策）
barcode.setPxAdjustBlack(1);   // 1px太く

デフォルト: 0

setPxAdjustWhite(px)

白スペースの幅を微調整します。

barcode.setPxAdjustWhite(0);   // 調整なし（デフォルト）
barcode.setPxAdjustWhite(1);   // 1px広く
barcode.setPxAdjustWhite(-1);  // 1px狭く

デフォルト: 0

6.3 Code39

クラス: Code39 — 工業用途の定番バーコード

入力可能文字: 0-9, A-Z, - . $ / + %, スペース

固有メソッド

setShowStartStop(show)

テキスト表示時にスタート/ストップコード（*）を表示するかどうか。

デフォルト: true

使用例

const barcode = new module.Code39();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setShowStartStop(true);
const result = barcode.draw('HELLO123', 400, 100);
barcode.delete();

6.4 Code93

クラス: Code93 — Code39の高密度版

入力可能文字: ASCII全文字（0x00〜0x7F）

固有メソッド: なし（共通メソッドのみ）

使用例

const barcode = new module.Code93();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
const result = barcode.draw('Hello123!@#', 400, 100);
barcode.delete();

6.5 Code128

クラス: Code128 — 物流の標準バーコード

入力可能文字: ASCII全文字（0x00〜0x7F）。制御文字は {CR}, {LF}, {TAB}, {FNC1} 等で入力。

固有メソッド

setCodeMode(mode)

デフォルト: 'AUTO'

ヒント: AUTO モードでは、データの内容を解析して CODE-A / B / C を動的に切り替え、最短幅になるよう自動最適化します。特別な理由がなければ AUTO のままで問題ありません。

使用例

const barcode = new module.Code128();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setCodeMode('AUTO');
const result = barcode.draw('Hello123', 400, 100);
barcode.delete();

6.6 GS1-128

クラス: GS1_128 — GS1標準準拠。物流・医療分野で使用

入力形式: AI（アプリケーション識別子）とデータの組み合わせ

固有メソッド

draw(data, width, height)

通常のGS1-128バーコードを生成します。

const result = barcode.draw('{FNC1}0100012345678905{AI}10ABC123', 500, 120);

drawConvenience(data, width, height)

標準料金代理収納用（コンビニバーコード）を生成します。

const result = barcode.drawConvenience(
  '{FNC1}9191234500000000000000452087500401310029500', 500, 150
);

使用例

// 通常のGS1-128
const gs1 = new module.GS1_128();
gs1.setShowText(true);
gs1.setTextEvenSpacing(true);
const result = gs1.draw('{FNC1}0100012345678905{AI}10ABC123', 500, 120);
gs1.delete();

// コンビニバーコード
const gs1c = new module.GS1_128();
gs1c.setShowText(true);
const result2 = gs1c.drawConvenience(
  '{FNC1}9191234500000000000000452087500401310029500', 500, 150
);
gs1c.delete();

6.7 NW-7（Codabar）

クラス: NW7 — 宅配便・図書館で使用

入力可能文字: 0-9, - $ : / . +, スタート/ストップ: A B C D

データ形式: 先頭と末尾にスタート/ストップコード（A/B/C/D）を付ける → A1234567A

固有メソッド

setShowStartStop(show)

デフォルト: true

使用例

const barcode = new module.NW7();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
barcode.setShowStartStop(true);
const result = barcode.draw('A1234567A', 400, 100);
barcode.delete();

6.8 Matrix 2of5

クラス: Matrix2of5 — 工業用の数字専用バーコード

入力可能文字: 0-9 のみ

固有メソッド: なし

使用例

const barcode = new module.Matrix2of5();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
const result = barcode.draw('1234567890', 400, 100);
barcode.delete();

6.9 NEC 2of5

クラス: NEC2of5 — 日本の工業用途向け

入力可能文字: 0-9 のみ

固有メソッド: なし

使用例

const barcode = new module.NEC2of5();
barcode.setShowText(true);
barcode.setTextEvenSpacing(true);
const result = barcode.draw('1234567890', 400, 100);
barcode.delete();

6.10 JAN-8（EAN-8）

クラス: Jan8 — 小型商品用の8桁バーコード

入力: 数字7桁（チェックディジットは自動計算）

固有メソッド

setExtendedGuard(extend)

ガードバー（先頭・中央・末尾の区切りバー）を拡張するかどうかを設定します。

true にすると、ガードバーがテキスト領域まで長く伸び、テキストは左右のセクションに分かれて配置されます。商品バーコードとしての標準的な外観になります。

false にすると、全バーが同じ高さのフラットな外観になります。

デフォルト: true

テキスト表示パターン

JAN/UPC バーコードでは、setExtendedGuard() と setTextEvenSpacing() の組み合わせで、4種類の見た目を選べます。

使用例

const barcode = new module.Jan8();
barcode.setShowText(true);
barcode.setExtendedGuard(true);
barcode.setTextEvenSpacing(false);
const result = barcode.draw('4901234', 200, 100);
barcode.delete();

6.11 JAN-13（EAN-13）

クラス: Jan13 — 日本の標準的な商品バーコード（13桁）

入力: 数字12桁（チェックディジットは自動計算）

固有メソッド

setExtendedGuard(extend)

6.10 JAN-8 と同じです。

デフォルト: true

JAN-13の特徴: 拡張ガードバー有効時、先頭1桁がバーコード左側にプレフィックスとして表示されます。日本の商品バーコードの「49」や「45」で始まるおなじみの見た目です。

使用例

const barcode = new module.Jan13();
barcode.setShowText(true);
barcode.setExtendedGuard(true);
barcode.setTextEvenSpacing(false);
const result = barcode.draw('491234567890', 300, 100);
barcode.delete();

6.12 UPC-A

クラス: UPC_A — 北米の商品コード（12桁）

入力: 数字11桁（チェックディジットは自動計算）

固有メソッド

setExtendedGuard(extend)

6.10 JAN-8 と同じです。

デフォルト: true

UPC-Aの特徴: 拡張ガードバー有効時、先頭1桁（ナンバーシステム）が左側に、末尾1桁（チェックディジット）が右側に、それぞれ小さく表示されます。

使用例

const barcode = new module.UPC_A();
barcode.setShowText(true);
barcode.setExtendedGuard(true);
barcode.setTextEvenSpacing(false);
const result = barcode.draw('01234567890', 300, 100);
barcode.delete();

6.13 UPC-E

クラス: UPC_E — UPC-Aの短縮版（8桁）。小型商品用

入力: 数字6桁（チェックディジットは自動計算）

固有メソッド

setExtendedGuard(extend)

6.10 JAN-8 と同じです。

デフォルト: true

UPC-Eの特徴: UPC-Aの「ゼロ圧縮」版です。拡張ガードバー有効時、先頭のナンバーシステム（0）とチェックディジットが左右に表示されます。

使用例

const barcode = new module.UPC_E();
barcode.setShowText(true);
barcode.setExtendedGuard(true);
barcode.setTextEvenSpacing(false);
const result = barcode.draw('425261', 200, 100);
barcode.delete();

6.14 GS1 DataBar 標準型

クラス: GS1DataBar14 — 生鮮食品向けのコンパクトバーコード

入力: 数字 8〜13桁（チェックディジットは自動計算）

固有メソッド

setSymbolType(type)

デフォルト: 'OMNIDIRECTIONAL'

getSymbolType()

現在のシンボルタイプを数値で取得します（0: Omni, 1: Stacked）。

encode(data)

データをエンコードします。戻り値: boolean（成功/失敗）

calculateCheckDigit(data) — 静的メソッド

13桁のデータからチェックディジットを計算し、14桁のデータを返します。

const dataWithCheck = module.GS1DataBar14.calculateCheckDigit('0123456789012');

使用例

const barcode = new module.GS1DataBar14();
barcode.setShowText(true);
barcode.setSymbolType('OMNIDIRECTIONAL');
const result = barcode.draw('1234567890128', 200, 80);
barcode.delete();

6.15 GS1 DataBar 限定型

クラス: GS1DataBarLimited — 先頭桁が0または1に限定されたコンパクト版

入力: 数字 8〜13桁（先頭桁は0または1のみ）

固有メソッド: なし

使用例

const barcode = new module.GS1DataBarLimited();
barcode.setShowText(true);
const result = barcode.draw('0123456789012', 200, 60);
barcode.delete();

6.16 GS1 DataBar 拡張型

クラス: GS1DataBarExpanded — 可変長データ対応

入力: AI + データの組み合わせ（{FNC1}, {AI} 使用可能）

固有メソッド

setSymbolType(type)

デフォルト: 'UNSTACKED'

setNoOfColumns(columns)

多層型のセグメント数（列数）を設定します。偶数推奨。

デフォルト: 2

drawStacked(data, width, height)

多層型バーコードを生成します。

使用例

// 一層型
const db = new module.GS1DataBarExpanded();
db.setShowText(true);
db.setSymbolType('UNSTACKED');
const result1 = db.draw('0100012345678905{AI}10ABC123', 400, 80);

// 多層型
db.setSymbolType('STACKED');
db.setNoOfColumns(4);
const result2 = db.drawStacked('0100012345678905{AI}10ABC123', 300, 100);

db.delete();

6.17 郵便カスタマバーコード

クラス: YubinCustomer — 日本郵便の住所バーコード

入力: 郵便番号7桁 + 住所表示番号（ハイフン区切り可）

固有メソッド

draw(data, height)

他のバーコードと異なり、幅は自動計算されるため高さのみ指定します。

注意: テキスト関連メソッド（setShowText(), setTextFontScale(), setTextEvenSpacing() 等）は使用できません。setForegroundColor(), setBackgroundColor() は使用可能です。

使用例

const barcode = new module.YubinCustomer();
const result = barcode.draw('27500263-29-2-401', 25);
barcode.delete();

6.18 QRコード

クラス: QR — 日本発、世界で最も普及している2次元バーコード

入力: 数字、英数字、バイナリ、漢字（Shift-JIS）

固有メソッド

draw(data, size)

setStringEncoding(encoding)

デフォルト: 'utf-8'

setErrorCorrectionLevel(level)

デフォルト: 'M'

setVersion(version)

QRコードのバージョン（セルの数 = サイズ）を指定します。

デフォルト: 0（データに応じた最小バージョンを自動選択）

setEncodeMode(mode)

デフォルト: 'AUTO'

setFitWidth(fit)

指定サイズにフィットさせるかどうか。

デフォルト: false

使用例

const qr = new module.QR();
qr.setStringEncoding('utf-8');
qr.setErrorCorrectionLevel('M');
qr.setVersion(0);
qr.setFitWidth(true);
qr.setOutputFormat('svg');
const result = qr.draw('https://www.pao.ac/', 300);
qr.delete();

6.19 DataMatrix

クラス: DataMatrix — 超小型マーキングの世界標準

入力: ASCII文字、バイナリデータ、GS1データ（{FNC1} で開始）

固有メソッド

draw(data, size)

setStringEncoding(encoding)

'utf-8'（デフォルト）または 'shift-jis'

setCodeSize(size)

シンボルのセル数を指定します。

デフォルト: 'AUTO'

setEncodeScheme(scheme)

デフォルト: 'AUTO'

setFitWidth(fit)

デフォルト: false

GS1-DataMatrix

GS1データを格納する場合は、先頭に {FNC1} を付けます。

dm.draw('{FNC1}0100012345678905{FNC1}10ABC123', 200);

使用例

const dm = new module.DataMatrix();
dm.setStringEncoding('utf-8');
dm.setCodeSize('AUTO');
dm.setEncodeScheme('AUTO');
dm.setFitWidth(true);
dm.setOutputFormat('svg');
const result = dm.draw('Hello World', 200);
dm.delete();

6.20 PDF417

クラス: PDF417 — 大容量2次元バーコード。運転免許証・搭乗券に使用

入力: テキスト、数字、バイナリ

固有メソッド

draw(data, width)

setStringEncoding(encoding)

'utf-8'（デフォルト）または 'shift-jis'

setErrorLevel(level)

デフォルト: 2

setColumns(columns)

列数。0=自動、1〜30で指定。 デフォルト: 0

setRows(rows)

行数。0=自動、3〜90で指定。 デフォルト: 0

setAspectRatio(ratio)

縦横比。1.0〜10.0。 デフォルト: 3.0

setYHeight(height)

Y方向の高さ係数。1〜10。 デフォルト: 3

setFitWidth(fit)

デフォルト: false

使用例

const pdf = new module.PDF417();
pdf.setStringEncoding('utf-8');
pdf.setErrorLevel(2);
pdf.setColumns(4);
pdf.setRows(0);
pdf.setAspectRatio(3.0);
pdf.setYHeight(3);
pdf.setFitWidth(true);
pdf.setOutputFormat('svg');
const result = pdf.draw('Hello World', 400);
pdf.delete();

7. 動作環境

対応ブラウザ

WebAssemblyに対応したモダンブラウザで動作します。

2024年時点で、世界のブラウザの97%以上がWebAssemblyに対応しています。

開発環境（TypeScript版）

ファイルサイズ

ヒント: .wasm ファイルはgzip圧縮と相性が良く、転送時のサイズはさらに小さくなります。

8. ライセンス・お問い合わせ

使用許諾

Barcode.wasm の使用について、利用者様と有限会社パオ・アット・オフィス（以下「弊社」）は、以下の各項目に同意するものとします。

1. 使用許諾書

この使用許諾書は、利用者様がお使いのパソコンにおいて Barcode.wasm を使用する場合に同意しなければならない契約書です。

2. 同意

利用者様が Barcode.wasm を使用する時点で、本使用許諾書に同意されたものとします。

3. ライセンスの購入

製品版を使用して開発を行う場合、1 台の開発用コンピュータにつき 1 ライセンスの購入が必要です。お客様環境等、開発コンピュータでないマシンでの使用にはライセンスは不要です（ランタイムライセンスフリー）。

4. 著作権

Barcode.wasm の著作権は、いかなる場合においても弊社に帰属いたします。

5. 免責

Barcode.wasm の使用によって、直接的または間接的に生じたいかなる損害に対しても、弊社は補償賠償の責任を負わないものとします。

6. 禁止事項

Barcode.wasm およびその複製物を第三者に譲渡・貸与することはできません。開発ツールとしての再販・再配布を禁止します。ただし、モジュールとして組み込みを行い再販・再配布する場合は問題ございません。

7. 保証の範囲

弊社は Barcode.wasm の仕様を予告なしに変更することがあります。利用者様への情報提供は弊社 Web サイトにて行います。

8. 適用期間

本使用許諾条件は利用者様が Barcode.wasm を使用した日より有効です。

ライセンス

Barcode.wasm は有限会社パオ・アット・オフィスの製品です。

試用版: 生成されるバーコードに「SAMPLE」の透かしが表示されます。機能制限はありません。すべてのバーコード種類・設定を自由にお試しいただけます。

製品版: 透かしなしでバーコードを生成できます。ライセンスの詳細は弊社Webサイトをご確認ください。

お問い合わせ

有限会社 パオ・アット・オフィス

関連製品

Barcode.wasm ユーザーズマニュアル

バージョン 1.1 — 2026年2月

© 2026 有限会社 パオ・アット・オフィス