# 画面遷移図

## 概要

Shopware 6 は大きく分けて2つの画面領域で構成されています：

1. **Storefront** - 顧客向けECサイト画面
2. **Administration** - 管理者向け管理画面

本ドキュメントでは、各画面間の遷移関係をMermaid形式で図示します。

---

## 1. Storefront 画面遷移図

### 1.1 メイン画面フロー

```mermaid
flowchart TD
    subgraph "メインナビゲーション"
        HOME[ホームページ<br/>frontend.home.page]
        NAV[カテゴリページ<br/>frontend.navigation.page]
        SEARCH[検索結果ページ<br/>frontend.search.page]
        PRODUCT[商品詳細ページ<br/>frontend.detail.page]
    end

    HOME --> NAV
    HOME --> SEARCH
    NAV --> PRODUCT
    SEARCH --> PRODUCT
    NAV --> NAV
    PRODUCT --> |バリアント切替| PRODUCT
```

### 1.2 購入フロー

```mermaid
flowchart TD
    subgraph "購入プロセス"
        PRODUCT[商品詳細ページ]
        CART[カートページ<br/>frontend.checkout.cart.page]
        OFFCANVAS[オフキャンバスカート<br/>frontend.cart.offcanvas]
        REGISTER[チェックアウト登録<br/>frontend.checkout.register.page]
        CONFIRM[注文確認ページ<br/>frontend.checkout.confirm.page]
        FINISH[注文完了ページ<br/>frontend.checkout.finish.page]
    end

    PRODUCT --> |カートに追加| OFFCANVAS
    PRODUCT --> |カートに追加| CART
    OFFCANVAS --> CART
    CART --> REGISTER
    CART --> |ログイン済み| CONFIRM
    REGISTER --> CONFIRM
    CONFIRM --> |注文確定| FINISH
    CONFIRM --> |支払い失敗| EDIT_ORDER[注文編集ページ<br/>frontend.account.edit-order.page]
    EDIT_ORDER --> FINISH
```

### 1.3 認証フロー

```mermaid
flowchart TD
    subgraph "認証・登録"
        LOGIN[ログインページ<br/>frontend.account.login.page]
        GUEST_LOGIN[ゲストログイン<br/>frontend.account.guest.login.page]
        REGISTER[登録ページ<br/>frontend.account.register.page]
        RECOVER[パスワード回復<br/>frontend.account.recover.page]
        RESET[パスワードリセット<br/>frontend.account.recover.password.page]
        CONFIRM_MAIL[メール確認<br/>frontend.account.register.mail]
    end

    LOGIN --> |登録| REGISTER
    LOGIN --> |パスワード忘れ| RECOVER
    RECOVER --> |メール送信| RESET
    RESET --> |変更完了| LOGIN
    REGISTER --> |ダブルオプトイン| CONFIRM_MAIL
    CONFIRM_MAIL --> ACCOUNT_HOME[アカウントホーム]
    LOGIN --> |ログイン成功| ACCOUNT_HOME
    GUEST_LOGIN --> |認証成功| ORDER_HISTORY[注文履歴]
```

### 1.4 マイアカウントフロー

