# 画面設計書 27-CMSページ（フル）

## 概要

本ドキュメントは、Shopware 6 StorefrontのCMSページ（フル）の画面設計書である。CMSで作成されたレイアウトをヘッダー・フッター・パンくずリストを含むフルページとして表示するための画面について記載する。

### 本画面の処理概要

CMSページ（フル）は、CMSで作成されたレイアウトを完全なページとして表示するための画面である。通常のショップページとして使用される。

**業務上の目的・背景**：ECサイトでは、会社概要、利用規約、プライバシーポリシー、FAQなど、商品以外の静的コンテンツページが必要となる。このCMSフルページ機能により、管理画面から簡単にこれらのページを作成・管理できる。また、カテゴリページやランディングページもこの仕組みで表示される。

**画面へのアクセス方法**：
- URLへの直接アクセス（/page/cms/{id}）
- ナビゲーションメニューからのリンク
- フッターリンク（利用規約、プライバシーポリシー等）

**主要な操作・処理内容**：
1. CMSページIDに基づくレイアウトの読み込み
2. ヘッダー・フッター・パンくずリストを含む完全なページのレンダリング
3. セクション・ブロック・エレメントの描画

**画面遷移**：
- 遷移元：ホームページ、ナビゲーション、フッターリンク
- 遷移先：他のページへのリンク（CMSコンテンツ内）

**権限による表示制御**：
- 特になし（公開コンテンツ）
- HTTPキャッシュが有効

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 62 | CMSページ表示 | 主機能 | CMSレイアウトのフルページ表示（CmsController::pageFull） |

## 画面種別

詳細 / フルページ

## URL/ルーティング

| ルート名 | URL | HTTPメソッド | 説明 |
|----------|-----|--------------|------|
| frontend.cms.page.full | /page/cms/{id} | GET, POST | CMSページのフル表示 |

## 入出力項目

### 入力項目

| 項目名 | パラメータ名 | 型 | 必須 | 説明 |
|--------|-------------|-----|------|------|
| CMSページID | id | string(UUID) | 必須 | CMSページのID |

### 出力項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| page.cmsPage | CmsPageEntity | CMSページエンティティ |

## 表示項目

### ページ構造

| 項目名 | データソース | 説明 |
|--------|-------------|------|
| ヘッダー | base.html.twig | 共通ヘッダー |
| パンくずリスト | breadcrumb.html.twig | ナビゲーションパス |
| CMSコンテンツ | cmsPage.sections | メインコンテンツ |
| フッター | base.html.twig | 共通フッター |

### CMSページ構造

| 項目名 | データソース | 説明 |
|--------|-------------|------|
| ページCSSクラス | cmsPage.cssClass | カスタムCSSクラス |
| セクション | cmsPage.sections | ページを構成するセクション |

## イベント仕様

### 1-CMSページ読み込み

ページIDを指定してCmsRouteを呼び出し、CMSページデータを取得。CmsPageLoadedHookを実行後、index.html.twigでレンダリング（base.html.twigを継承）。

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | SELECT | 参照のみ |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| なし | - | - | - |

## 例外処理

| 例外 | 原因 | 処理内容 |
|------|------|----------|
| CmsException::pageNotFound | CMSページが存在しない | 404エラー |

## 備考

- index.html.twigはbase.html.twigを継承し、完全なHTMLページを生成
- ウィジェット版（detail.html.twig）とは異なり、ヘッダー・フッターを含む
- HTTPキャッシュが有効（PlatformRequest::ATTRIBUTE_HTTP_CACHE => true）
- cmsPageのcssClassがページ全体に適用される

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CmsPageEntity.php | `src/Core/Content/Cms/CmsPageEntity.php` | sections, cssClassプロパティ |

**読解のコツ**: CMSページ（フル）とCMSページ（ウィジェット）は同じCmsPageEntityを使用するが、テンプレートが異なる。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CmsController.php | `src/Storefront/Controller/CmsController.php` | pageFull()メソッド |

**主要処理フロー**:
1. **84-99行**: pageFull() - CMSページのフル表示
2. **95行**: CmsRouteでCMSページ取得
3. **96行**: CmsPageLoadedHook実行
4. **98行**: index.html.twigレンダリング

#### Step 3: テンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.html.twig | `src/Storefront/Resources/views/storefront/page/content/index.html.twig` | base.html.twigの継承、パンくずリスト |
| 3-2 | detail.html.twig | `src/Storefront/Resources/views/storefront/page/content/detail.html.twig` | セクション描画（インクルード） |
| 3-3 | base.html.twig | `src/Storefront/Resources/views/storefront/base.html.twig` | ヘッダー・フッター構造 |

### プログラム呼び出し階層図

```
CmsController::pageFull()
    │
    ├─ AbstractCmsRoute::load()
    │      │
    │      └─ CmsPageEntity取得
    │
    ├─ CmsPageLoadedHook dispatch
    │
    └─ renderStorefront('index.html.twig')
           │
           ├─ base.html.twig（継承）
           │      ├─ header.html.twig
           │      └─ footer.html.twig
           │
           ├─ breadcrumb.html.twig
           │
           └─ detail.html.twig（インクルード）
                  │
                  └─ cms-section-*.html.twig
```

### データフロー図

```
[入力]                    [処理]                              [出力]

Request (id)
         │
         ▼
 CmsController::pageFull()
         │
         ├─► AbstractCmsRoute::load()
         │         │
         │         ▼
         │    CmsPageEntity
         │
         ├─► CmsPageLoadedHook
         │
         └─► index.html.twig
                   │
                   ├─► base.html.twig
                   │         │
                   │         ├─► header.html.twig
                   │         └─► footer.html.twig
                   │
                   ├─► breadcrumb.html.twig
                   │
                   └─► detail.html.twig
                            │
                            └─► cms-section-{type}.html.twig
                                     │
                                     ▼
                               完全なHTMLページ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CmsController.php | `src/Storefront/Controller/CmsController.php` | コントローラー | リクエスト処理 |
| AbstractCmsRoute.php | `src/Core/Content/Cms/SalesChannel/AbstractCmsRoute.php` | Store API | CMSページ取得 |
| index.html.twig | `src/Storefront/Resources/views/storefront/page/content/index.html.twig` | テンプレート | フルページテンプレート |
| detail.html.twig | `src/Storefront/Resources/views/storefront/page/content/detail.html.twig` | テンプレート | セクション描画 |
| base.html.twig | `src/Storefront/Resources/views/storefront/base.html.twig` | テンプレート | ベーステンプレート |
| breadcrumb.html.twig | `src/Storefront/Resources/views/storefront/layout/breadcrumb.html.twig` | テンプレート | パンくずリスト |
