# 画面設計書 5-Accelerator

## 概要

本ドキュメントは、ControlCatalogアプリケーションのAcceleratorページ（AcceleratorPage）の画面設計を定義します。

### 本画面の処理概要

このAcceleratorページは、Avalonia UIのキーボードアクセラレータ（アクセスキー）機能をデモンストレーションするページです。メニュー項目のInputGesture、Label要素のアクセラレータ文字（アンダースコア前置）、TabControlのアクセスキーなど、様々なアクセスキー機能を示しています。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークのキーボードアクセラレータ（ショートカットキー）機能の実装方法を示すデモです。Altキーを押すとアクセスキー文字が下線付きで表示され、キー入力でコントロールにフォーカスを移動できます。アクセシビリティ対応やキーボード操作を重視するアプリケーション開発の参考となります。

**画面へのアクセス方法**：MainViewのHamburgerMenuから「Accelerator」タブを選択してアクセスします。MainView.xamlの22-24行目で定義されています。

**主要な操作・処理内容**：
1. メニューバーの各項目をクリックまたはキーボードアクセラレータで選択
2. TabControlの各タブをアクセスキー（_T、_a等）で切り替え
3. Label要素のアクセラレータ文字でターゲットTextBoxにフォーカス移動
4. ボタンのアクセラレータ（_Button 1等）でボタンをアクティベート

**画面遷移**：
- 遷移元：MainView（HamburgerMenu）
- 遷移先：なし（コンテンツページ）

**権限による表示制御**：本アプリケーションはデモ用のため、特別な権限制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 57 | HotkeyManager | 主機能 | キーボードアクセラレータのデモ。ショートカットキーの登録と処理 |
| 51 | KeyboardDevice | 補助機能 | キーボード入力の処理とキー状態管理 |

## 画面種別

デモページ / サンプル

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングは該当なし。HamburgerMenuのTabItemとしてアクセス。

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| TextBox0-5 | 入力 | string | テキスト入力フィールド | - |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| Menu | 上部 | Menu | 3階層のメニューバー |
| TabControl | 中央 | TabControl | 5タブ構成 |
| Label群 | 下部 | Label | アクセスキー付きラベル |
| TextBox群 | 下部 | TextBox | ラベルのターゲット |
| Button群 | 下部 | Button | アクセスキー付きボタン |

## イベント仕様

### 1-MenuItemクリック/InputGesture

**トリガー**: メニュー項目のクリックまたはキーボードショートカット

**処理内容**:
1. 各メニュー項目は個別のInputGesture（Ctrl+A、Ctrl+D、Ctrl+Shift+B等）が設定
2. ToggleType="CheckBox"/"Radio"の場合は状態が切り替わる

**コード参照**: AcceleratorPage.xaml 9-52行目

### 2-Labelアクセスキー

**トリガー**: Alt + アクセラレータ文字（下線付き文字）

**処理内容**:
1. Label要素のTarget属性で指定されたTextBoxにフォーカス移動
2. Targetが指定されていない場合は何も起こらない

**コード参照**: AcceleratorPage.xaml 89-106行目

### 3-TabItemアクセスキー

**トリガー**: Alt + アクセラレータ文字（_Tab 1 → T、T_ab 2 → a等）

**処理内容**:
1. 指定されたTabItemがアクティブになる

**コード参照**: AcceleratorPage.xaml 62-84行目

### 4-Buttonアクセスキー

**トリガー**: Alt + アクセラレータ文字（_Button 1 → B等）

**処理内容**:
1. 指定されたButtonがアクティベートされる

**コード参照**: AcceleratorPage.xaml 109-113行目

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

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

本画面はデータベースを使用しません。

## メッセージ仕様

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|----------|
| N/A | - | - | - |

本画面では特別なメッセージ表示は行われません。

## 例外処理

| 例外種別 | 発生条件 | 対処 |
|----------|----------|------|
| - | - | - |

本画面では特別な例外処理は実装されていません。

## 備考

- アンダースコア(_)の後の文字がアクセラレータ文字となる
- Altキーを押すとアクセラレータ文字に下線が表示される
- 同じアクセラレータ文字を持つ複数の要素がある場合は順番にフォーカスが移動
- Radioボタンタイプのメニュー項目はGroupName属性でグループ化可能
- メニューにアイコン（github_icon.png）を設定可能

