# 画面設計書 68-情報アイコン

## 概要

本ドキュメントは、Laravelフレームワークの例外レンダラーで使用される情報アイコンコンポーネントの設計仕様を記述したものである。

### 本画面の処理概要

情報アイコンは、例外レンダラー画面において補足情報や追加説明を示す視覚的インジケーターとして機能するSVGアイコンコンポーネントである。円の中に「i」マークを描画し、ユーザーに追加情報が利用可能であることを認識させる役割を持つ。主にツールチップと組み合わせて使用され、表示制限に関する情報などを提供する。

**業務上の目的・背景**：例外レンダラーのクエリセクションでは、パフォーマンス上の理由から最初の100件のクエリのみが表示される。この制限についてユーザーに通知するため、情報アイコンがツールチップトリガーとして使用される。情報アイコンは国際的に認知されたシンボルであり、追加情報が利用可能であることを直感的に伝達できる。

**画面へのアクセス方法**：このアイコンは単独で表示されるものではなく、例外レンダラー画面（show.blade.php）内のクエリコンポーネント（query.blade.php）で使用される。クエリ数が100件を超える場合にのみ、ヘッダー部分に表示される。

**主要な操作・処理内容**：
1. SVGエレメントの描画処理による情報アイコン表示
2. `$attributes`を通じた動的な属性（class、style、data-tippy-content等）の適用
3. `currentColor`を使用した親要素の文字色継承による柔軟なカラーリング
4. Tippy.jsと連携してツールチップを表示

**画面遷移**：本コンポーネントは独立した画面ではなく、例外レンダラーのクエリコンポーネント内で部品として使用される。マウスホバーやフォーカス時にツールチップが表示される。

**権限による表示制御**：本コンポーネント自体に権限制御は存在しない。ただし、親画面である例外レンダラーは通常、開発環境（APP_DEBUG=true）でのみ表示される。本番環境では例外詳細画面自体が非表示となるため、結果的にこのアイコンも表示されない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | ビューファクトリ | 主機能 | 情報アイコンSVGの描画処理 |

## 画面種別

部品（コンポーネント）

## URL/ルーティング

本コンポーネントは単独のルーティングを持たない。例外レンダラーの一部として以下の条件で呼び出される：
- 例外発生時に自動的に表示される例外画面内で使用
- Bladeコンポーネントとして `<x-laravel-exceptions-renderer::icons.info />` の形式で呼び出し

## 入出力項目

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| $attributes | 入力 | Illuminate\View\ComponentAttributeBag | 任意 | SVG要素に適用する追加属性（class、style、data-tippy-content等） |

## 表示項目

| 項目 | 説明 |
|------|------|
| SVGアイコン | 24x24ピクセルの情報アイコン（円の中に「i」マーク）を描画 |

### SVG仕様詳細

| 属性 | 値 | 説明 |
|------|-----|------|
| width | 24 | アイコンの幅（ピクセル） |
| height | 24 | アイコンの高さ（ピクセル） |
| viewBox | 0 0 24 24 | SVGのビューボックス設定 |
| fill | none | 塗りつぶしなし |
| stroke | currentColor | 親要素の文字色を継承 |
| stroke-width | 2 | 線の太さ |
| stroke-linecap | round | 線端を丸く |
| stroke-linejoin | round | 線の接続部を丸く |

### パス構造

情報アイコンは以下の要素で構成される：
1. 外側の円（半径10、中心12,12）
2. 下部の縦線（「i」の本体、12,16から12,12）
3. 上部の点（「i」のドット、12,8位置）

## イベント仕様

### 1-描画イベント

本コンポーネントはBladeテンプレートエンジンによりレンダリングされる。静的なSVG要素であり、JavaScriptによるインタラクティブなイベントは発生しない。

**処理フロー**：
1. 親コンポーネント（query.blade.php）が情報アイコンを呼び出し
2. `$attributes`がSVG要素にマージされる（data-tippy-content含む）
3. SVGパスが描画され、情報アイコンが表示される
4. Tippy.jsがdata-tippy-content属性を検出してツールチップを初期化

### 2-ツールチップイベント

| トリガー | 条件 | 動作 |
|---------|------|------|
| マウスホバー | ユーザーがアイコンにホバー | ツールチップ表示 |
| マウスアウト | ユーザーがアイコンから離れる | ツールチップ非表示 |
| フォーカス | キーボードでフォーカス | ツールチップ表示 |
| ブラー | フォーカスが外れる | ツールチップ非表示 |

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

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

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

本コンポーネントはUIの描画のみを行い、データベースへのアクセスは行わない。

## メッセージ仕様

| メッセージID | メッセージ内容 | 表示条件 |
|-------------|---------------|---------|
| - | Only the first 100 queries are shown | クエリ数が100件を超える場合、ツールチップとして表示 |

