# 画面設計書 17-アバウト画面

## 概要

本ドキュメントは、InvenTree Flutterアプリケーションの「アバウト画面」について、その機能・動作・実装を詳細に記述した設計書です。

### 本画面の処理概要

アバウト画面は、アプリケーションとサーバーに関する情報を表示する画面です。サーバーの接続状態、バージョン情報、インスタンス名、プラグインサポート状況などのサーバー情報と、アプリケーションのパッケージ名、バージョン、リリースノート、クレジットなどのアプリ情報を確認できます。また、ドキュメントへのリンク、翻訳協力ページへのリンク、バグ報告ページへのリンクも提供されています。

**業務上の目的・背景**：在庫管理システムの運用において、サーバーとアプリケーションのバージョン情報の確認は重要です。特に、APIの互換性やプラグインの利用可否を確認する際に必要となります。また、問題発生時のサポート対応や、コミュニティへの貢献（翻訳協力、バグ報告）の導線としても機能します。

**画面へのアクセス方法**：ドロワーメニューから「設定」を選択し、設定画面から「About」を選択することでアクセスできます。

**主要な操作・処理内容**：
1. サーバー情報の確認 - 接続先アドレス、ユーザー名、サーバーバージョン、インスタンス名、プラグインサポート状況を表示
2. アプリ情報の確認 - パッケージ名、アプリバージョン・ビルド番号を表示
3. リリースノート画面への遷移 - アプリのリリースノートを確認
4. クレジット画面への遷移 - アプリのクレジット情報を確認
5. 外部リンクへのアクセス - ドキュメント、翻訳ページ、バグ報告ページを外部ブラウザで開く

**画面遷移**：
- 遷移元：設定画面（`lib/settings/settings.dart`）
- 遷移先：リリースノート画面、クレジット画面、外部Webサイト

**権限による表示制御**：この画面自体への権限制御はありません。全てのユーザーがアバウト情報を確認できます。ただし、サーバー未接続時は一部のサーバー情報が「未接続」と表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 65 | アバウト表示 | 主機能 | サーバー情報、アプリバージョン、リンクの表示 |
| 66 | リリースノート表示 | 遷移先機能 | リリースノートメニュー押下時にリリースノート画面へ遷移 |

## 画面種別

情報表示

## URL/ルーティング

Flutter Navigator経由でのプッシュ遷移（MaterialPageRoute）

## 入出力項目

| 項目名 | 入出力 | データ型 | 必須 | 説明 |
|--------|--------|---------|------|------|
| PackageInfo | 入力 | PackageInfo | 必須 | アプリパッケージ情報（コンストラクタ経由） |

## 表示項目

| No | 項目名 | 表示形式 | 説明 |
|----|--------|---------|------|
| 1 | AppBar | テキスト | 「About」タイトル表示 |
| 2 | サーバー詳細セクションヘッダー | ListTile（太字） | 「サーバー詳細」 |
| 3 | サーバーアドレス | ListTile | アドレス、接続状態アイコン（緑チェック/赤バツ） |
| 4 | ユーザー名 | ListTile | ログイン中のユーザー名 |
| 5 | サーバーバージョン | ListTile | InvenTreeサーバーのバージョン |
| 6 | サーバーインスタンス | ListTile | サーバーインスタンス名 |
| 7 | プラグインサポート | ListTile | プラグインサポート状況の説明 |
| 8 | アプリ詳細セクションヘッダー | ListTile（太字） | 「アプリ詳細」 |
| 9 | パッケージ名 | ListTile | アプリのパッケージ名 |
| 10 | アプリバージョン | ListTile | バージョン - ビルド番号 |
| 11 | リリースノート | ListTile | タップでリリースノート画面へ遷移 |
| 12 | クレジット | ListTile | タップでクレジット画面へ遷移 |
| 13 | ドキュメント | ListTile | タップで外部ドキュメントサイトを開く |
| 14 | 翻訳協力 | ListTile | タップでCrowdinページを開く |
| 15 | バグ報告 | ListTile | タップでGitHub Issueページを開く |

## イベント仕様

### 1-リリースノートタップ時

1. `_releaseNotes()`メソッドを呼び出し
2. `rootBundle.loadString("assets/release_notes.md")`でアセットからリリースノートを読み込み
3. `Navigator.push()`で`ReleaseNotesWidget`に遷移

### 2-クレジットタップ時

1. `_credits()`メソッドを呼び出し
2. `rootBundle.loadString("assets/credits.md")`でアセットからクレジット情報を読み込み
3. `Navigator.push()`で`CreditsWidget`に遷移

### 3-ドキュメントタップ時

1. `_openDocs()`メソッドを呼び出し
2. `launchUrl()`で`https://docs.inventree.org/app`を外部ブラウザで開く

### 4-翻訳協力タップ時

1. `_translate()`メソッドを呼び出し
2. `launchUrl()`で`https://crowdin.com/project/inventree`を外部ブラウザで開く

### 5-バグ報告タップ時

1. `_reportBug()`メソッドを呼び出し
2. `launchUrl()`でGitHub Issue作成ページを外部ブラウザで開く

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | この画面ではデータベース更新は発生しません |

## メッセージ仕様