---

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

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

### 推奨読解順序

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

この画面は特別なデータ構造を使用していません。XAMLのみで完結しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AcceleratorPage.xaml | `samples/ControlCatalog/Pages/AcceleratorPage.xaml` | アクセラレータ文字の記法（_文字）を確認 |

**読解のコツ**: アンダースコア(_)の位置に注目してください。直後の文字がアクセスキーとなります。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | AcceleratorPage.xaml | `samples/ControlCatalog/Pages/AcceleratorPage.xaml` | StackPanel構造とメニュー定義 |
| 2-2 | AcceleratorPage.xaml.cs | `samples/ControlCatalog/Pages/AcceleratorPage.xaml.cs` | コードビハインド（最小限） |

**主要処理フロー**:
1. **8-53行目**: Menuコントロールの定義（3階層メニュー）
2. **61-84行目**: TabControlの定義（5タブ、各タブにアクセスキー）
3. **88-106行目**: Label/TextBoxペアの定義（Target属性でフォーカス移動）
4. **109-113行目**: Buttonの定義（アクセスキー付き）

#### Step 3: アクセラレータのパターンを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AcceleratorPage.xaml | `samples/ControlCatalog/Pages/AcceleratorPage.xaml` | InputGesture、ToggleType、GroupName等 |

**主要処理フロー**:
- **10行目**: InputGesture="Ctrl+A"でショートカット設定
- **27行目**: ToggleType="CheckBox"でチェックボックス型
- **33行目**: ToggleType="Radio" GroupName="A"でラジオグループ

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

```
AcceleratorPage（UserControl）
    │
    ├─ StackPanel
    │      │
    │      ├─ Menu
    │      │      ├─ MenuItem[_First]
    │      │      │      ├─ MenuItem[Standard] InputGesture="Ctrl+A"
    │      │      │      ├─ MenuItem[_Disabled] IsEnabled="False"
    │      │      │      ├─ MenuItem[Sub _Menu] → SubMenuItems
    │      │      │      ├─ MenuItem[_Icon] InputGesture="Ctrl+Shift+B"
    │      │      │      └─ MenuItem[_Checkbox] ToggleType="CheckBox"
    │      │      │
    │      │      ├─ MenuItem[_Second]
    │      │      │      ├─ MenuItem ToggleType="CheckBox"
    │      │      │      └─ MenuItem ToggleType="Radio" GroupName="A"
    │      │      │
    │      │      └─ MenuItem[Thir_d]
    │      │
    │      ├─ TabControl
    │      │      ├─ TabItem[_Tab 1]
    │      │      ├─ TabItem[T_ab 2]
    │      │      ├─ TabItem[_Tab 3]
    │      │      ├─ TabItem[_Tab 4]
    │      │      └─ TabItem[_Fab 5]
    │      │
    │      ├─ Label/TextBoxペア × 6
    │      │      └─ Label[Target] → TextBox（フォーカス移動）
    │      │
    │      └─ Button × 3
    │             └─ _Button 1/2/3
    │
    └─ AcceleratorPage.xaml.cs
           └─ InitializeComponent()のみ
```

### データフロー図

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

キーボード入力 ─────▶ AcceleratorPage ───────▶ UIフォーカス
  │                        │
  ├─ Alt + 文字 ────────▶ アクセスキー解決 ──▶ フォーカス移動
  │                        │
  ├─ Ctrl + 文字 ───────▶ InputGesture解決 ─▶ メニューアクション
  │                        │
  └─ マウスクリック ────▶ 直接選択 ─────────▶ UI応答
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| AcceleratorPage.xaml | `samples/ControlCatalog/Pages/AcceleratorPage.xaml` | XAML | アクセラレータデモのUI定義 |
| AcceleratorPage.xaml.cs | `samples/ControlCatalog/Pages/AcceleratorPage.xaml.cs` | ソース | コードビハインド（最小限） |
| github_icon.png | `samples/ControlCatalog/Assets/github_icon.png` | リソース | メニューアイコン |
