# 画面設計書 10-ミニマルエラーレイアウト

## 概要

本ドキュメントは、Laravel フレームワークにおけるエラー画面のデフォルト共通レイアウト（`minimal.blade.php`）の設計書です。全てのHTTPエラー画面（401、402、403、404、419、429、500、503）がこのレイアウトを継承しています。

### 本画面の処理概要

ミニマルエラーレイアウト（`minimal.blade.php`）は、全てのHTTPエラー画面で使用されるデフォルトの共通レイアウトテンプレートです。このレイアウトはモダンなデザイン、ダークモード対応、レスポンシブデザインを提供し、一貫したユーザー体験を実現します。

**業務上の目的・背景**：Web アプリケーションにおいて、統一されたデザインのエラー画面を提供するために共通レイアウトが必要です。`minimal.blade.php` は Tailwind CSS ベースのスタイリングを採用しており、ダークモード対応やレスポンシブデザインを含むモダンなエラー画面を提供します。全てのHTTPエラー画面がこのレイアウトを継承することで、アプリケーション全体で一貫したエラー表示を実現しています。また、外部CSSファイルに依存しないインラインスタイルにより、エラー発生時でも確実に正しいスタイリングが適用されます。

**画面へのアクセス方法**：このレイアウトは直接アクセスするものではなく、子テンプレート（401.blade.php 〜 503.blade.php）から継承して使用されます。

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

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | シンプルなエラー画面の共通テンプレート描画 |

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

| セクション名 | 型 | 必須 | 説明 |
|-------------|------|------|------|
| title | string | はい | ページタイトルとして表示（`<title>` 要素） |
| code | string | はい | HTTPステータスコード（例: 404） |
| message | string | はい | エラーメッセージ（例: Not Found） |

### 出力項目

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

## 表示項目

| 項目 | 表示内容 | スタイル |
|------|----------|----------|
| タイトル | @yield('title') | HTML title 要素 |
| エラーコード | @yield('code') | text-lg, border-r border-gray-400, px-4 |
| エラーメッセージ | @yield('message') | ml-4, text-lg, uppercase, tracking-wider |

## スタイル仕様

### カラースキーム

| 要素 | ライトモード | ダークモード |
|------|------------|-------------|
| 背景色 | #f7fafc (gray-100) | #1a202c (gray-900) |
| テキスト色 | #4a5568 (gray-700) | #e2e8f0 (gray-300) |
| ボーダー色 | #cbd5e0 (gray-400) | #4a5568 (gray-700) |

### レスポンシブブレークポイント

| ブレークポイント | 幅 | 変更内容 |
|----------------|------|---------|
| sm | 640px | rounded-lg, justify-start, pt-0 |
| md | 768px | border-t-0, border-l, grid-cols-2 |
| lg | 1024px | px-8 |

## イベント仕様

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- このレイアウトは全てのデフォルトエラー画面（401〜503）で継承されています
- ダークモード対応のスタイリングが含まれています（`prefers-color-scheme: dark` メディアクエリ使用）
- normalize.css（v8.0.1）がインラインで含まれています
- Tailwind CSS のユーティリティクラスがインラインで定義されています
- CSS は全てインラインで記述されており、外部ファイルに依存しません
- カスタマイズする場合は、`resources/views/errors/minimal.blade.php` にファイルを配置することで上書き可能です
- アクセシビリティ対応: `role="main"` 属性と `antialiased` クラスによるフォントスムージング

---

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

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

### 推奨読解順序

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

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

**主要処理フロー**:
- **行 1-6**: HTML5 ドキュメント構造とメタタグ
- **行 7**: `@yield('title')` でページタイトルを挿入
- **行 9-11**: インラインスタイル（normalize.css + Tailwind ユーティリティ）
- **行 13-17**: カスタムフォントファミリー定義
- **行 19**: `<body class="antialiased">` でフォントスムージング適用
- **行 20-31**: メインコンテンツエリア
- **行 23-25**: エラーコード表示（`@yield('code')`）
- **行 27-29**: エラーメッセージ表示（`@yield('message')`）

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

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

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

