# 画面設計書 116-メインビュー

## 概要

本ドキュメントは、SingleProjectSandboxサンプルアプリケーションにおけるメインビュー（MainView）ユーザーコントロールの画面設計書である。このコントロールは、ログインフォームのUIをデモンストレーションしており、様々なテキスト入力オプション（ContentType、ReturnKeyType等）の使用例を示している。

### 本画面の処理概要

この画面は、ログインフォームを模したユーザーコントロールで、マルチライン入力、メールアドレス入力、パスワード入力、PIN入力など、様々なTextInputOptionsの使用方法をデモンストレーションする。

**業務上の目的・背景**：Avaloniaフレームワークにおけるテキスト入力コントロールの高度な機能をデモンストレーションすることが目的である。特に、モバイルプラットフォームで重要となるTextInputOptions（キーボードタイプ、リターンキータイプ等）の設定方法を示している。これにより、開発者は適切なソフトキーボードを表示し、ユーザー体験を向上させる方法を学ぶことができる。

**画面へのアクセス方法**：SingleProjectSandboxアプリケーションのメインウィンドウ（No.115）に直接埋め込まれているため、アプリケーション起動時に自動的に表示される。

**主要な操作・処理内容**：
1. マルチラインテキスト入力：複数行のテキストを入力
2. ユーザー名入力（メール形式）：Email ContentTypeでソフトキーボードを最適化
3. パスワード入力：マスク付き入力（PasswordChar="*"）
4. PIN入力：数字のみの入力（Digits ContentType）
5. ログインボタンクリック：コンソールにメッセージを出力

**画面遷移**：
- 遷移元：メインウィンドウ（No.115）に埋め込み
- 遷移先：なし

**権限による表示制御**：特になし

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | Control | 主機能 | シングルプロジェクトサンドボックスのメインビュー |

## 画面種別

フォーム / 入力

## URL/ルーティング

該当なし（ユーザーコントロール）

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 初期値 | 説明 |
|--------|------|----------|------|--------|------|
| マルチラインテキスト | 入力 | string | - | 空 | 複数行テキスト入力。プレースホルダー「Text」 |
| ユーザー名 | 入力 | string | - | 空 | メールアドレス形式。プレースホルダー「Username」 |
| パスワード | 入力 | string | - | 空 | パスワードマスク付き。プレースホルダー「Password」 |
| PIN | 入力 | string | - | 空 | 数字のみ。プレースホルダー「Pin」 |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| タイトルテキスト | 上部 | 「Login」テキスト（白文字） |
| マルチラインTextBox | 上部 | 高さ200px、複数行入力可能 |
| ユーザー名TextBox | 中央 | Email ContentType設定 |
| パスワードTextBox | 中央 | Password ContentType設定、マスク文字「*」 |
| PINTextBox | 中央 | Digits ContentType設定、マスク文字「*」 |
| Loginボタン | 下部 | ログイン処理を実行 |

## イベント仕様

### 1-Loginボタンクリック

「Login」ボタンをクリックすると、ButtonCommandメソッドが実行される。

- **トリガー**：Button Command
- **処理フロー**（MainView.axaml.cs 15-18行目）：
  1. Console.WriteLine("Button pressed")でコンソールにメッセージ出力

### 2-TextBox入力

各TextBoxへの入力時、TextInputOptionsに応じた適切なソフトキーボードが表示される。

- **トリガー**：TextBoxへのフォーカス
- **処理フロー**：
  1. ContentTypeに応じたキーボードレイアウトが表示（モバイル）
  2. ReturnKeyTypeに応じたリターンキー表示

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

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

該当なし（データベースを使用しない）

## メッセージ仕様

| 種別 | メッセージ | 条件 |
|------|----------|------|
| コンソール出力 | "Button pressed" | Loginボタンクリック時 |

## 例外処理

該当なし（デモアプリケーション）

## 備考

- StackPanelでレイアウト（Margin: 100 50、Spacing: 50）
- タイトルテキストは白文字（Foreground="White"）
- マルチラインTextBoxは高さ200px固定
- TextInputOptions.Multiline="True"とAcceptsReturn="True"の併用
- TextWrapping="Wrap"で折り返し有効
- ReturnKeyType設定（Done、Next）はモバイルプラットフォーム向け

---

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

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

### 推奨読解順序

#### Step 1: UI定義を理解する

XAMLファイルでUIレイアウトとTextInputOptionsを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MainView.axaml | `samples/SingleProjectSandbox/MainView.axaml` | TextInputOptions属性の各種設定 |

**読解のコツ**: TextInputOptions名前空間の属性（Multiline、ContentType、ReturnKeyType）は主にモバイルプラットフォーム向けの設定。デスクトップでは一部無視される場合がある。

**主要処理フロー**:
- **5行目**: x:DataType="local:MainView"でデータコンテキスト型を指定
- **6行目**: StackPanelのMargin/Spacing設定
- **7行目**: タイトル「Login」テキスト（白文字）
- **8行目**: マルチライン入力用TextBox（Multiline=True、AcceptsReturn=True、Height=200）
- **9行目**: ユーザー名入力（ContentType=Email、ReturnKeyType=Done）
- **10行目**: パスワード入力（PasswordChar=*、ContentType=Password）
- **11行目**: PIN入力（PasswordChar=*、ContentType=Digits、ReturnKeyType=Next）
- **12行目**: LoginボタンとButtonCommandバインディング

#### Step 2: コードビハインドを理解する

イベントハンドラとコマンド処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MainView.axaml.cs | `samples/SingleProjectSandbox/MainView.axaml.cs` | ButtonCommandメソッドの実装 |

**主要処理フロー**:
- **10-13行目**: コンストラクタでInitializeComponentを呼び出し
- **15-18行目**: ButtonCommandでConsole.WriteLineを実行

#### Step 3: 親ウィンドウとの関係を理解する

MainViewがMainWindowにどのように配置されているかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MainWindow.axaml | `samples/SingleProjectSandbox/MainWindow.axaml` | local:MainViewの配置 |

**主要処理フロー**:
- **9行目**: `<local:MainView />`でMainViewをコンテンツとして配置

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

```
MainWindow
    │
    └─ MainView (コンテンツ)
           │
           ├─ InitializeComponent()
           │
           └─ ButtonCommand() (Loginボタンクリック時)
                  │
                  └─ Console.WriteLine("Button pressed")
```

### データフロー図

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

ユーザー入力 ───▶ TextBox (各種)
                        │
                        │ ContentType判定
                        ▼
                 ソフトキーボード表示 (モバイル)
                        │
                        ▼
                 入力値保持
                        │
Loginボタンクリック ───▶ ButtonCommand() ───▶ コンソール出力
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MainView.axaml | `samples/SingleProjectSandbox/MainView.axaml` | XAML | メインビューUIレイアウト |
| MainView.axaml.cs | `samples/SingleProjectSandbox/MainView.axaml.cs` | ソース | コードビハインド、コマンド処理 |
| MainWindow.axaml | `samples/SingleProjectSandbox/MainWindow.axaml` | XAML | 親ウィンドウ（MainViewを配置） |
