syncfusion-javascript-barcode

Syncfusion バーコードジェネレーターの実装

このスキルを使用する場合： バーコード（一次元コード、QR コード、または Data Matrix コード）を生成、カスタマイズ、エクスポートする必要がある Web アプリケーションを構築するときに使用します。これには、POS システム、在庫管理、チケット発券システム、医療アプリケーション、またはスキャン可能なコードが必要なあらゆるソリューションが含まれます。

---

バーコードライブラリの概要

Syncfusion Barcode Generator ライブラリ（@syncfusion/ej2-barcode-generator）は、次の 3 種類の主要なバーコードに対応しています。

• BarcodeGenerator：一次元バーコード（Code39、Code128、Codabar、Code11、Code32、Code93、Code128A/B/C）を作成します
• QRCodeGenerator：ロゴと誤り訂正に対応した二次元 QR コードを作成します
• DataMatrixGenerator：産業および小売業務向けの二次元 Data Matrix コードを作成します

3 種類すべてで同じコア API を使用します。設定を指定して初期化し、DOM に追加してカスタマイズし、エクスポートします。

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと npm パッケージのセットアップ
• System.js またはバンドラー向けのプロジェクト設定
• 各ジェネレータータイプを使用した最初のバーコードの作成
• CSS のインポートとテーマ設定
• 基本的な DOM 追加パターン

バーコードの種類と選択

📄 参照： references/barcode-types.md

• 一次元バーコードの種類：Code39、Code39 Extended、Code11、Codabar、Code32、Code93、Code128
• 各タイプの文字セットの制限
• 各バーコード形式の用途
• ユースケースに基づく選択ガイド

QR コードの生成

📄 参照： references/qr-code-generation.md

• QR コードの基本（バージョン、モジュール、容量）
• displayText を使用した QR コードの作成
• QR コードへのロゴやアイコンの追加
• 誤り訂正レベル（Low、Medium、Quarter、High）
• 動的なサイズ変更とバージョン管理

Data Matrix バーコード

📄 参照： references/data-matrix-codes.md

• Data Matrix の概要とユースケース
• Data Matrix コードの作成
• 数値データと英数字データのエンコード
• サイズの選択とレイアウトパターン
• 在庫管理システムとの連携

カスタマイズとスタイル設定

📄 参照： references/customization-styling.md

• バーコードの色（foreColor、backgroundColor）
• 寸法（width、height、レスポンシブなサイズ設定）
• 表示テキストのカスタマイズ（フォント、表示設定、配置）
• レンダリングモード（SVG と Canvas）
• CSS とテーマ連携による高度なスタイル設定

エクスポートと印刷

📄 参照： references/export-printing.md

• 画像形式（JPG、PNG）へのエクスポート
• 保存用の Base64 文字列としてのエクスポート
• 印刷機能
• ブラウザーでのダウンロード処理
• サーバーサイド連携パターン

検証とイベント

📄 参照： references/validation-events.md

• バーコード生成前の入力検証
• ValidateEvent の処理
• エラーの防止とエッジケース
• イベント駆動型のバーコード更新
• リアルタイム検証パターン

---

クイックスタートの例

import { BarcodeGenerator } from '@syncfusion/ej2-barcode-generator';

// Linear barcode (Code128)
const barcode = new BarcodeGenerator({
  width: '200px',
  height: '150px',
  type: 'Code128',
  value: 'SYNCFUSION',
  mode: 'SVG',
  displayText: { visibility: true }
});

barcode.appendTo('#barcode');

// For QR Code
import { QRCodeGenerator } from '@syncfusion/ej2-barcode-generator';

const qrCode = new QRCodeGenerator({
  width: '200px',
  height: '200px',
  value: 'Your value here',
  displayText: { visibility: false },
  mode: 'SVG'
});

qrCode.appendTo('#qrcode');

// For Data Matrix
import { DataMatrixGenerator } from '@syncfusion/ej2-barcode-generator';

const dataMatrix = new DataMatrixGenerator({
  width: '200px',
  height: '200px',
  value: 'Syncfusion',
  mode: 'SVG'
});

dataMatrix.appendTo('#datamatrix');

---

よくあるパターン

パターン 1：種類の選択

• 汎用的な英数字バーコードには Code128 を使用します（最も柔軟です）
• URL、連絡先情報、またはロゴによるブランディングが必要な場合は QRCodeGenerator を使用します
• 産業用ラベルや限られたスペースへのエンコードには DataMatrixGenerator を使用します
• レガシーシステムや ASCII で十分な場合は Code39 を使用します

パターン 2：カスタマイズの手順

const barcode = new BarcodeGenerator({
  type: 'Code128',
  value: data,
  width: '200px',
  height: '150px',
  mode: 'SVG',
  foreColor: '#000000',
  backgroundColor: '#ffffff',
  displayText: { text: label }
});

barcode.appendTo('#element');

パターン 3：動的なエクスポート

// Export to image with filename
barcode.exportImage('mybarcode', 'PNG');

// Export as Base64 for server submission
const base64 = await barcode.exportAsBase64Image('JPG');

パターン 4：レスポンシブなサイズ設定

const barcode = new BarcodeGenerator({
  width: '100%',     // Responsive to container
  height: '150px',
  type: 'Code128',
  value: productCode
});

---

主なプロパティ

プロパティ	型	デフォルト	用途
type	string	'Codabar'	バーコードの種類（Code39、Code128 など）
value	string	''	バーコードにエンコードするデータ
width	string	'200px'	バーコードの幅（px または %）
height	string	'150px'	バーコードの高さ
mode	string	'SVG'	レンダリングモード（SVG または Canvas）
foreColor	string	'#000000'	バーコードの色
backgroundColor	string	'#ffffff'	背景色
displayText	object	{}	表示テキストの設定（表示、テキスト、フォント）
logo (QR only)	object	null	ロゴの設定（imageSource、width、height）
errorCorrectionLevel (QR only)	number	0	誤り訂正レベル：0=低、1=中、2=4分の1、3=高

---

一般的なユースケース

1. 販売時点管理：Code128 を使用して、商品バーコードをその場で生成します
2. 在庫管理：追跡用に Data Matrix を使用して、出荷ラベルを作成します
3. マーケティング：キャンペーン URL を指す QR コードを生成します
4. 医療：患者データを Code39 でエンコードします（レガシーシステムに対応）
5. E コマース：梱包用に、注文番号を Code128 バーコードとして生成します
6. チケット発行：ロゴをあしらったイベントチケット用の QR コードを作成します
7. 文書管理：仕分け・ファイリング用に、PDF に Data Matrix を埋め込みます

---

次のステップ

まず はじめに を参照してライブラリをセットアップし、バーコードの種類 でバーコードの種類を選択します。カスタマイズが必要な場合は、カスタマイズとスタイル設定 をご覧ください。エクスポートや印刷のワークフローについては、エクスポートと印刷 をご覧ください。