**スタイル詳細**:
- **行 10**: normalize.css v8.0.1（圧縮版）
- **行 10**: Tailwind CSS ユーティリティクラス群
  - レイアウト: flex, grid, items-center, justify-center
  - スペーシング: px-4, px-6, py-4, pt-8, ml-4
  - テキスト: text-sm, text-lg, text-center, uppercase, tracking-wider
  - カラー: text-gray-*, bg-gray-*, border-gray-*
  - ダークモード: dark\:bg-gray-*, dark\:text-*
  - レスポンシブ: sm\:*, md\:*, lg\:*

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | 401.blade.php | `src/Illuminate/Foundation/Exceptions/views/401.blade.php` | 継承の実例 |
| 3-2 | RegisterErrorViewPaths.php | `src/Illuminate/Foundation/Exceptions/RegisterErrorViewPaths.php` | ビューパス登録 |

**継承パターン**:
```blade
@extends('errors::minimal')

@section('title', __('Error Title'))
@section('code', 'XXX')
@section('message', __('Error Message'))
```

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

```
HTTP エラー発生
    │
    ├─ Handler::renderHttpException()
    │      │
    │      ├─ RegisterErrorViewPaths::__invoke()
    │      │      └─ 'errors' 名前空間にパス登録
    │      │
    │      └─ getHttpExceptionView()
    │             └─ 'errors::XXX' 決定
    │
    └─ response()->view('errors::XXX', [...])
           │
           └─ XXX.blade.php（例: 404.blade.php）
                  │
                  └─ @extends('errors::minimal')
                         │
                         └─ minimal.blade.php
                                │
                                ├─ @yield('title')
                                ├─ @yield('code')
                                └─ @yield('message')
```

### データフロー図

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

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

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| minimal.blade.php | `src/Illuminate/Foundation/Exceptions/views/minimal.blade.php` | テンプレート | デフォルトエラー画面の共通レイアウト |
| 401.blade.php | `src/Illuminate/Foundation/Exceptions/views/401.blade.php` | テンプレート | 401 エラー画面（継承元） |
| 402.blade.php | `src/Illuminate/Foundation/Exceptions/views/402.blade.php` | テンプレート | 402 エラー画面（継承元） |
| 403.blade.php | `src/Illuminate/Foundation/Exceptions/views/403.blade.php` | テンプレート | 403 エラー画面（継承元） |
| 404.blade.php | `src/Illuminate/Foundation/Exceptions/views/404.blade.php` | テンプレート | 404 エラー画面（継承元） |
| 419.blade.php | `src/Illuminate/Foundation/Exceptions/views/419.blade.php` | テンプレート | 419 エラー画面（継承元） |
| 429.blade.php | `src/Illuminate/Foundation/Exceptions/views/429.blade.php` | テンプレート | 429 エラー画面（継承元） |
| 500.blade.php | `src/Illuminate/Foundation/Exceptions/views/500.blade.php` | テンプレート | 500 エラー画面（継承元） |
| 503.blade.php | `src/Illuminate/Foundation/Exceptions/views/503.blade.php` | テンプレート | 503 エラー画面（継承元） |
| RegisterErrorViewPaths.php | `src/Illuminate/Foundation/Exceptions/RegisterErrorViewPaths.php` | ソース | エラービューパスの登録処理 |
| Handler.php | `src/Illuminate/Foundation/Exceptions/Handler.php` | ソース | 例外ハンドリングとビュー選択のロジック |

### minimal.blade.php のCSS クラス一覧

| クラス名 | 用途 |
|---------|------|
| antialiased | フォントスムージング |
| relative | 相対位置 |
| flex | Flexbox レイアウト |
| items-top | 上端揃え |
| items-center | 中央揃え（垂直） |
| justify-center | 中央揃え（水平） |
| min-h-screen | 最小高さ 100vh |
| bg-gray-100 | 背景色（ライトモード） |
| dark:bg-gray-900 | 背景色（ダークモード） |
| text-gray-700 | テキスト色（ライトモード） |
| dark:text-gray-300 | テキスト色（ダークモード） |
| border-r | 右ボーダー |
| border-gray-400 | ボーダー色 |
| tracking-wider | 文字間隔広め |
| uppercase | 大文字変換 |
