# 画面設計書 22-メールヘッダー

## 概要

本ドキュメントは、LaravelフレームワークのHTMLメールテンプレートにおけるヘッダーコンポーネント（header.blade.php）の設計仕様を定義するものである。

### 本画面の処理概要

本コンポーネントは、HTMLメールの上部に表示されるヘッダー領域を構成する部品である。アプリケーションのロゴまたは名前を表示し、アプリケーションのトップページへのリンクを提供する。

**業務上の目的・背景**：企業やサービスのブランドアイデンティティをメール上で確立するために、ヘッダー領域は重要な役割を果たす。ユーザーがメールを開いた際に、すぐに送信元を認識できるようにすることで、メールの信頼性とブランド認知度を向上させる。また、ヘッダーのリンクをクリックすることで、ユーザーを直接アプリケーションに誘導できる導線としても機能する。

**画面へのアクセス方法**：本コンポーネントは直接アクセスするものではなく、message.blade.phpから`<x-mail::header>`として呼び出される。Mailableクラスでmarkdown()メソッドを使用してメール送信時、自動的にヘッダーがレンダリングされる。

**主要な操作・処理内容**：
1. @propsディレクティブでurl属性を受け取る
2. テーブルセル内にアンカータグを生成し、urlプロパティをhref属性に設定
3. $slotの内容が「Laravel」の場合は公式ロゴ画像を表示
4. それ以外の場合は$slotの内容（通常はアプリケーション名）をそのまま表示

**画面遷移**：ヘッダー内のリンクをクリックすると、$urlで指定されたURL（通常はアプリケーションのトップページ）に遷移する。

**権限による表示制御**：ヘッダーコンポーネント自体には権限制御はない。表示内容はconfig設定とスロットコンテンツによって決定される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 28 | メール管理 | 主機能 | HTMLメールヘッダー部品の表示 |

## 画面種別

コンポーネント（メールテンプレート部品）

## URL/ルーティング

該当なし（Bladeコンポーネントとして使用）

コンポーネント名: `mail::header`

## 入出力項目

| 項目名 | 型 | 必須 | 説明 |
|--------|------|------|------|
| $url | string | Yes | ヘッダーリンクの遷移先URL |
| $slot | string | Yes | 表示コンテンツ（アプリ名またはHTML） |

## 表示項目

| 要素 | 表示内容 | 条件 |
|------|---------|------|
| ロゴ画像 | Laravel公式ロゴ | $slotが「Laravel」の場合 |
| テキスト/HTML | $slotの内容 | $slotが「Laravel」以外の場合 |

## イベント仕様

### 1-ヘッダーリンククリック

ヘッダー領域全体がクリック可能なリンクとして機能する。クリックすると$urlで指定されたURLに遷移する。

**処理フロー**:
1. ユーザーがヘッダー領域をクリック
2. メールクライアントがhref属性のURLを開く
3. 指定されたアプリケーションページに遷移

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

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

該当なし（表示専用コンポーネント）

## メッセージ仕様

該当なし

## 例外処理

| 状態 | 処理内容 |
|------|---------|
| $url未指定 | 空のhref属性として出力（リンクは機能しない） |
| $slot未指定 | 空のコンテンツとして出力 |

## 備考

- `trim($slot) === 'Laravel'`の条件分岐により、Laravel公式ロゴの自動表示機能が実装されている
- ロゴ画像のURLは`https://laravel.com/img/notification-logo-v2.1.png`を直接参照している
- `{!! $slot !!}`でHTMLエスケープなしの出力が行われるため、セキュリティ上の考慮が必要
- CSSクラス`header`はlayout.blade.phpのスタイルで定義される

---

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

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

### 推奨読解順序

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

まず、コンポーネントで受け取るプロパティとスロットの関係を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | header.blade.php | `src/Illuminate/Mail/resources/views/html/header.blade.php` | @propsディレクティブで$urlを定義（行1） |

**読解のコツ**: `@props(['url'])`はBladeコンポーネントのプロパティ宣言。配列形式でデフォルト値も指定可能（例：`@props(['url' => '#'])`）。

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

処理の起点となる呼び出し元を特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | message.blade.php | `src/Illuminate/Mail/resources/views/html/message.blade.php` | x-mail::headerの呼び出し（行3-7） |

**主要処理フロー**:
1. **message.blade.php 行4**: `<x-mail::header :url="config('app.url')">`でコンポーネント呼び出し
2. **message.blade.php 行5**: `{{ config('app.name') }}`でアプリ名をスロットとして渡す

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | header.blade.php | `src/Illuminate/Mail/resources/views/html/header.blade.php` | 条件分岐とHTML生成（行1-12） |

**主要処理フロー**:
- **行1**: @propsで$urlプロパティを宣言
- **行2-3**: テーブル行とヘッダーセル開始
- **行4**: `<a href="{{ $url }}">`でリンク生成
- **行5-6**: `@if (trim($slot) === 'Laravel')`でLaravel判定
- **行6**: Laravel公式ロゴ画像を表示
- **行7-8**: `@else`で通常のスロット内容を表示
- **行10-12**: タグの閉じ処理

#### Step 4: スタイル定義を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | layout.blade.php | `src/Illuminate/Mail/resources/views/html/layout.blade.php` | headerスロットの配置位置（行34） |

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

```
message.blade.php
    │
    └─ x-mail::header (:url, slot)
           │
           └─ header.blade.php
                  │
                  ├─ trim($slot) === 'Laravel' ?
                  │      │
                  │      ├─ Yes: <img src="laravel-logo">
                  │      │
                  │      └─ No: {!! $slot !!}
                  │
                  └─ <a href="{{ $url }}">...</a>
```

### データフロー図

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

config('app.url') ──▶ $url プロパティ ──────▶ href属性
                                               │
config('app.name') ──▶ $slot ─────────────────▶ 条件分岐
                                               │
                                    ┌──────────┴──────────┐
                                    │                     │
                               'Laravel'            その他
                                    │                     │
                                    ▼                     ▼
                            <img logo>           {!! $slot !!}
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| header.blade.php | `src/Illuminate/Mail/resources/views/html/header.blade.php` | テンプレート | ヘッダー部品本体 |
| message.blade.php | `src/Illuminate/Mail/resources/views/html/message.blade.php` | テンプレート | ヘッダーの呼び出し元 |
| layout.blade.php | `src/Illuminate/Mail/resources/views/html/layout.blade.php` | テンプレート | ヘッダースロットの配置先 |
| Mailable.php | `src/Illuminate/Mail/Mailable.php` | ソース | メール送信の基底クラス |
| Markdown.php | `src/Illuminate/Mail/Markdown.php` | ソース | Markdownレンダリング処理 |