## 例外処理

| 例外状況 | 動作 |
|---------|------|
| 属性の不正値 | Bladeエンジンによりエラーハンドリングされる |
| テンプレートファイル未検出 | ViewNotFoundExceptionが発生 |
| Tippy.js未読み込み | ツールチップが表示されないがアイコン自体は表示される |

## 備考

- アイコンは`currentColor`を使用しているため、親要素の`color`プロパティを継承する
- 実際の使用時は`class="w-3 h-3 text-blue-500 dark:text-emerald-500"`のスタイルで表示される
- `data-tippy-content`属性を通じてTippy.jsと連携してツールチップを表示する
- 条件付き表示（クエリ数が100件を超える場合のみ）でレンダリングされる

---

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

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

### 推奨読解順序

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

情報アイコンはシンプルなSVGコンポーネントであり、Bladeコンポーネントの属性バッグ（`$attributes`）がデータ構造の中心となる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ComponentAttributeBag.php | `src/Illuminate/View/ComponentAttributeBag.php` | Bladeコンポーネントで使用される属性バッグの仕組みを理解する |

**読解のコツ**: Bladeコンポーネントでは`{{ $attributes }}`構文により、親から渡された全ての属性をHTMLタグに展開できる。data-tippy-content属性も同様に展開される。

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

アイコンが使用される起点となる例外レンダラーの構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | 例外レンダラーのメインテンプレート。queryコンポーネントの配置を確認（17行目） |
| 2-2 | layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | レイアウトコンポーネント。Tippy.jsを含むJSの読み込みを確認 |

**主要処理フロー**:
1. **show.blade.php 17行目**: query.blade.phpコンポーネントの呼び出し

#### Step 3: アイコンを使用するコンポーネントを理解する

情報アイコンが実際に使用されている箇所を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | query.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/query.blade.php` | **89-92行目**で情報アイコンを使用。クエリ数が100件を超える場合のみ表示 |

**主要処理フロー**:
- **query.blade.php 1行目**: `@props(['queries'])`でクエリ配列を受け取る
- **query.blade.php 88行目**: `@if (count($queries) > 100)`で条件判定
- **query.blade.php 89-92行目**:
```php
<x-laravel-exceptions-renderer::icons.info
    class="w-3 h-3 text-blue-500 dark:text-emerald-500"
    data-tippy-content="Only the first 100 queries are shown"
/>
```

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | info.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/info.blade.php` | アイコンの実装本体。SVGパス定義とattributes展開を確認 |

**主要処理フロー**:
- **1行目**: SVG要素の開始。xmlns、width/height/viewBox定義、fill="none"、stroke属性と`{{ $attributes }}`による属性展開
- **2行目**: 外側の円のパス（circle要素、cx=12、cy=12、r=10）
- **3行目**: 「i」の本体部分のパス（縦線、12,16から12,12）
- **4行目**: 「i」のドット部分のパス（12,8位置の点）

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

```
例外発生
    │
    ├─ Renderer::render()
    │      │
    │      └─ show.blade.php
    │             │
    │             ├─ layout.blade.php（レイアウト）
    │             │      └─ Tippy.js読み込み
    │             │
    │             └─ query.blade.php
    │                    │
    │                    └─ @if (count($queries) > 100)
    │                           │
    │                           └─ icons/info.blade.php ★
    │                                  └─ data-tippy-content属性
```

### データフロー図

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

例外オブジェクト           query.blade.php               ブラウザ表示
  │                          │                            │
  ├─ applicationQueries() ──▶│                            │
  │   (SQLクエリ配列)        │                            │
  │                          │                            │
  │                    count($queries) > 100              │
  │                          │                            │
  │                    条件がtrue                         │
  │                          │                            │
  │                    info.blade.php ─────────────────▶│── 情報アイコン
  │                          │                            │   (blue-500/emerald-500)
  │                          │                            │
  │                    data-tippy-content ─────────────▶│── ツールチップ
  │                          │                            │   "Only the first 100
  │                          │                            │    queries are shown"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| info.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/icons/info.blade.php` | テンプレート | 情報アイコンSVGの定義 |
| show.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/show.blade.php` | テンプレート | 例外レンダラーのメインビュー |
| query.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/query.blade.php` | テンプレート | クエリセクション表示（情報アイコン使用） |
| layout.blade.php | `src/Illuminate/Foundation/resources/exceptions/renderer/components/layout.blade.php` | テンプレート | 例外レンダラーの共通レイアウト（Tippy.js読み込み） |
| Renderer.php | `src/Illuminate/Foundation/Exceptions/Renderer/Renderer.php` | ソース | 例外レンダラーのメインクラス |
