バーコードをBrowser内で生成・画像やカメラから読み取る
入力値、画像、Camera Frameを外部へ送信せず、対応形式の生成と読取を同じページで確認できます。
バーコード画像を読み取る結論：再圧縮前の元画像を読み込み、Raw値と形式を元資料へ照合する
PNG、JPEG、WebP、GIF、BMPを選択・Drop・Clipboard貼り付けでき、対応BrowserのBarcodeDetectorと同梱ZXingを順に試します。
画像内に複数のBarcodeがある場合、Native APIは複数結果を返せることがありますが、Fallbackや画像条件によって最初の1件だけになるため一括検出を保証しません。
番号の正しさ、画像生成、読み取り成功、業務規格への適合は別々に確認してください。
画像FileとBarcode部分を分けて確認する
まず対応形式として画像を開けるか、次にBarcode全体と左右余白が入っているか、最後に線が潰れずContrastがあるかを確認します。
HEICやPDF自体は画像入力として直接扱いません。必要なら画像変換やScreenshotでPNG / JPEGへし、Barcodeを切り落とさないよう保存します。
| 確認対象 | 確認方法 | 判断 |
|---|---|---|
| File | 拡張子・MIME | 対応画像 |
| 構図 | 左右余白・全体 | 切れなし |
| 結果 | Raw値・形式 | 元資料一致 |
| 複数 | 件数・位置 | 1件ずつも確認 |
バーコード生成・読み取りツールで確認する手順
- 画像を選択・Drop・貼り付けします。
- PreviewでBarcode全体と余白を確認します。
- 解析結果の形式とRaw値を確認します。
- 値をCopyし、元資料または別Readerと照合します。
機密の管理番号や会員番号を含む画像は、外部ReaderへUploadする前に取扱条件を確認してください。
画像Readerの切り分け
| 症状 | 最初の確認 | 次の対応 |
|---|---|---|
| 画像が開かない | File形式 | PNG / JPEGへ変換 |
| 検出しない | 余白・線幅 | 元画像で再試行 |
| 値が違う | 検出形式 | 別Readerで比較 |
| 複数を逃す | 配置・件数 | 1件ずつCrop |
値の用途と文字種からバーコード形式を選ぶ
| 形式 | 主な入力 | 現行ツールでの扱い |
|---|---|---|
| JAN-13 / EAN-13 | 12桁の本体値または13桁の完成値 | 12桁ならチェックデジットを追加、13桁なら検証 |
| JAN-8 / EAN-8 | 7桁の本体値または8桁の完成値 | 7桁なら追加、8桁なら検証 |
| UPC-A | 11桁の本体値または12桁の完成値 | 11桁なら追加、12桁なら検証 |
| ITF-14 | 13桁の本体値または14桁の完成値 | 13桁なら追加、14桁なら検証 |
| Code 128 | 英数字・記号等 | 管理番号などを柔軟に表現。入力可能文字はEncoderの仕様も確認 |
| Code 39 | 大文字英数字、Space、.-$/+% | 小文字は大文字へ変換して生成 |
| ITF | 偶数桁の数字 | 奇数桁や数字以外をErrorとして案内 |
| Codabar / NW-7 | 数字・一部記号、A～Dの開始終了文字 | 開始終了文字を含む規則を検証 |
バーコードは同じ値でも形式が違えばバーとSpaceの並びが変わります。Readerが返したRaw値だけでなく検出形式も確認し、利用するレジ、ハンディScanner、物流Systemが受け入れる形式と合わせます。
チェックデジットと正式な識別番号を混同しない
JAN / EAN / UPC / ITF-14の末尾には、前の桁から計算するチェックデジットがあります。DevelopToolsは本体桁なら末尾を計算し、完成桁なら一致を検証します。これは入力誤りを見つける仕組みであり、その番号が商品へ正式に割り当てられていることを証明するものではありません。
- GTIN-13（JAN標準タイプ）は12桁の本体値と1桁のチェックデジットで構成する
- GTIN-8（JAN短縮タイプ）は7桁の本体値と1桁のチェックデジットで構成する
- 商品流通へ使うGTINはGS1事業者コードや商品情報登録のルールに従う
- 任意の数字から画像を生成できても、正式なJANコードの取得・登録にはならない
Quiet Zone・線幅・高さ・Contrastを最終媒体で確認する
一次元バーコードは左右の何も印刷しないQuiet Zone、最も細いBarまたはSpaceの幅であるX-dimension、Barの高さ、背景とのContrastまで含めて読み取り条件を作ります。画面で読めても、縮小、画像補間、印刷の滲み、光沢、折れ、低解像度で失敗することがあります。
| 確認 | 失敗しやすい状態 | 対処 |
|---|---|---|
| Quiet Zone | Barの直前まで文字・枠・画像がある | 左右の空白を残して再生成・再配置 |
| 線幅 | 縮小や非整数倍率で細線が潰れる | 目的Sizeで生成し、縦横比を変えない |
| Contrast | 薄いBar、暗い背景、複数色のBar | 暗い単色Barと明るい単色背景を優先 |
| 画像品質 | JPEG再圧縮、Blur、反射、低解像度 | 元PNG / SVGから作り直し実物で試す |
| 印刷 | ページに合わせるで意図せず拡縮 | 実寸を測り、利用するScannerで確認 |
生成から実利用までをRound Tripで検証する
- 入力値と形式を確定し、生成後の表示値・チェックデジットを確認する
- PNGとSVGを保存し、ツールの画像Readerへ戻してRaw値と形式を照合する
- 回転、縮小、Screenshot、印刷など実際の工程を通した状態で再読取する
- 同じLibraryでの自己Testだけで終わらせず、利用予定のScannerや端末でも確認する
- 読取失敗時は形式、桁数、Quiet Zone、線幅、Contrast、画質を一項目ずつ切り分ける
同じBrowserで生成して同じBrowserで読めたことは有用な回帰Testですが、店舗Scanner、物流Scanner、印刷機、紙質まで含む適合性の保証ではありません。業務利用では対象機器と実物Labelでの検証を完成条件にします。
入力値・画像・カメラ映像はBrowser内で処理する
現行ツールは同梱LibraryをBrowserで実行し、生成する値、読み取る画像、Camera Frame、復号したRaw値をDevelopToolsのServerや第三者APIへ送信しません。画像選択時のObject URLは利用後に解放し、Camera停止時はMediaStreamのTrackを停止します。
- Raw値を商品検索APIへ自動送信しない
- Cameraは利用者が開始Buttonを押した後だけ権限を要求する
- 読取成功Eventを計測する場合も、Raw値や画像そのものをAnalyticsへ含めない
- バーコードは暗号化ではないため、秘密情報を符号化して公開しない
現行ツールで生成・読み取りできる範囲
| 機能 | 現行ツールの対応 |
|---|---|
| 生成形式 | Code 128、Code 39、JAN-13 / EAN-13、JAN-8 / EAN-8、UPC-A、ITF、ITF-14、Codabar / NW-7 |
| 生成設定 | 横倍率、高さ、左右のQuiet Zone、人が読める文字の表示、バー色・背景色 |
| 生成結果 | 確定値・チェックデジット・形式の表示、PNG・SVG保存 |
| 画像入力 | PNG、JPEG、WebP、GIF、BMPの選択・ドロップ・Clipboard貼り付け |
| 読取処理 | 対応BrowserではBarcodeDetectorを先に試し、検出できなければ同梱ZXingへFallback |
| カメラ | 明示操作後に背面Cameraを優先して開始し、停止時にMediaStreamを解放 |
| 未対応 | UPC-E・GS1-128・GS1 DataBar・DataMatrixの生成、商品Database検索、業務用Barcode品質検証 |
画像Readerは検出形式とRaw値を表示します。ただし、BarcodeDetectorが返せる形式はBrowserごとに異なり、同梱ZXingの画像Fallbackは基本的に最初の検出結果を扱います。複数コードの一括検出や、すべての規格を同じ精度で読めるとは案内しません。
規格とWeb APIは一次資料で確認する
- GS1 Japan：はじめてのバーコード
- GS1 Japan：チェックデジットの計算方法
- GS1：GS1 Application Identifiers
- GS1：GS1-128の形式
- MDN：BarcodeDetector
- MDN：MediaDevices.getUserMedia()
- bwip-js公式Repository
- ZXing for JS Browser公式Repository
- JsBarcode公式Repository
正式なGTIN設定とBarcode寸法はGS1 / GS1 Japan、Browser対応は実際のBarcodeDetector.getSupportedFormats()と互換表、Camera権限はgetUserMedia仕様、Library APIは利用Versionの公式Documentationを優先します。DevelopToolsの生成Libraryはbwip-jsであり、JsBarcodeの記事例と現行実装を混同しません。
具体例：帳票のScreenshotから管理番号を読む
Barcode左右の空白が残る範囲でScreenshotを保存し、ReaderへDropします。
検出形式とRaw値を確認し、帳票に印字された人間可読文字と一致するか照合できます。
- 元画像保存
- Drop
- 形式・値確認
- 印字値と照合
Screenshotの再ResizeやSNS再保存は細線をぼかすため、可能なら元画像を使います。
よくある質問
- JANコードは好きな数字から作れますか？
- 画像生成だけなら桁数とチェックデジットが正しい数字を描けますが、流通商品へ正式に使えるGTINになるわけではありません。GS1事業者コードと商品情報の設定・登録ルールを確認してください。
- 画面で読めれば印刷後も必ず読めますか？
- 保証できません。印刷Size、Quiet Zone、最小線幅、滲み、紙やLabelの反射、Scanner性能が変わるため、実寸の印刷物と利用予定機器で確認してください。
- 読取結果から商品名も分かりますか？
- 現行ツールが取得するのはバーコードへ符号化されたRaw値と検出形式です。商品名や価格を取得する外部商品Databaseには接続しません。