Skip to main content

🔄 システムフロー・シーケンス図

概要​

Nekomataシステムの主要なフローをシーケンス図で説明します。各図は、システムの動作を視覚的に理解するのに役立ちます。

1. ユーザー認証フロー​

sequenceDiagram
    participant User as ユーザー
    participant FE as フロントエンド
    participant Firebase as Firebase Auth
    participant BFF as BFF (Cloudflare Workers)
    participant Shopify as Shopify Storefront
    participant D1 as Cloudflare D1

    User->>FE: ログイン要求
    FE->>Firebase: 認証要求 (email/password)
    Firebase-->>FE: JWT発行
    FE->>FE: JWTをローカルストレージに保存
    
    User->>FE: 商品選択・カート追加
    FE->>BFF: API呼び出し + JWT
    BFF->>BFF: JWT検証・Firebase UID抽出
    
    BFF->>D1: ユーザー情報確認
    Note over BFF,D1: Firebase UIDでShopify顧客IDを検索
    
    alt 初回ユーザー
        BFF->>Shopify: 顧客作成
        Shopify-->>BFF: 顧客ID
        BFF->>D1: ユーザーリンク作成
        Note over BFF,D1: Firebase UID ↔ Shopify顧客ID
    else 既存ユーザー
        BFF->>Shopify: 顧客情報取得
        Shopify-->>BFF: 顧客データ
    end
    
    BFF-->>FE: 認証済みレスポンス
    FE-->>User: カート表示

2. 注文・決済フロー​

sequenceDiagram
    participant User as ユーザー
    participant FE as フロントエンド
    participant BFF as BFF (Cloudflare Workers)
    participant R2 as Cloudflare R2
    participant Shopify as Shopify Storefront
    participant Payment as 決済システム

    User->>FE: 写真選択・商品選択
    FE->>BFF: 写真アップロード要求 + JWT
    BFF->>BFF: JWT検証・Firebase UID確認
    BFF->>R2: 署名URL発行 (ユーザー固有)
    BFF-->>FE: 署名URL
    
    FE->>R2: 写真アップロード
    FE->>BFF: カート作成要求 + JWT
    BFF->>BFF: 認証・権限確認
    
    BFF->>Shopify: Storefront API呼び出し
    Note over BFF,Shopify: 認証済みユーザーのカート作成
    
    Shopify-->>BFF: カート情報・チェックアウトURL
    BFF-->>FE: チェックアウト情報
    FE-->>User: 決済ページ表示
    
    User->>Shopify: 決済情報入力
    Shopify->>Payment: 決済処理
    Payment-->>Shopify: 決済完了
    
    Shopify->>BFF: Webhook (注文完了)
    BFF->>BFF: 冪等性チェック・認証確認

3. 印刷処理フロー​

sequenceDiagram
    participant BFF as BFF (Cloudflare Workers)
    participant D1 as Cloudflare D1
    participant R2 as Cloudflare R2
    participant Factory as 工場 (Electron)
    participant Shopify as Shopify Admin

    BFF->>D1: 注文データ保存
    Note over BFF,D1: Firebase UID, 注文ID, 商品情報
    
    BFF->>R2: 印刷データ準備
    Note over BFF,R2: ユーザー固有の写真データ
    
    BFF->>D1: 印刷ジョブ作成
    Note over BFF,D1: ジョブID, ステータス: "印刷待ち"
    
    BFF->>Factory: 印刷ジョブ通知
    Note over BFF,Factory: 認証済みユーザーの注文データ
    
    Factory->>BFF: ジョブ受信確認
    Factory->>Shopify: 配送情報取得
    Note over Factory,Shopify: 認証済みユーザーの配送先
    
    Shopify-->>Factory: 配送先住所・連絡先
    Factory->>D1: 配送情報保存
    Note over Factory,D1: Firebase UIDと紐付け

4. 出荷・配送フロー​

