# 画面設計書 103-Gestures

## 概要

本ドキュメントは、IntegrationTestAppにおけるジェスチャー機能のテストページ（GesturesPage）の画面設計書です。

### 本画面の処理概要

本画面は、Avaloniaフレームワークのジェスチャー認識機能を統合テストするためのテストページです。タップ、ダブルタップ、右タップなどのジェスチャーイベントの検出と処理をテストできます。

**業務上の目的・背景**：本画面は、Avaloniaフレームワークの品質保証のために存在します。ジェスチャー認識機能は、タッチデバイスやマウス操作において重要なユーザーインタラクションを提供します。タップ、ダブルタップ、右タップなどのジェスチャーが正しく認識され、適切なイベントが発火することを検証し、フレームワーク全体の信頼性を向上させます。また、Issue #8733の修正確認（ダブルタップ後の要素切り替え）も含まれています。

**画面へのアクセス方法**：IntegrationTestAppのメインウィンドウから、ListBoxナビゲーションで「Gestures」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. 青いBorder（GestureBorder）をタップしてTappedイベントを発火
2. 青いBorderをダブルタップしてDoubleTappedイベントを発火し、緑のBorderに切り替え
3. 青いBorderを右タップしてRightTappedイベントを発火
4. 緑のBorder（GestureBorder2）をダブルタップして別のDoubleTappedイベントを発火
5. Resetボタンで初期状態に戻す

**画面遷移**：
- 遷移元：IntegrationTestApp MainWindow（ListBoxナビゲーション）
- 遷移先：なし（テストページ単体）

**権限による表示制御**：本画面は統合テスト用のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 55 | Gestures | 主機能 | ジェスチャーのテスト。タップ・ダブルタップ・右タップの検出 |

## 画面種別

テスト画面

## URL/ルーティング

IntegrationTestApp内のUserControlとして読み込まれるため、URLルーティングはありません。
クラス名: `IntegrationTestApp.Pages.GesturesPage`

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| 最後のジェスチャー | 出力 | string | - | 最後に認識されたジェスチャーの種類 |

## 表示項目

| 項目名 | コントロール名 | 種別 | 説明 |
|--------|--------------|------|------|
| Last Gesture | LastGesture | TextBlock | 最後に認識されたジェスチャーの種類を表示 |
| Reset Button | ResetGestures | Button | 状態リセットボタン |
| Gesture Border | GestureBorder | Border | ジェスチャー検出用領域（青色、初期表示） |
| Gesture Border 2 | GestureBorder2 | Border | ジェスチャー検出用領域（緑色、ダブルタップ後に表示） |

## イベント仕様

### 1-GestureBorder_Tapped

GestureBorderがタップされた際に発火します。

**処理フロー**:
1. LastGestureテキストブロックを "Tapped" に設定

### 2-GestureBorder_DoubleTapped

GestureBorderがダブルタップされた際に発火します。

**処理フロー**:
1. LastGestureテキストブロックを "DoubleTapped" に設定
2. GestureBorderを非表示（IsVisible = false）
3. GestureBorder2を表示（IsVisible = true）

### 3-GestureBorder_RightTapped

GestureBorderが右タップされた際に発火します。

**処理フロー**:
1. LastGestureテキストブロックを "RightTapped" に設定

### 4-GestureBorder2_DoubleTapped

GestureBorder2がダブルタップされた際に発火します。

**処理フロー**:
1. LastGestureテキストブロックを "DoubleTapped2" に設定

### 5-ResetGestures_Click

Resetボタンがクリックされた際に発火します。

**処理フロー**:
1. LastGestureテキストブロックをクリア（空文字列）
2. GestureBorderを表示（IsVisible = true）
3. GestureBorder2を非表示（IsVisible = false）

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

本画面はUIテスト用であり、データベースとの連携はありません。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|------------|------|--------------|---------|
| MSG-001 | 情報 | Tapped | タップ時 |
| MSG-002 | 情報 | DoubleTapped | ダブルタップ時（GestureBorder） |
| MSG-003 | 情報 | RightTapped | 右タップ時 |
| MSG-004 | 情報 | DoubleTapped2 | ダブルタップ時（GestureBorder2） |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| 特記事項なし | 本画面では例外的な状況は発生しない設計 |

## 備考

- AutomationProperties.AccessibilityViewとControlTypeOverrideが設定されており、UIオートメーションテストに対応しています
- GestureBorderとGestureBorder2はControlTypeOverride="Image"が設定されています
- Gestures.RightTappedは添付イベントとして設定されています
- Issue #8733のテストケース：ダブルタップ後に要素を切り替えても正しくジェスチャーが検出されることを確認

