# 機能設計書 55-HTML/CSS

## 概要

本ドキュメントは、space-vimにおけるHTML/CSS言語サポート機能の設計を定義する。html5.vim、vim-css3-syntax、emmet-vimの3つのプラグインを組み合わせた包括的なWebフロントエンド開発環境を提供する。

### 本機能の処理概要

HTML/CSS開発での生産性を向上させるため、最新のHTML5/CSS3構文ハイライトとEmmet（旧Zen Coding）によるコード展開機能を提供する。

**業務上の目的・背景**：Webフロントエンド開発では、HTML5とCSS3の最新仕様に対応した構文ハイライトが不可欠である。また、Emmetによる省略記法からのコード展開は、マークアップ作業の効率を大幅に向上させる。これらの機能を統合することで、モダンなWeb開発ワークフローをサポートする。

**機能の利用シーン**：Webサイト・Webアプリケーションのフロントエンド開発時、`.html`、`.css`ファイルを編集する際に自動的に有効化される。Emmetの省略記法（例：`ul>li*5`）を入力後、トリガーキーでHTMLコードに展開できる。

**主要な処理内容**：
1. HTML5構文のシンタックスハイライト（html5.vim）
2. CSS3構文のシンタックスハイライト（vim-css3-syntax）
3. Emmet省略記法によるコード展開（emmet-vim）
4. タブストップ/ソフトタブの自動設定（2スペース）
5. ALEによるtidyリンター連携

**関連システム・外部連携**：html5.vim、vim-css3-syntax、emmet-vimプラグインとの連携。ALEリンターとの連携によるHTML構文チェックも可能。

**権限による制御**：特になし。レイヤー有効化によりすべての機能が利用可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | Vimエディタ画面 | 主画面 | HTML/CSSファイル編集時の構文ハイライトとEmmet展開 |

## 機能種別

構文解析 / 構文ハイライト / 言語サポート / コード生成

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| g:user_emmet_mode | String | No | Emmetモード（'a'=全モード） | 'n','i','v','a' |
| g:user_emmet_leader_key | String | No | Emmetリーダーキー | 任意のキー |

### 入力データソース

- HTMLソースファイル（.html, .htm）のバッファ内容
- CSSソースファイル（.css）のバッファ内容
- Emmet省略記法の文字列

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 構文ハイライト | 視覚表示 | HTML5/CSS3キーワードのカラー表示 |
| 展開コード | テキスト | Emmetによる生成HTMLコード |
| リンター結果 | 診断情報 | tidyによる構文チェック結果 |

### 出力先

- Vimエディタ画面（バッファ表示）
- サインカラム（リンター結果）

## 処理フロー

### 処理シーケンス

```
1. レイヤー読み込み
   └─ +lang/htmlレイヤーが有効化される
2. プラグイン読み込み
   └─ html5.vim、vim-css3-syntax、emmet-vimがvim-plugにより読み込まれる
3. 設定適用
   └─ config.vimのEmmet設定が適用される
4. ファイル検出
   └─ .html/.cssファイルオープン時にfiletypeが設定される
5. 構文ハイライト適用
   └─ 各プラグインの構文定義に基づきハイライトが適用される
6. ftplugin適用
   └─ タブ幅設定とリンター設定が適用される
```

### フローチャート