```mermaid
flowchart TD
    subgraph "マイアカウント"
        ACCOUNT_HOME[アカウントホーム<br/>frontend.account.home.page]
        PROFILE[プロフィール<br/>frontend.account.profile.page]
        ADDRESS[住所帳<br/>frontend.account.address.page]
        ADDRESS_CREATE[住所作成<br/>frontend.account.address.create.page]
        ADDRESS_EDIT[住所編集<br/>frontend.account.address.edit.page]
        ORDER_HISTORY[注文履歴<br/>frontend.account.order.page]
        ORDER_DETAIL[注文詳細]
        EDIT_ORDER[注文編集<br/>frontend.account.edit-order.page]
        WISHLIST[ウィッシュリスト<br/>frontend.wishlist.page]
        NEWSLETTER[ニュースレター設定]
        LOGOUT[ログアウト<br/>frontend.account.logout.page]
    end

    ACCOUNT_HOME --> PROFILE
    ACCOUNT_HOME --> ADDRESS
    ACCOUNT_HOME --> ORDER_HISTORY
    ACCOUNT_HOME --> WISHLIST
    ACCOUNT_HOME --> LOGOUT

    ADDRESS --> ADDRESS_CREATE
    ADDRESS --> ADDRESS_EDIT
    ADDRESS_CREATE --> ADDRESS
    ADDRESS_EDIT --> ADDRESS

    ORDER_HISTORY --> ORDER_DETAIL
    ORDER_HISTORY --> EDIT_ORDER
    EDIT_ORDER --> |支払い変更| ORDER_HISTORY

    PROFILE --> |プロフィール更新| PROFILE
    PROFILE --> |削除| LOGOUT
```

### 1.5 ウィッシュリストフロー

```mermaid
flowchart TD
    subgraph "ウィッシュリスト"
        PRODUCT[商品詳細ページ]
        WISHLIST[ウィッシュリストページ<br/>frontend.wishlist.page]
        LOGIN[ログインページ]
        CART[カートページ]
    end

    PRODUCT --> |お気に入り追加<br/>未ログイン| LOGIN
    PRODUCT --> |お気に入り追加<br/>ログイン済| WISHLIST
    LOGIN --> |ログイン後リダイレクト| WISHLIST
    WISHLIST --> |商品削除| WISHLIST
    WISHLIST --> |カートへ移動| CART
    WISHLIST --> PRODUCT
```

---

## 2. Administration 画面遷移図

### 2.1 メイン構造

```mermaid
flowchart TD
    subgraph "管理画面メイン"
        LOGIN[ログイン<br/>sw-login]
        DASHBOARD[ダッシュボード<br/>sw-dashboard]
        FRW[初期設定ウィザード<br/>sw-first-run-wizard]
    end

    LOGIN --> |初回| FRW
    LOGIN --> |通常| DASHBOARD
    FRW --> DASHBOARD
```

### 2.2 商品管理フロー

```mermaid
flowchart TD
    subgraph "商品管理"
        PRODUCT_LIST[商品一覧<br/>sw-product]
        PRODUCT_DETAIL[商品詳細編集]
        CATEGORY[カテゴリ管理<br/>sw-category]
        MANUFACTURER[メーカー管理<br/>sw-manufacturer]
        PROPERTY[プロパティ管理<br/>sw-property]
        REVIEW[レビュー管理<br/>sw-review]
        STREAM[ダイナミックグループ<br/>sw-product-stream]
    end

    DASHBOARD --> PRODUCT_LIST
    PRODUCT_LIST --> PRODUCT_DETAIL
    PRODUCT_DETAIL --> CATEGORY
    PRODUCT_DETAIL --> MANUFACTURER
    PRODUCT_DETAIL --> PROPERTY
    PRODUCT_LIST --> REVIEW
    PRODUCT_LIST --> STREAM
```

### 2.3 注文管理フロー

```mermaid
flowchart TD
    subgraph "注文管理"
        ORDER_LIST[注文一覧<br/>sw-order]
        ORDER_DETAIL[注文詳細]
        CUSTOMER[顧客詳細<br/>sw-customer]
        DOCUMENT[ドキュメント生成]
    end

    DASHBOARD --> ORDER_LIST
    ORDER_LIST --> ORDER_DETAIL
    ORDER_DETAIL --> CUSTOMER
    ORDER_DETAIL --> DOCUMENT
    ORDER_DETAIL --> |ステータス変更| ORDER_LIST
```

### 2.4 コンテンツ管理フロー

```mermaid
flowchart TD
    subgraph "コンテンツ管理"
        CMS[CMS管理<br/>sw-cms]
        CMS_EDIT[レイアウト編集]
        MEDIA[メディア管理<br/>sw-media]
        LANDING[ランディングページ<br/>sw-landing-page]
    end

    DASHBOARD --> CMS
    CMS --> CMS_EDIT
    CMS_EDIT --> MEDIA
    DASHBOARD --> MEDIA
    CMS --> LANDING
```