---

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

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

### 推奨読解順序

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

ジェスチャーイベントの引数クラスを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TappedEventArgs.cs | `src/Avalonia.Base/Input/TappedEventArgs.cs` | タップイベントの引数クラス |
| 1-2 | Gestures.cs | `src/Avalonia.Base/Input/Gestures.cs` | ジェスチャー関連の添付イベント定義 |

**読解のコツ**: Avaloniaのジェスチャーは、RoutedEventとして実装されています。Tapped、DoubleTapped、RightTappedは添付イベントまたはインスタンスイベントとして使用できます。

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

処理の起点となるXAMLファイルとコードビハインドを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | GesturesPage.axaml | `samples/IntegrationTestApp/Pages/GesturesPage.axaml` | 画面レイアウトとイベントバインディング |
| 2-2 | GesturesPage.axaml.cs | `samples/IntegrationTestApp/Pages/GesturesPage.axaml.cs` | イベントハンドラの実装 |

**主要処理フロー**:
1. **行17-22**: GestureBorderにTapped, DoubleTapped, RightTappedイベントをバインド
2. **行23-26**: GestureBorder2にDoubleTappedイベントをバインド（IsVisible=False）
3. **行14-16**: GestureBorder_TappedでLastGestureを更新
4. **行19-26**: GestureBorder_DoubleTappedで要素の表示切り替え
5. **行28-31**: GestureBorder_RightTappedでLastGestureを更新
6. **行38-43**: ResetGestures_Clickで初期状態に戻す

#### Step 3: ジェスチャー認識ロジックを理解する

ジェスチャーの認識と発火の仕組みを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Gestures.cs | `src/Avalonia.Base/Input/Gestures.cs` | ジェスチャーイベントの定義と登録 |

**主要処理フロー**:
- Tapped: シングルタップ検出時に発火
- DoubleTapped: ダブルタップ検出時に発火
- RightTapped: 右クリックまたは長押しで発火

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

```
GesturesPage
    │
    ├─ DockPanel
    │      ├─ ResetGestures (Button) ─── Click → ResetGestures_Click()
    │      │                                   ├─ LastGesture.Text = ""
    │      │                                   ├─ GestureBorder.IsVisible = true
    │      │                                   └─ GestureBorder2.IsVisible = false
    │      │
    │      └─ LastGesture (TextBlock) ← 結果表示
    │
    └─ Panel
           ├─ GestureBorder (Blue)
           │      ├─ Tapped → GestureBorder_Tapped()
           │      │              └─ LastGesture.Text = "Tapped"
           │      │
           │      ├─ DoubleTapped → GestureBorder_DoubleTapped()
           │      │              ├─ LastGesture.Text = "DoubleTapped"
           │      │              ├─ GestureBorder.IsVisible = false
           │      │              └─ GestureBorder2.IsVisible = true
           │      │
           │      └─ RightTapped → GestureBorder_RightTapped()
           │                     └─ LastGesture.Text = "RightTapped"
           │
           └─ GestureBorder2 (Green, IsVisible=False)
                  └─ DoubleTapped → GestureBorder2_DoubleTapped()
                                  └─ LastGesture.Text = "DoubleTapped2"
```

### データフロー図

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

タップ ───▶ GestureBorder_Tapped() ───▶ LastGesture.Text = "Tapped"

ダブルタップ ───▶ GestureBorder_DoubleTapped() ───▶ LastGesture.Text = "DoubleTapped"
                           │
                           ▼
                    要素表示切り替え
                    GestureBorder → GestureBorder2

右タップ ───▶ GestureBorder_RightTapped() ───▶ LastGesture.Text = "RightTapped"

Reset Click ───▶ ResetGestures_Click() ───▶ 初期状態に戻す
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| GesturesPage.axaml | `samples/IntegrationTestApp/Pages/GesturesPage.axaml` | ソース | 画面レイアウト定義（XAML） |
| GesturesPage.axaml.cs | `samples/IntegrationTestApp/Pages/GesturesPage.axaml.cs` | ソース | イベントハンドラ実装（コードビハインド） |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | 親ウィンドウ（ナビゲーション） |
| Gestures.cs | `src/Avalonia.Base/Input/Gestures.cs` | ソース | ジェスチャー添付イベントの定義 |
| TappedEventArgs.cs | `src/Avalonia.Base/Input/TappedEventArgs.cs` | ソース | タップイベント引数クラス |
