syncfusion-angular-barcode

バーコード生成の実装

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 線形バーコード（Code39、Code128、Code11、Codabar、Code32、Code93）を作成する（製品識別や在庫管理向け）
• URL、連絡先情報、データの簡単な共有用にQRコードを生成する
• コンパクトで高密度なエンコード向けにData Matrixコードをエンコードする（医療、物流）
• バーコードの外観をカスタマイズする（色、寸法、表示テキスト、ロゴ）
• バーコードを画像ファイル（PNG、JPG）またはbase64文字列としてエクスポートする
• ブランディングや視覚的な強化のためにQRコードにロゴを追加する

重要：APIの確認が必要です

APIの確認が必要です：コード例を生成する前に、必ずリファレンスファイル（references/*.md）を読んで、APIのクラス名、プロパティ、シグネチャを確認してください。クラス名を推測したり、類推したりしないでください。

実際のユースケース：

• 小売・在庫管理向けの商品ラベルシステム
• モバイル決済と認証（QRコード）
• 医療・医薬品の追跡（Data Matrix）
• 文書管理とアーカイブ
• ブランド化したQRコードを使用するマーケティングキャンペーン

---

コンポーネントの概要

Syncfusion Angular Barcode Generatorは、豊富なカスタマイズ機能を備えた3種類のバーコードファミリーに対応しています。

バーコードの種類

種類	用途	文字セット	業界
線形（Code39、Code128、Code11、Codabar、Code32、Code93）	製品ID、シリアル番号、在庫	英数字（種類によって異なります）	小売、倉庫、通信
QRコード	URL、連絡先情報、決済	Unicode全般	マーケティング、モバイル、金融
Data Matrix	コンパクトなエンコード、小型ラベル	数字／英数字	医療、製造、物流

主な機能

• ✅ 7種類の線形バーコードに対応し、シンボルを検証します
• ✅ 幅広いカスタマイズ（色、寸法、フォント、余白）
• ✅ QRCodeLogoによるQRコードのロゴ対応
• ✅ 複数のエクスポート形式（PNG、JPG、Base64）
• ✅ QRコードのバージョンを自動選択
• ✅ バーコードの下に表示するテキストをカスタマイズ

---

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

はじめに

📄 参照先： references/getting-started.md

• インストールとパッケージの設定（@syncfusion/ej2-angular-barcode-generator）
• Ivyとngccのパッケージ選択
• 基本的なコンポーネント設定とインポート
• 最初のCode128バーコードとQRコードの作成
• プロジェクト設定とCSS

線形バーコード（Code39、Code128など）

📄 参照先： references/linear-barcodes.md

• Code39（標準的な英数字）
• Code39 Extended（ASCII全般に対応）
• Code128（3種類の文字セットによる高密度エンコード）
• Code11（通信）
• Codabar（図書館、血液銀行）
• Code32（医薬品／化粧品）
• Code93とCode93 Extended
• 文字セットの制限と検証
• 種類ごとの選び方

QRコード

📄 参照先： references/qr-codes.md

• QRコードのバージョン（1～40）と容量
• QRコードの基本的な生成
• 色のカスタマイズ（foreColor、backgroundColor）
• 寸法の調整（幅、高さ）
• QRコードの下に表示するテキスト
• ロゴとアイコンの追加（imageSourceを指定したQRCodeLogo）
• ロゴの配置とサイズ
• 画像ソース（ローカルファイル、URL、base64）
• 誤り訂正レベル

Data Matrixコード

📄 参照先： references/data-matrix-barcodes.md

• Data Matrixの概要と利点
• ユースケース（医療、物流、コンパクトなエンコード）
• 正方形と長方形のシンボル
• 寸法のカスタマイズ
• 色と外観のオプション
• 表示テキストの設定
• QRコードとの使い分け

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

📄 参照： references/customization.md

• 共有カスタマイズプロパティ（すべてのバーコードタイプ）
• 色のカスタマイズ（foreColor、backgroundColor）
• 寸法とスケーリング（width、height）
• マージンとパディング
• 表示テキストのプロパティと位置
• CSS クラスのカスタマイズ
• レスポンシブなバーコードのサイズ設定
• すべてのタイプに対応した高度なスタイル設定

バーコードのエクスポート

📄 参照： references/exporting-barcodes.md

• 画像ファイルとしてエクスポート（PNG、JPG）
• base64 文字列としてエクスポート
• ダウンロード機能とファイル名
• バックエンドシステムとの統合
• ユースケース（印刷、保存、共有）

---

クイックスタートの例

基本的なCode128バーコード

<ejs-barcodegenerator 
  #barcode
  type="Code128" 
  value="123456789" 
  width="200px" 
  height="150px">
</ejs-barcodegenerator>

// app.component.ts
import { Component } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

カスタムカラーのQRコード

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com" 
  [foreColor]="'#FF0000'"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

---

よくあるパターン

パターン1：ユースケースに応じてバーコードタイプを選ぶ

ユーザーがエンコードする必要があるもの：

• 製品／在庫？ → Code128（高密度、小売業界の標準）
• レガシーシステム？ → Code39（幅広くサポート）
• 医薬品？ → Code32（業界標準）
• URL／連絡先？ → QR Code（コンパクトで、モバイルに適しています）
• 小さなラベル？ → Data Matrix（高密度で省スペース）

パターン2：背景に合わせてカスタマイズする

// Light background
@barcode type="Code128" foreColor="#000000" backgroundColor="#FFFFFF"

// Dark background
@barcode type="Code128" foreColor="#FFFFFF" backgroundColor="#000000"

// Branded QR code
@barcode type="QRCode" [qRCodeLogo]="logoConfig" foreColor="#1976D2"

パターン3：エクスポートとダウンロード

export class BarcodeComponent {
  @ViewChild('barcode') barcode: BarcodeGeneratorComponent;
  
  downloadBarcode() {
    this.barcode.exportImage('barcode','PNG');
  }

  getBase64() {
    const base64String = this.barcode.toDataURL('image/png');
    // Send to server or store
  }
}

パターン4：ロゴ入りのブランドQRコード

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://mysite.com"
  #qrCode>
</ejs-barcodegenerator>

export class BrandedQRComponent implements OnInit {
  @ViewChild('qrCode') qrCode: BarcodeGeneratorComponent;
  
  ngOnInit() {
    (this.qrCode.qrcodelogo as QRCodeLogo) = {
      imageSource: 'assets/logo.svg',
      width: 50,
      height: 50
    };
  }
}

---

主なPropsの概要

プロパティ	型	使用する場面	デフォルト
type	string	バーコードタイプ（Code128、QRCode、DataMatrix）の選択	Code128
value	string	エンコードするデータの設定	""
width	string	バーコード幅（px、%）の調整	Auto
height	string	バーコード高さ（px、%）の調整	Auto
foreColor	string	バーコードの色（#RGBまたは色名）の設定	#000000
backgroundColor	string	背景色の設定	#FFFFFF
displayText	object	{ visibility: false }	バーコードの下に人が読めるラベルを追加
margin	object	バーコードの周囲に余白を追加	{left: 0, right: 0, top: 0, bottom: 0}
qRCodeLogo	object	QRコードにロゴを追加（imageSource、width、height）	undefined
mode	string	レンダリングモード（SVGまたはCanvas）	SVG

---

よくあるユースケース

ユースケース1：小売製品のラベリングシステム

// Create multiple product barcodes with customization
products.forEach(product => {
  <ejs-barcodegenerator 
    type="Code128"
    [value]="product.sku"
    [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
    foreColor="#333333"
    width="150px"
    height="100px">
  </ejs-barcodegenerator>
});

ユースケース2：ブランドロゴ入りモバイルQRコード

// QR code for app promotion with branded logo
<ejs-barcodegenerator 
  type="QRCode"
  value="https://appstore.com/myapp"
  [qRCodeLogo]="{ imageSource: 'assets/app-icon.png', width: 40, height: 40 }"
  [foreColor]="'#1976D2'"
  width="250px"
  height="250px">
</ejs-barcodegenerator>

ユースケース3：Data Matrixを使った医療分野の追跡

// Compact Data Matrix for pharmaceutical packaging
<ejs-barcodegenerator 
  type="DataMatrix"
  [value]="medicineTrackingCode"
  [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
  width="80px"
  height="80px">
</ejs-barcodegenerator>

---

次のステップ

• getting-started.mdから始めて、パッケージをインストールします
• ユースケースに応じたバーコードタイプのガイドを選びます
• customization.mdを使ってカスタマイズします
• exporting-barcodes.mdを使ってバーコードをエクスポートします