| No | メッセージ種別 | メッセージ内容 | 表示条件 |
|----|--------------|--------------|---------|
| 1 | 情報表示 | L10().notConnected | サーバー未接続時 |
| 2 | 情報表示 | L10().serverNotConnected | サーバー未接続時の説明 |

## 例外処理

| No | 例外条件 | 処理内容 |
|----|---------|---------|
| 1 | サーバー未接続 | サーバー情報セクションに「未接続」メッセージを表示 |
| 2 | URLランチ失敗 | 何も起こらない（canLaunchUrlのチェックあり） |

## 備考

- `PackageInfo`はコンストラクタで渡される（呼び出し元で取得済み）
- サーバー接続状態によって表示内容が動的に変化
- 外部リンクはurl_launcherパッケージを使用して開く
- ドキュメントURL: `https://docs.inventree.org/app`
- 翻訳URL: `https://crowdin.com/project/inventree`
- バグ報告URL: `https://github.com/inventree/inventree-app/issues/new/`

---

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

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

### 推奨読解順序

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

まず、使用されるデータ構造（PackageInfo、InvenTreeAPI）を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | about.dart | `lib/settings/about.dart` | `PackageInfo`の使用方法 |
| 1-2 | api.dart | `lib/api.dart` | `InvenTreeAPI()`のシングルトンパターンと接続情報 |

**読解のコツ**:
- 16-19行目でコンストラクタが`PackageInfo`を受け取る
- 86-155行目で`InvenTreeAPI()`からサーバー情報を取得

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

処理の起点となるウィジェットクラスを特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | about.dart | `lib/settings/about.dart` | `InvenTreeAboutWidget`クラスの構造（StatelessWidget） |

**主要処理フロー**:
1. **16-19行目**: `InvenTreeAboutWidget` StatelessWidgetの定義
2. **73-251行目**: `build()`メソッドでUI構築
3. **86-155行目**: サーバー接続状態に応じた表示分岐

#### Step 3: 画面遷移処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | about.dart | `lib/settings/about.dart` | `_releaseNotes()`, `_credits()`メソッド |
| 3-2 | release.dart | `lib/settings/release.dart` | 遷移先のウィジェット定義 |

**主要処理フロー**:
- **21-29行目**: `_releaseNotes()`でアセット読み込みと画面遷移
- **31-38行目**: `_credits()`でアセット読み込みと画面遷移

#### Step 4: 外部リンク処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | about.dart | `lib/settings/about.dart` | `_openDocs()`, `_translate()`, `_reportBug()`メソッド |

**主要処理フロー**:
- **40-46行目**: `_openDocs()`でドキュメントサイトを開く
- **61-71行目**: `_translate()`でCrowdinを開く
- **48-59行目**: `_reportBug()`でGitHub Issue作成ページを開く

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

```
InvenTreeAboutWidget
    │
    ├─ build()
    │      ├─ InvenTreeAPI().isConnected()
    │      │      └─ サーバー情報表示分岐
    │      │
    │      └─ ListTile構築
    │             ├─ onTap: _releaseNotes()
    │             │      └─ rootBundle.loadString()
    │             │             └─ Navigator.push(ReleaseNotesWidget)
    │             │
    │             ├─ onTap: _credits()
    │             │      └─ rootBundle.loadString()
    │             │             └─ Navigator.push(CreditsWidget)
    │             │
    │             ├─ onTap: _openDocs()
    │             │      └─ launchUrl(DOCS_URL)
    │             │
    │             ├─ onTap: _translate()
    │             │      └─ launchUrl(crowdin URL)
    │             │
    │             └─ onTap: _reportBug()
    │                    └─ launchUrl(GitHub Issue URL)
    │
    └─ PackageInfo (コンストラクタ経由)
           └─ packageName, version, buildNumber
```

### データフロー図

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

PackageInfo     ───▶   build()でUI構築   ───▶   アプリ情報表示
(コンストラクタ)

InvenTreeAPI()  ───▶   isConnected()判定  ───▶   サーバー情報表示
(シングルトン)                                    （または未接続表示）

assets/         ───▶   rootBundle.loadString()  ───▶  リリースノート/クレジット画面
release_notes.md
credits.md
```

```
[外部リンクフロー]

ListTileタップ  ───▶  canLaunchUrl()  ───▶  launchUrl()  ───▶  外部ブラウザ
                         │
                         └─ false ───▶ 何もしない
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| about.dart | `lib/settings/about.dart` | ソース | 画面本体のウィジェット実装 |
| release.dart | `lib/settings/release.dart` | ソース | リリースノート・クレジット画面 |
| api.dart | `lib/api.dart` | ソース | InvenTreeAPI接続管理 |
| l10.dart | `lib/l10.dart` | ソース | 多言語対応テキスト定義 |
| app_colors.dart | `lib/app_colors.dart` | ソース | アプリカラー定数 |
| link_icon.dart | `lib/widget/link_icon.dart` | ソース | リンクアイコンウィジェット |
| settings.dart | `lib/settings/settings.dart` | ソース | 設定画面（遷移元） |
| release_notes.md | `assets/release_notes.md` | アセット | リリースノートMarkdownファイル |
| credits.md | `assets/credits.md` | アセット | クレジットMarkdownファイル |