### 2.5 設定フロー

```mermaid
flowchart TD
    subgraph "設定"
        SETTINGS[設定メニュー]
        BASIC[基本設定<br/>sw-settings-basic-information]
        COUNTRY[国設定<br/>sw-settings-country]
        CURRENCY[通貨設定<br/>sw-settings-currency]
        LANGUAGE[言語設定<br/>sw-settings-language]
        TAX[税設定<br/>sw-settings-tax]
        SHIPPING[配送設定<br/>sw-settings-shipping]
        PAYMENT[支払設定<br/>sw-settings-payment]
        RULES[ルール設定<br/>sw-settings-rule]
        SEO[SEO設定<br/>sw-settings-seo]
        USERS[ユーザー管理<br/>sw-users-permissions]
    end

    DASHBOARD --> SETTINGS
    SETTINGS --> BASIC
    SETTINGS --> COUNTRY
    SETTINGS --> CURRENCY
    SETTINGS --> LANGUAGE
    SETTINGS --> TAX
    SETTINGS --> SHIPPING
    SETTINGS --> PAYMENT
    SETTINGS --> RULES
    SETTINGS --> SEO
    SETTINGS --> USERS
```

---

## 3. エラー画面遷移

```mermaid
flowchart TD
    subgraph "エラーハンドリング"
        ANY[任意の画面]
        E404[404エラー<br/>error-404.html.twig]
        E500[500エラー<br/>error-std.html.twig]
        MAINTENANCE[メンテナンス<br/>error-maintenance.html.twig]
        HOME[ホームページ]
    end

    ANY --> |ページ未発見| E404
    ANY --> |サーバーエラー| E500
    ANY --> |メンテナンスモード| MAINTENANCE
    E404 --> HOME
    E500 --> HOME
```

---

## 4. 主要画面間の関係サマリー

```mermaid
flowchart LR
    subgraph "Storefront"
        SF_HOME[ホーム]
        SF_PRODUCT[商品]
        SF_CART[カート]
        SF_CHECKOUT[チェックアウト]
        SF_ACCOUNT[アカウント]
    end

    subgraph "Administration"
        AD_DASHBOARD[ダッシュボード]
        AD_PRODUCTS[商品管理]
        AD_ORDERS[注文管理]
        AD_CUSTOMERS[顧客管理]
        AD_CONTENT[コンテンツ]
        AD_SETTINGS[設定]
    end

    SF_HOME --> SF_PRODUCT
    SF_PRODUCT --> SF_CART
    SF_CART --> SF_CHECKOUT
    SF_CHECKOUT --> SF_ACCOUNT

    AD_DASHBOARD --> AD_PRODUCTS
    AD_DASHBOARD --> AD_ORDERS
    AD_DASHBOARD --> AD_CUSTOMERS
    AD_DASHBOARD --> AD_CONTENT
    AD_DASHBOARD --> AD_SETTINGS

    SF_CHECKOUT -.-> |注文作成| AD_ORDERS
    AD_PRODUCTS -.-> |商品表示| SF_PRODUCT
    AD_CUSTOMERS -.-> |顧客情報| SF_ACCOUNT
```

---

## 凡例

- **実線矢印** (`-->`)：直接的な画面遷移
- **破線矢印** (`-.->`)：間接的な関連（データ連携など）
- **サブグラフ**：機能カテゴリのグループ化
- **ノード内テキスト**：画面名とルート名

## 参照ファイル

| カテゴリ | パス |
|---------|------|
| Storefrontコントローラー | `src/Storefront/Controller/` |
| Storefrontテンプレート | `src/Storefront/Resources/views/storefront/` |
| Administrationモジュール | `src/Administration/Resources/app/administration/src/module/` |
