# 画面設計書 9-エラーレイアウト

## 概要

本ドキュメントは、Laravel フレームワークにおけるエラー画面の共通レイアウト（`layout.blade.php`）の設計書です。このレイアウトはエラー画面用の代替レイアウトとして提供されていますが、デフォルトでは `minimal.blade.php` が使用されています。

### 本画面の処理概要

エラーレイアウト（`layout.blade.php`）は、エラーメッセージをシンプルに中央表示するための共通レイアウトテンプレートです。このレイアウトはエラー画面の基本構造を提供し、子テンプレートがメッセージ内容を差し込む形式になっています。

**業務上の目的・背景**：Web アプリケーションにおいて、統一されたデザインのエラー画面を提供するために共通レイアウトが必要です。`layout.blade.php` は `minimal.blade.php` よりもさらにシンプルな構造を持ち、エラーメッセージのみを表示するレイアウトです。カスタムエラーページを作成する際のベーステンプレートとして使用できます。ダークモードには対応しておらず、白背景にグレーテキストというシンプルなスタイリングが特徴です。

**画面へのアクセス方法**：このレイアウトは直接アクセスするものではなく、子テンプレートから継承して使用されます。ただし、デフォルトのエラー画面は `minimal.blade.php` を使用しているため、このレイアウトを使用するには明示的にカスタマイズが必要です。

**主要な操作・処理内容**：
1. HTML5 の基本構造を提供
2. レスポンシブ対応のメタタグを設定
3. 画面中央にエラーメッセージを表示するためのスタイリングを提供
4. 子テンプレートからの `title` と `message` セクションを受け取って表示

**画面遷移**：
- このレイアウトは単体では画面遷移を持たず、子テンプレートの定義に依存します

**権限による表示制御**：このレイアウトは権限による表示制御を持ちません。継承する子テンプレートの用途に依存します。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | 全エラー画面の共通レイアウト描画処理 |

## 画面種別

共通レイアウトテンプレート

## URL/ルーティング

この画面は特定の URL を持ちません。レイアウトテンプレートとして他のビューから継承されます。

## 入出力項目

### 入力項目（セクション）

| セクション名 | 型 | 必須 | 説明 |
|-------------|------|------|------|
| title | string | はい | ページタイトルとして表示 |
| message | string | はい | エラーメッセージとして画面中央に表示 |

### 出力項目

このレイアウトは子テンプレートから渡されたセクションを HTML として出力します。

## 表示項目

| 項目 | 表示内容 | スタイル |
|------|----------|----------|
| タイトル | @yield('title') | HTML title 要素 |
| メッセージ | @yield('message') | font-size: 36px, padding: 20px, テキスト中央寄せ |

## イベント仕様

このレイアウトはイベントを定義していません。静的なレイアウト構造のみを提供します。

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

このレイアウトはデータベースへの読み書きを行いません。

## メッセージ仕様

このレイアウトはメッセージを定義しません。メッセージは継承する子テンプレートで定義されます。

## 例外処理

このレイアウトは例外処理を定義しません。

## 備考

- このレイアウトは `minimal.blade.php` の代替として提供されています
- ダークモードには対応していません（白背景、グレーテキスト固定）
- フォントファミリーは system-ui を使用したモダンなフォントスタック
- CSS は全てインラインで記述されており、外部ファイルに依存しません
- カスタマイズする場合は、`resources/views/errors/layout.blade.php` にファイルを配置することで上書き可能です
- **重要**: デフォルトのエラー画面は `minimal.blade.php` を使用しているため、このレイアウトは明示的に継承する必要があります

---

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

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

### 推奨読解順序

#### Step 1: テンプレート構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | layout.blade.php | `src/Illuminate/Foundation/Exceptions/views/layout.blade.php` | エラー画面の共通レイアウト構造 |

**主要処理フロー**:
- **行 1-6**: HTML5 ドキュメント構造とメタタグ
- **行 7**: `@yield('title')` でページタイトルを挿入
- **行 10-41**: インラインスタイル定義
- **行 44-50**: メッセージ表示エリア
- **行 48**: `@yield('message')` でエラーメッセージを挿入

**読解のコツ**: `@yield` ディレクティブは子テンプレートの `@section` で定義された内容を挿入するためのプレースホルダーです。

#### Step 2: スタイル設計を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | layout.blade.php | `src/Illuminate/Foundation/Exceptions/views/layout.blade.php` | インラインスタイルの詳細 |

**スタイル詳細**:
- **行 11-18**: html, body のベーススタイル
  - 背景色: #fff（白）
  - テキスト色: #636b6f（グレー）
  - フォント: system-ui ベースのフォントスタック
  - font-weight: 100（細め）
  - height: 100vh（ビューポート全体）
- **行 20-22**: `.full-height` - 高さ 100vh
- **行 24-28**: `.flex-center` - Flexbox 中央配置
- **行 30-32**: `.position-ref` - 相対位置
- **行 34-36**: `.content` - テキスト中央寄せ
- **行 38-41**: `.title` - フォントサイズ 36px、パディング 20px

#### Step 3: 継承構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | RegisterErrorViewPaths.php | `src/Illuminate/Foundation/Exceptions/RegisterErrorViewPaths.php` | エラービューの名前空間登録 |
| 3-2 | minimal.blade.php | `src/Illuminate/Foundation/Exceptions/views/minimal.blade.php` | デフォルトで使用されるレイアウト |

**読解のコツ**:
- `layout.blade.php` はフレームワークに含まれていますが、デフォルトのエラー画面は `minimal.blade.php` を継承しています
- `layout.blade.php` を使用するには、カスタムエラーページで `@extends('errors::layout')` を指定する必要があります

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

```
カスタムエラーページ（例: 404.blade.php）
    │
    └─ @extends('errors::layout')
           │
           └─ layout.blade.php
                  │
                  ├─ @yield('title')
                  │      └─ 子テンプレートの @section('title')
                  │
                  └─ @yield('message')
                         └─ 子テンプレートの @section('message')
```

### データフロー図

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

子テンプレート        ───▶ Blade エンジン           ───▶ HTML レスポンス
(@section)                  │
                           ├─ layout.blade.php 読み込み
                           │
                           ├─ @yield('title') 置換
                           │
                           └─ @yield('message') 置換
                                  │
                                  └─ 完成した HTML
                                         │
                                         ├─ <title>エラータイトル</title>
                                         │
                                         └─ <div class="title">
                                              エラーメッセージ
                                            </div>
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| layout.blade.php | `src/Illuminate/Foundation/Exceptions/views/layout.blade.php` | テンプレート | エラー画面の代替共通レイアウト |
| minimal.blade.php | `src/Illuminate/Foundation/Exceptions/views/minimal.blade.php` | テンプレート | デフォルトで使用されるエラー画面レイアウト |
| RegisterErrorViewPaths.php | `src/Illuminate/Foundation/Exceptions/RegisterErrorViewPaths.php` | ソース | エラービューパスの登録処理 |
| Handler.php | `src/Illuminate/Foundation/Exceptions/Handler.php` | ソース | 例外ハンドリングとビュー選択のロジック |

### layout.blade.php と minimal.blade.php の比較

| 特徴 | layout.blade.php | minimal.blade.php |
|------|-----------------|-------------------|
| ダークモード | 非対応 | 対応 |
| エラーコード表示 | なし | あり |
| Tailwind ベース CSS | なし | あり（normalize.css 含む） |
| フォントウェイト | 100（細め） | 通常 |
| 背景色 | 白固定 | ライト/ダーク切り替え |
| デフォルト使用 | いいえ | はい |
