Skip to content

Home

Jump to bottom
Akihiko.KIgure edited this page Feb 1, 2026 · 1 revision

📘 CHIRIMEN Device Dashboard – 開発方針（Development Policy）

🎯 目的（Why）

CHIRIMEN デバイス情報を

❌ CSV 手編集 → ✅ Web 管理画面（CRUD + 画像アップロード）

へ移行し、

  • メンテナンス性向上
  • 非エンジニアでも更新可能
  • 将来の拡張（検索・API 公開・GitHub 連携など）の土台作り

を実現する。

🎯 スコープ（今回のゴール）

✅ プロトタイプ完成条件

以下が 動けば完成

  • デバイス一覧表示
  • 新規追加
  • 編集
  • 削除
  • 画像アップロード
  • Firebase Hosting 上で公開可能

❌ 今回やらない（後回し）

  • GitHub PR 自動生成
  • CSV 自動同期
  • 認証/ロール管理（本格版）
  • サムネ生成
  • 高度検索
  • CI/CD 最適化

👉 まずは「動く管理画面」を最短で作る

🏗 全体アーキテクチャ

Browser (Angular)
      ↓ REST
NestJS API (Cloud Functions)
      ↓
Firestore（メタデータ）
Storage（画像ファイル）

🧱 技術スタック

Frontend

  • Angular v21
  • Angular Material
  • Tailwind CSS
  • RxJS

Backend

  • NestJS + TypeScript
  • Firebase Cloud Functions

Infra

  • Firebase Hosting
  • Firestore
  • Firebase Storage
  • Firebase Emulator

Monorepo

  • Nx Workspace
  • pnpm

📂 リポジトリ構成（Nx）

apps/
  web/        ← Angular
  api/        ← NestJS

libs/
  shared-types/

functions/
  main.ts     ← Firebase Functions wrapper

firebase.json

設計思想

apps

実行可能アプリ（web / api）

libs

共有ロジック（型・DTO・将来は UI 部品）

functions

Firebase 用の薄いラッパーのみ 👉 ビジネスロジックは api 側に置く

💾 データ設計方針

原則

種類 保存先
メタ情報 Firestore
画像 Storage
URL Firestore.image

❌ やらないこと

  • Firestore に Base64 保存
  • 画像を DB に直接保存

理由：

  • 1MB 制限
  • 高コスト
  • 遅い

📦 データモデル（確定）

TypeScript

interface ExampleInfo {
  hardware: string;
  code: string;
}

interface ProductInfo {
  url: string;
  example: ExampleInfo[];
  circuit?: string;
  datasheet?: string;
  reference?: string;
  note?: string;
  spec?: string;
  instructions?: string;
  guide?: string;
}

interface DeviceInfo {
  id: string; // 型番 = Firestore document id
  deviceName: string;
  tag: 'GPIO' | 'I2C' | 'Other';
  category: string;
  description: string;
  image: string; // Storage URL
  product: ProductInfo;
}

設計ルール

id = 型番

例：

devices/ADS1015

メリット：

  • 直感的
  • slug 不要
  • Firestore lookup 最速

ネスト構造を維持

Firestore は：

  • JOIN 不可
  • 1 ドキュメント取得が最速

👉 正規化しない方が正解

🔌 API 方針

CRUD

GET    /api/devices
GET    /api/devices/:id
POST   /api/devices
PUT    /api/devices/:id
DELETE /api/devices/:id

画像

POST /api/devices/:id/image
  • multipart upload
  • Storage 保存
  • downloadURL 生成
  • Firestore.image 更新

🎨 UI 方針

画面一覧

画面 パス
一覧 /devices
新規 /devices/new
編集 /devices/:id/edit

実装方針

  • Reactive Forms
  • product.example は FormArray
  • Angular Material Table
  • 画像アップロード即時反映

🔐 セキュリティ方針（プロトタイプ）

最小構成：

  • read: public
  • write: 認証ユーザーのみ（推奨）

💰 コスト方針

条件

  • 500KB × 95 初期
  • 月 5 枚追加
  • ダウンロードほぼ無し

結論

👉 無料枠内（$0 運用）

🚀 開発フロー

ローカル

nx serve web
nx serve api
firebase emulators:start

デプロイ

nx build web
firebase deploy --only hosting,functions

📋 Issue 運用方針

実装順（推奨）

  1. Nx 基盤
  2. API CRUD
  3. 画像 upload
  4. Angular フォーム
  5. 一覧
  6. デプロイ
  7. README / Rules

原則

  • 1 Issue = 1 機能
  • 小さい単位で完了させる
  • まず動く → 後で改善

🎯 最終ゴール（Definition of Done）

以下が全部通れば プロトタイプ完成

  • 一覧表示
  • 作成
  • 編集
  • 削除
  • 画像アップロード
  • Firebase 上で動作
  • $0 運用

✅ 一言まとめ

Nx + Angular + NestJS + Firebase で「Firestore=メタ / Storage=画像」のシンプル CRUD ダッシュボードを最小構成で作る

Clone this wiki locally