read_2d_barcode

目的

フルQR、マイクロQR、データマトリクスの読み取りができるかを確認する

画面構成

機能

• 画面で読み取り対象を切り替えることができる
• 「自動モード」では読み取り内容を自動で制御する

インフラ構成図

graph LR
    subgraph AWS Cloud
        CF[CloudFront<br/>CDN + HTTPS]
        OAC[Origin Access Control]
        S3[S3 Bucket<br/>静的ホスティング]
    end

    User[ユーザー] -->|HTTPS| CF
    CF -->|OAC認証| S3
    CF -.->|設定| OAC

Loading

コンポーネント	説明
CloudFront	CDNによる高速配信、HTTPS対応、SPAルーティング対応
S3	フロントエンドのビルド成果物を格納（パブリックアクセス無効）
Origin Access Control	CloudFrontからのみS3へのアクセスを許可

環境構築

前提条件

• Node.js 18以上
• pnpm
• AWS CLI（設定済み）
• AWS CDK CLI

セットアップ

# リポジトリをクローン
git clone https://github.com/SeiyaCM/read_2d_barcode.git
cd read_2d_barcode

# 依存関係のインストール
pnpm install

# 開発サーバーの起動
pnpm dev

デプロイ

# フロントエンドのビルドとAWSへのデプロイ
pnpm deploy

Note: 初回デプロイ時は cdk bootstrap が必要な場合があります。

技術スタック

項目	技術スタック	備考
プラットフォーム	Amazon Web Service	CloudFront + S3
言語	TypeScript	-
フロントエンド	React 19	Vite でビルド
スタイリング	Tailwind CSS	-
IaC	AWS CDK	TypeScript
パッケージ管理	pnpm	monorepo構成

バーコード読み取り技術

項目	詳細
ライブラリ	zxing-wasm
実行環境	WebAssembly（ブラウザ内で動作）
対応フォーマット	QRCode, MicroQRCode, DataMatrix

zxing-wasm は、Google の ZXing バーコードライブラリを WebAssembly にコンパイルしたものです。ブラウザ上でカメラ映像からリアルタイムにバーコードを検出・デコードします。

読み取りフロー

sequenceDiagram
    participant Camera as カメラ
    participant Video as Video要素
    participant Canvas as Canvas
    participant WASM as zxing-wasm
    participant UI as 結果表示

    Camera->>Video: ストリーム取得
    loop フレームごと
        Video->>Canvas: フレーム描画
        Canvas->>WASM: ImageData送信
        WASM->>WASM: バーコード検出
        WASM-->>UI: 検出結果
    end

Loading

参考資料

• データマトリクスコードとQRコードの違いは？
• zxing-wasm - npm