ECHONET Liteのメーカーコードや商品コードを検索できるウェブアプリケーション
ECHONET Liteは日本のスマートホーム機器通信規格です。このアプリケーションは、ECHONET Liteで使用されるメーカーコード（3バイトの16進数）と商品コード、および認証製品情報を検索できるツールを提供します。
- メーカーコード検索
- 16進数コードから企業名を検索
- 企業名からメーカーコードを検索
- 商品コード検索
- ECHONET Lite認証製品の閲覧
- レスポンシブデザイン対応
- グローバルツール管理: aqua
- パッケージマネージャー: bun
- フレームワーク: TanStack Router (SPA)
- UIコンポーネント: Base UI
- ビルドツール: bun（Viteは不使用）
- デプロイ先: Cloudflare Workers
データベースレスアーキテクチャを優先し、以下の優先順位で実装:
-
第一選択: 静的データEmbed（推奨）
- メーカーコード一覧をJSON/TypeScriptファイルとしてバンドル
- ファイルサイズが許容範囲内（~数百KB）であれば最適
- デプロイが単純で、追加のインフラ不要
-
第二選択: Workers + Embedded SQLite
- バックエンド: syumai/workers
- データベース: SQLite（デプロイ時にembed）
- クエリ生成: sqlc
- ファイルサイズが大きい場合の代替案
-
第三選択: Cloudflare D1
- 上記2つが技術的に困難な場合の最終手段
- メーカーコード一覧: ~数百件 → JSON形式で50-100KB程度（推定）
- 認証製品リスト: 規模による（要調査）
-
メーカーコード一覧
- URL: https://echonet.jp/spec_g/
- ファイル: list_code.pdf（発行済メーカーコード一覧）
- 公開日: 2021年10月1日より一般公開
-
認証製品データベース
-
規格書・仕様書
- URL: https://echonet.jp/spec_g/
- ECHONET Lite規格の詳細情報
echonetlite-lookup/
├── scripts/
│ ├── fetch-data # データ取得・変換スクリプト
│ └── lib/ # スクリプト用ライブラリ
├── .cache/ # HTTPキャッシュ（.gitignore）
├── data/
│ └── raw/ # 中間データ（正規化済み生データ）
├── src/
│ ├── routes/ # TanStack Routerのルート定義
│ ├── components/ # UIコンポーネント
│ ├── data/ # 最終データ（アプリで使用）
│ └── utils/ # ユーティリティ関数
├── external-docs/ # 参考資料・外部ドキュメント
├── public/ # 静的アセット
└── wrangler.toml # Cloudflare Workers設定
- aquaのインストール: グローバルツールの管理に使用
# aquaインストール（未インストールの場合）
brew install aquaproj/aqua/aqua
# または
curl -sSfL https://raw.githubusercontent.com/aquaproj/aqua-installer/v2.1.1/aqua-installer | bash- 必要なツールのインストール:
# aqua.yamlからツールをインストール
aqua install# 依存関係のインストール（bun使用）
bun install# 依存関係のインストール
bun install
# 開発サーバーの起動
bun run devブラウザで http://localhost:3000 を開く
# 全テストの実行
bun test
# 特定のテストファイルのみ
bun test src/lib/search.test.ts
# watchモード
bun test --watch33個のテストが用意されています:
- キャッシュ管理テスト (5)
- ダウンロード機能テスト (8)
- データ変換テスト (11)
- 検索機能テスト (9)
# メーカーコードデータの取得と変換
./scripts/fetch-data
# または
bun run fetch-data詳細は scripts/README.md を参照してください。
# プロダクションビルド
bun run buildビルド成果物は dist/ ディレクトリに生成されます。
Cloudflare Workersへのデプロイ:
# Wranglerでログイン（初回のみ）
wrangler login
# デプロイ
wrangler deployechonetlite-lookup/
├── scripts/
│ ├── fetch-data # データ取得メインスクリプト
│ ├── fetch-data.ts # TypeScript実装
│ ├── lib/ # ライブラリモジュール
│ │ ├── cache.ts # HTTPキャッシュ管理
│ │ ├── download.ts # ダウンロード処理
│ │ ├── transform.ts # データ変換・正規化
│ │ └── tests/ # ユニットテスト
│ └── python/
│ └── extract_pdf.py # PDF抽出スクリプト
├── src/
│ ├── routes/ # TanStack Routerルート
│ │ ├── __root.tsx # ルートレイアウト
│ │ ├── index.tsx # トップページ
│ │ ├── search.tsx # 検索ページ
│ │ └── about.tsx # Aboutページ
│ ├── components/ # Reactコンポーネント
│ │ ├── SearchBar.tsx # 検索バー
│ │ └── ManufacturerList.tsx # 結果一覧
│ ├── lib/ # ユーティリティ
│ │ ├── search.ts # 検索ロジック
│ │ └── search.test.ts # 検索テスト
│ ├── data/ # 静的データ
│ │ └── manufacturers.json # メーカーコード一覧
│ ├── styles/
│ │ └── global.css # グローバルスタイル
│ ├── router.tsx # ルーター設定
│ └── main.tsx # エントリーポイント
├── data/
│ └── raw/ # 中間データ（Git管理）
│ └── manufacturers.json
├── .cache/ # HTTPキャッシュ（.gitignore）
├── index.html # HTMLテンプレート
├── wrangler.toml # Cloudflare Workers設定
└── package.json # 依存関係とスクリプト
-
Phase 1: データ収集・変換
- HTTPキャッシュ対応ダウンロード機能
- PDFからの冪等なデータ抽出
- アプリ用形式への変換
- 統合スクリプト
./scripts/fetch-data
-
Phase 2: 基本実装
- bun + TanStack Routerのセットアップ
- メーカーコード検索機能の実装
- レスポンシブUI実装
-
Phase 3: デプロイ
- Cloudflare Workers設定
- bunでビルド設定
-
テスト
- 全33テストの実装と合格
- Phase 4: 拡張機能
- 商品コード検索機能
- ECHONET Lite認証製品一覧機能
- 多言語対応（日本語/英語）
- PWA化
- データ自動更新（GitHub Actions）
すべての主要機能がテストファーストで実装されています:
- テストを先に書く
- テストが失敗することを確認
- 最小限の実装でテストを通す
- リファクタリング
効率的なデータ取得のため、以下のHTTPキャッシュ機能を実装:
If-Modified-Sinceヘッダーによる条件付きリクエストETagサポート304 Not Modifiedレスポンスのハンドリング- SHA-256ハッシュによるファイル整合性確認
同じ入力から常に同じ出力を生成:
- コードの正規化（大文字、ゼロパディング）
- ソート順の固定（コード昇順）
- タイムスタンプの分離管理
これにより、Git差分が意味のある変更のみを示します。
# aquaでインストール
aqua install
# または直接インストール
curl -fsSL https://bun.sh/install | bash# システムパッケージが必要な場合
# macOS:
brew install poppler
# Ubuntu/Debian:
sudo apt-get install poppler-utils
# その後
pip install pdfplumber# node_modulesをクリーンアップ
rm -rf node_modules bun.lock
bun install
# キャッシュをクリア
rm -rf .cache dist