```mermaid
flowchart TD
    A[Vim起動] --> B{htmlレイヤー有効?}
    B -->|Yes| C[プラグイン群読み込み]
    B -->|No| Z[終了]
    C --> D[Emmet設定適用]
    D --> E{HTMLファイルを開く?}
    E -->|Yes| F[filetype=html設定]
    E -->|No| G{CSSファイルを開く?}
    G -->|Yes| H[filetype=css設定]
    G -->|No| I[待機]
    I --> E
    F --> J[html5.vimハイライト]
    H --> K[css3-syntaxハイライト]
    J --> L[ftplugin/html.vim適用]
    K --> M[編集可能状態]
    L --> M
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-55-01 | レイヤー依存 | +lang/htmlレイヤーの有効化が必要 | .spacevimファイルでレイヤー指定時 |
| BR-55-02 | ファイルタイプ検出 | .html, .htm, .cssファイルで自動有効化 | ファイルオープン時 |
| BR-55-03 | タブ幅設定 | HTML/CSSファイルは2スペースインデント | ftplugin適用時 |
| BR-55-04 | Emmetリーダーキー | デフォルトはCtrl+E | config.vim設定 |
| BR-55-05 | 遅延読み込み | html, vue, cssファイルタイプでのみemmet-vim読み込み | for指定 |

### 計算ロジック

特になし

## データベース操作仕様

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

該当なし（データベース操作を行わない）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | プラグイン未インストール | vim-plugによるインストール未完了 | :PlugInstall実行 |
| - | Emmet展開エラー | 不正な省略記法 | 構文の確認 |
| - | tidyエラー | tidyコマンドが未インストール | tidyのインストール |

### リトライ仕様

該当なし

## トランザクション仕様

該当なし

## パフォーマンス要件

- 大規模HTMLファイルでも構文ハイライトが遅延なく適用されること
- Emmet展開：100ms以下

## セキュリティ考慮事項

- 外部通信なし
- ローカルファイルの読み取りのみ

## 備考

- Vueファイルでもemmet-vimが利用可能（packages.vimの設定による）
- LSP（html-languageserver、vscode-css-languageserver）との併用でより高度な機能が利用可能

---

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

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

### 推奨読解順序

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

HTML/CSSレイヤーはEmmet設定とプラグイン登録で構成される。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | config.vim | `layers/+lang/html/config.vim` | Emmetモードとリーダーキー設定の確認 |

**読解のコツ**: `g:user_emmet_*`変数はemmet-vim固有の設定変数。公式ドキュメントを参照することで詳細な設定が可能。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | packages.vim | `layers/+lang/html/packages.vim` | MPマクロによる3つのプラグイン登録を確認 |

**主要処理フロー**:
1. **1行目**: `MP 'othree/html5.vim', { 'for': 'html' }` - HTML5構文ハイライト（遅延読み込み）
2. **2行目**: `MP 'hail2u/vim-css3-syntax', { 'for': 'css' }` - CSS3構文ハイライト（遅延読み込み）
3. **3行目**: `MP 'mattn/emmet-vim', { 'for': [ 'html', 'vue', 'css' ] }` - Emmet展開（遅延読み込み）

#### Step 3: 設定ファイルを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | config.vim | `layers/+lang/html/config.vim` | Emmet設定 |

**主要処理フロー**:
- **2行目**: `let g:user_emmet_mode = 'a'` - 全モード（ノーマル、挿入、ビジュアル）でEmmet有効化
- **3行目**: `let g:user_emmet_leader_key='<C-E>'` - Ctrl+EをEmmetリーダーキーに設定

#### Step 4: ftplugin設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | html.vim | `core/ftplugin/html.vim` | HTMLファイル固有設定 |

**主要処理フロー**:
- **1-4行目**: レイヤー有効性チェックと重複読み込み防止
- **6行目**: `setlocal tabstop=2 softtabstop=2 shiftwidth=2` - 2スペースインデント設定
- **8行目**: `let b:ale_linters = ['tidy']` - tidyリンター設定

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

```
.spacevim (ユーザー設定)
    │
    └─ Layer '+lang/html' 有効化
           │
           ├─ packages.vim
           │      ├─ MP 'othree/html5.vim' (HTML5ハイライト)
           │      ├─ MP 'hail2u/vim-css3-syntax' (CSS3ハイライト)
           │      └─ MP 'mattn/emmet-vim' (Emmet展開)
           │
           ├─ config.vim
           │      ├─ g:user_emmet_mode = 'a'
           │      └─ g:user_emmet_leader_key = '<C-E>'
           │
           └─ core/ftplugin/html.vim
                  ├─ タブ幅設定 (2スペース)
                  └─ ALE linter設定 (tidy)
```

### データフロー図

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

.spacevim ───▶ レイヤーシステム ───▶ プラグイン登録
                     │
                     ▼
              config.vim読み込み
                     │
                     ▼
.htmlファイル ───▶ html5.vim ───▶ 構文ハイライト
                     │
                     ▼
                ftplugin/html.vim ───▶ タブ幅・リンター設定
                     │
                     ▼
Emmet省略記法 ───▶ emmet-vim ───▶ 展開されたHTMLコード
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| packages.vim | `layers/+lang/html/packages.vim` | 設定 | html5.vim、vim-css3-syntax、emmet-vimの登録 |
| config.vim | `layers/+lang/html/config.vim` | 設定 | Emmet設定 |
| html.vim | `core/ftplugin/html.vim` | ftplugin | HTML固有のエディタ設定 |
| LAYERS.md | `layers/LAYERS.md` | ドキュメント | レイヤー一覧とプラグイン情報 |
