# 画面設計書 60-Laravelアスキースポットライト

## 概要

本ドキュメントは、Laravel例外レンダラーにおけるLaravelアスキースポットライトコンポーネントの画面設計書である。LaravelロゴのASCIIアート表現に、マウス追従のスポットライト効果を適用するインタラクティブなUIコンポーネントを定義する。

### 本画面の処理概要

本コンポーネントは、Laravel例外レンダラーの一部として、例外詳細画面のフッター部分にLaravelブランドを視覚的に印象づける装飾要素を提供する役割を担う。

**業務上の目的・背景**：開発者向けのエラー画面においても、ブランドアイデンティティを維持することは重要である。本コンポーネントは、数字と文字で構成されたASCIIアートのLaravelロゴを表示し、マウスカーソルの位置に応じて「スポットライト」効果を適用する。これにより、無機質になりがちなエラー画面に遊び心を加え、開発者体験を向上させる。暗い背景上でカーソルを動かすと、その周辺が明るく照らされる視覚効果が得られる。

**画面へのアクセス方法**：開発環境（APP_DEBUG=true）でアプリケーション実行中に例外が発生すると、自動的に例外詳細画面（show.blade.php）が表示される。本コンポーネントは画面最下部に表示される。ただし、ユニットテスト実行中やコンソール実行中は表示されない。

**主要な操作・処理内容**：
1. 2層のLaravelASCIIアイコンをオーバーレイ表示
2. Alpine.jsによるマウス位置のトラッキング
3. CSS mask-imageによるスポットライト効果の実現
4. ダークモード対応のスポットライトサイズ調整

**画面遷移**：本コンポーネントは純粋な装飾要素であり、画面遷移には関与しない。

**権限による表示制御**：本コンポーネントはAPP_DEBUG=trueの開発環境でのみ表示される。また、ユニットテスト実行中（app()->runningUnitTests()）およびコンソール実行中（app()->runningInConsole()）は非表示となる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | LaravelロゴASCIIアートの描画 |

## 画面種別

部品（装飾コンポーネント）

## URL/ルーティング

本コンポーネントは直接ルーティングされるものではなく、例外詳細画面のフッター部分として表示される。

## 入出力項目

### 入力項目（Props）

本コンポーネントはプロパティを受け取らない。

### 出力項目

| 項目名 | 説明 |
|--------|------|
| ASCIIアート | LaravelロゴのASCII表現 |
| スポットライト効果 | マウス追従の照明効果 |

## 表示項目

| 項目名 | 表示形式 | スタイル |
|--------|----------|----------|
| 背景レイヤー | laravel-asciiアイコン | text-neutral-400（薄い色） |
| スポットライトレイヤー | laravel-asciiアイコン | text-neutral-800（濃い色）、mask-imageで部分表示 |

## イベント仕様

### 1-マウス移動（mousemove）

コンポーネント上でマウスを移動すると、Alpine.jsがマウス位置を追跡し、スポットライト効果の中心を更新する。

**処理フロー**：
1. @mousemoveイベントでマウス座標を取得
2. 要素の境界ボックス（getBoundingClientRect）との差分を計算
3. spotlight変数（x, y）を更新
4. :style属性でmask-imageのradial-gradient中心を動的に設定
5. ダークモード判定でスポットライトサイズを調整（ダーク：150px/600px、ライト：120px/400px）

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

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

本コンポーネントはデータベース操作を行わない（装飾専用コンポーネント）。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベース操作なし |

## メッセージ仕様

本コンポーネントは固定メッセージを使用しない。

## 例外処理

本コンポーネントに例外処理は不要（純粋な装飾コンポーネント）。

## 備考

- Alpine.jsを使用した状態管理とイベントハンドリング
- CSS mask-image / -webkit-mask-imageでスポットライト効果を実現
- radial-gradientで円形のマスクを生成
- prefers-color-schemeメディアクエリまたはdark:クラスでダークモード判定
- laravel-asciiアイコンはSVGベースのASCIIアート表現

---

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

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

### 推奨読解順序

#### Step 1: コンポーネント本体を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | laravel-ascii-spotlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/laravel-ascii-spotlight.blade.php` | 2層構造とAlpine.js実装 |

**主要処理フロー**:
- **行2**: 外部div、text-neutral-400で薄い色のコンテナ
- **行3-4**: x-data="{ spotlight: { x: 0, y: 0 } }"で状態定義
- **行4**: @mousemoveでマウス位置を計算
- **行5-6**: 内部div（スポットライトレイヤー）、absoluteで重ねて配置
- **行7-8**: x-dataでダークモード判定
- **行8-17**: :styleでmask-imageのradial-gradientを動的生成
- **行19**: 明るい色のlaravel-asciiアイコン
- **行21**: 暗い色のlaravel-asciiアイコン（背景）

**スポットライト効果の仕組み**:
```
                   [外部div: position relative]
                              │
    ┌─────────────────────────┴─────────────────────────┐
    │                                                    │
[内部div: absolute]                            [laravel-ascii: 背景]
  (スポットライト)                                    (薄い色)
       │
       └─ mask-image: radial-gradient(
              circle at {x}px {y}px,
              black 0%,
              transparent {radius}
          )
       │
       └─ [laravel-ascii: 前景]
             (濃い色、マスクで部分表示)
```

#### Step 2: 依存コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | icons/laravel-ascii.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/laravel-ascii.blade.php` | SVGベースのASCIIアート |

**laravel-ascii.blade.phpの構造**:
- SVG要素内にdefでパス定義
- JavaScript（<script>タグ）で動的にASCIIアートを生成
- 数字と文字のパターンで"Laravel"ロゴを表現

#### Step 3: 使用箇所を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | 条件付き表示 |

**show.blade.phpでの使用**:
```blade
@if (! app()->runningUnitTests() && ! app()->runningInConsole())
    <x-laravel-exceptions-renderer::section-container class="pb-0 sm:pb-0">
        <x-laravel-exceptions-renderer::laravel-ascii-spotlight />
    </x-laravel-exceptions-renderer::section-container>
@endif
```

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

```
show.blade.php
    │
    └─ @if (条件判定)
           │
           └─ section-container.blade.php
                  │
                  └─ laravel-ascii-spotlight.blade.php
                         │
                         ├─ Alpine.js x-data（状態管理）
                         │
                         ├─ @mousemove（イベントハンドラ）
                         │
                         ├─ :style（動的スタイル）
                         │
                         └─ icons/laravel-ascii.blade.php × 2
```

### データフロー図

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

マウス移動 ────────▶ @mousemove ───────────────────────────────▶ spotlight更新
                          │
                    spotlight.x, spotlight.y
                          │
                    :style計算
                          │
                    mask-image: radial-gradient(
                        circle at {x}px {y}px...
                    )
                          │
                          ▼
                   [スポットライト効果]
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| laravel-ascii-spotlight.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/laravel-ascii-spotlight.blade.php` | テンプレート | スポットライト効果 |
| laravel-ascii.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/laravel-ascii.blade.php` | テンプレート | ASCIIアートSVG |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | 使用元 |
| section-container.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/section-container.blade.php` | テンプレート | コンテナ |