sequenceDiagram
    participant Factory as 工場 (Electron)
    participant D1 as Cloudflare D1
    participant BFF as BFF (Cloudflare Workers)
    participant Shopify as Shopify Admin
    participant Shipping as 配送業者
    participant User as ユーザー

    Factory->>Factory: 出荷準備
    Note over Factory: 商品の梱包, 配送伝票作成
    
    Factory->>D1: 出荷準備完了
    Note over Factory,D1: ステータス: "出荷準備完了"
    
    Factory->>Shopify: 配送情報更新
    Note over Factory,Shopify: 認証済みユーザーの配送情報
    
    Shopify-->>Factory: 配送情報確認
    Factory->>D1: 配送情報保存
    
    Factory->>BFF: 出荷完了報告
    Note over Factory,BFF: Firebase UID, 注文ID
    
    BFF->>BFF: 権限確認・セキュリティチェック
    BFF->>D1: 最終ステータス更新
    BFF->>Shopify: 出荷完了通知
    
    Shopify->>User: 出荷完了メール
    Note over Shopify,User: Firebase認証済みユーザーへ
    
    Shipping->>User: 商品配達
    User->>Shopify: 受取確認
    Shopify->>BFF: 配送完了Webhook
    BFF->>D1: ステータス: "配送完了"

5. システム全体の概要​

graph TB
    subgraph "フロントエンド層"
        A1[猫Web Next.js]
        A2[猫Mobile Expo]
        A3[犬Web Next.js]
        A4[日本画Web Next.js]
        A5[管理画面 Next.js]
    end

    subgraph "BFF層 Cloudflare Workers"
        B1[認証・認可]
        B2[Shopify API連携]
        B3[ファイル管理 R2]
        B4[データ管理 D1]
        B5[Webhook処理]
    end

    subgraph "外部サービス"
        C1[Firebase Auth]
        C2[Shopify Storefront]
        C3[Shopify Admin]
        C4[Cloudflare R2]
        C5[Cloudflare D1]
    end

    subgraph "工場システム"
        D1[Electron App]
        D2[印刷処理]
        D3[進捗管理]
    end

    A1 --> B1
    A2 --> B1
    A3 --> B1
    A4 --> B1
    A5 --> B1

    B1 --> C1
    B2 --> C2
    B2 --> C3
    B3 --> C4
    B4 --> C5
    B5 --> C3

    B1 --> D1
    D1 --> D2
    D2 --> D3
    D3 --> B4

6. セキュリティ・監査フロー​

sequenceDiagram
    participant User as ユーザー
    participant FE as フロントエンド
    participant BFF as BFF (Cloudflare Workers)
    participant Firebase as Firebase Auth
    participant Audit as 監査ログ
    participant Alert as セキュリティアラート

    alt JWT無効・期限切れ
        FE->>BFF: API呼び出し + 無効JWT
        BFF->>BFF: JWT検証失敗
        BFF->>Audit: セキュリティログ記録
        BFF->>Alert: 不正アクセス警告
        BFF-->>FE: 401 Unauthorized
        FE->>Firebase: 再認証要求
        Firebase-->>FE: 新しいJWT
        FE->>BFF: 再試行 + 新JWT
    else 権限不足
        FE->>BFF: 権限外操作要求
        BFF->>BFF: 権限レベル確認
        BFF->>Audit: 権限違反ログ
        BFF->>Alert: 権限エスカレーション警告
        BFF-->>FE: 403 Forbidden
    else レート制限超過
        FE->>BFF: 過度なAPI呼び出し
        BFF->>BFF: レート制限チェック
        BFF->>Audit: レート制限ログ
        BFF->>Alert: ボット攻撃可能性警告
        BFF-->>FE: 429 Too Many Requests
    end

主要なポイント​

🔐 セキュリティ​

  • Firebase JWTによる二重認証
  • ユーザー間データの完全分離
  • 監査ログによる操作追跡

📊 データフロー​

  • 冪等性を保証したWebhook処理
  • リアルタイム進捗更新
  • 自動的なエラーハンドリング

🚀 パフォーマンス​

  • Cloudflare Edgeでの高速処理
  • 効率的なキャッシュ戦略
  • 非同期処理による応答性向上

これらの図表は、システムの動作を理解し、開発・運用を効率化するのに役立ちます。