akira/keinasystem
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
23cb4d3118b708594671c870d56acd861d08ca5c
keinasystem/document/04_画面設計書.md
Akira 73e99f62d4 対応表モード 実装サマリー 
新規ファイル
ファイル	内容
LinkModal.tsx	共通コンポーネントとして切り出し（圃場詳細・対応表の両方で使用）
変更ファイル
ファイル	変更内容
fields/page.tsx	[通常] / [対応表] トグルボタンを追加。対応表モードでは圃場名・面積・共済漢字地名・中山間所在地を横並び表示。各行で直接+追加/x解除が可能
fields/[id]/page.tsx	LinkModalのインポートを共通コンポーネントに変更
04_画面設計書.md	画面4に対応表モードのレイアウト・機能要件を追記
06_差異レポート.md	E-2の実装状況を更新
対応表モードの機能
一覧表示: 圃場名 / 面積(反) / 共済（耕地-分筆 + 漢字地名） / 中山間（ID + 所在地）
直接編集: 各セルの[+追加]ボタンで検索モーダルを開いて紐づけ追加
紐づけ解除: 各レコードにホバーで表示される[x]ボタン（確認ダイアログ付き）
複数紐づけ: 同一セル内に改行で表示
圃場名クリック: 詳細画面(/fields/[id])に遷移
http://localhost:3000/fields で「対応表」ボタンを押して確認できます。
2026-02-18 14:24:10 +09:00

816 lines
44 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 画面設計書
> **最終更新**: 2026-02-16
> **変更履歴**: 実装済み機能との差異を解消（B-1〜B-5, C-6, E-1 反映）
## 🎨 デザイン原則（再掲）
1. **シンプル・イズ・ベスト**: 1画面1機能
2. **情報の優先順位**: 最重要情報を最も目立つ位置に
3. **エラーを起こしにくい**: 選択式優先、自由入力最小限
4. **スマホファースト（参照時）**: 文字16px以上、タップ領域44px以上
5. **既存データを尊重**: 紙の台帳と同じ感覚で使える
---
## 🧭 共通ナビゲーション（Navbar）
### PC レイアウト
上部に水平ナビゲーションバーを常時表示。ブランド名「KeinaSystem」と主要画面へのリンクを配置。
```
┌──────────────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] [ログアウト] │
└──────────────────────────────────────────────────────────────┘
```
### ナビゲーション項目
| アイコン | ラベル | パス | 説明 |
|---------|--------|------|------|
| 🌾 (Wheat) | 作付け計画 | `/allocation` | 作付け計画編集画面（メイン） |
| 📍 (MapPin) | 圃場管理 | `/fields` | 圃場一覧・編集 |
| 📄 (FileText) | 帳票出力 | `/reports` | 申請書PDFダウンロード |
| ⬆️ (Upload) | データ取込 | `/import` | マスタインポート |
### 仕様
- アクティブなページのリンクは緑背景でハイライト
- ログアウトボタンは右端に配置
- スマホではレスポンシブにタブバーまたはハンバーガーメニューに切り替え
---
## 📱 画面一覧
### Phase 1（MVP）
1. **ログイン画面** (`/login`)
2. **ダッシュボード** (`/`) — 将来拡張用、Phase 1では簡易版
3. **作付け計画一覧・編集** (`/allocation`) — メイン画面、インライン編集方式
4. **圃場管理一覧** (`/fields`) — 圃場の一覧表示・グループ管理・表示順管理
5. **圃場詳細・編集** (`/fields/[id]`) — 個別圃場の情報編集
6. **圃場新規作成** (`/fields/new`) — 手動での圃場登録
7. **申請書ダウンロード** (`/reports`) — PDFダウンロード
8. **データ取込** (`/import`) — インポート
### Phase 2以降
9. 栽培履歴入力
10. 作業カレンダー
11. 資材計画
---
## 画面1: ログイン画面
### 目的
シンプルな認証（ユーザー名＋パスワード）
### レイアウト（PC/スマホ共通）
```
┌─────────────────────────────────────┐
│ │
│ 🌾 Keina System │
│ 作付け計画管理システム │
│ │
│ ┌───────────────────────┐ │
│ │ ユーザー名 │ │
│ │ [___________________] │ │
│ └───────────────────────┘ │
│ │
│ ┌───────────────────────┐ │
│ │ パスワード │ │
│ │ [___________________] │ │
│ └───────────────────────┘ │
│ │
│ [ ログイン ] │
│ │
└─────────────────────────────────────┘
```
### 機能要件
- [x] ユーザー名とパスワードで認証（JWT）
- [x] ログイン成功 → 作付け計画画面へ遷移
- [x] ログイン失敗 → エラーメッセージ表示
- [ ] 「パスワードを忘れた」リンク（Phase 2）
---
## 画面2: ダッシュボード
### 目的
システムの入り口（Phase 1では簡易版、将来拡張）
### 現在の実装
- `/` アクセス時、トークンの有無で `/allocation`（ログイン済み）か `/login`（未ログイン）にリダイレクト
- ダッシュボード画面自体は未実装
### レイアウト（将来実装予定、PC）
```
┌────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] ... │
├────────────────────────────────────────────────────┤
│ │
│ 📊 概要 │
│ ┌────────────────┬────────────────┬─────────────┐│
│ │ 全圃場数 │ 作付け済み │ 未割当 ││
│ │ 39筆 │ 35筆 │ 4筆 ❗ ││
│ └────────────────┴────────────────┴─────────────┘│
│ │
│ 🔗 クイックアクセス │
│ ┌──────────────────────────────────────────────┐│
│ │ [📝 作付け計画を編集] [📄 申請書ダウンロード] ││
│ └──────────────────────────────────────────────┘│
│ │
│ 📌 最近の変更 │
│ • 2025/02/10: 田A に「米（にこまる）」を割当 │
│ • 2025/02/09: 田B を「休耕」に変更 │
│ │
└────────────────────────────────────────────────────┘
```
### 機能要件（将来実装予定）
- [ ] 年度選択（ドロップダウン）
- [ ] 作付け状況のサマリー表示
- [ ] 「作付け計画を編集」→ 画面3へ
- [ ] 「申請書ダウンロード」→ 画面7へ
- [ ] 将来の機能追加時にボタンを追加していく想定
---
## 画面3: 作付け計画一覧・編集（メイン画面）
### 目的
全圃場の作付け状況を一覧で確認し、**インライン**で直接編集
### 編集方式
**インライン編集**を採用（モーダルではない）。テーブル行内のドロップダウンで作物・品種を選択し、変更は即座にAPIに保存される。
### レイアウト（PC）
```
┌──────────────────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │
├──────┬───────────────────────────────────────────────────────────┤
│ │ │
│ 📊 │ 年度: [2025 ▼] 並び順: [カスタム順 ▼] │
│ 集計 │ │
│ │ ──────────────────────────────────────────────────────── │
│ ──── │ グループ 圃場名 面積 作物 品種 備考 順序│
│ 合計 │ ──────────────────────────────────────────────────────── │
│20.0反│ [口神_▼] おまけ 0.2反 [米 ▼] [にこまる▼] [___] ↑↓│
│ │ [口神_▼] 口神１反 1.2反 [米 ▼] [にこまる▼] [___] ↑↓│
│ 米 │ [口神_▼] 口神北東 0.4反 [野菜 ▼] [トマト▼] [___] ↑↓│
│15.3反│ [南__▼] 口神北中 0.4反 [-- ▼] [---------] [___] ↑↓│
│┣にこ │ [南__▼] 口神北西 0.5反 [その他 ▼] [完全休耕▼] [___] ↑↓│
││10.2反│ │
│┗たち │ ... (39行) │
││5.1反│ │
│ │ │
│未設定│ │
│2.0反❗ │
└──────┴───────────────────────────────────────────────────────────┘
```
**サイドバー（集計パネル、開閉可能）:**
```
┌──────────────┐
│ 集計 [×] │← 閉じるボタン
├──────────────┤
│ 合計 20.0反 │
│ │
│ 米 │
│ 15.3反 │
│ ├にこまる │
│ │ 10.2反 │
│ └たちはるか │
│ 5.1反 │
│ │
│ 野菜 │
│ 3.2反 │
│ │
│ その他 │
│ 1.5反 │
│ │
│ ❗未設定 │
│ 2.0反 │
└──────────────┘
```
### レイアウト（スマホ）
```
┌────────────────────────────────────┐
│ 🌾 作付け計画 [2025▼] [集計] ☰ │
├────────────────────────────────────┤
│ 並び順: [カスタム順 ▼] │
├────────────────────────────────────┤
│ ┌────────────────────────────────┐│
│ │ おまけ 0.2反 ││
│ │ グループ: [口神___▼] ││
│ │ 作物: [米 ▼] 品種: [にこまる▼]││
│ │ 備考: [___________________] ││
│ └────────────────────────────────┘│
│ │
│ ┌────────────────────────────────┐│
│ │ 口神 北中 0.4反 ││
│ │ グループ: [南___▼] ││
│ │ 作物: [-- ▼] 品種: [------] ││
│ │ 備考: [___________________] ││
│ └────────────────────────────────┘│
│ │
│ ... (39圃場) │
└────────────────────────────────────┘
```
**スマホ: 集計モーダル**（[集計]ボタンで表示）
```
┌────────────────────────────────┐
│ 集計 [×] │
├────────────────────────────────┤
│ 合計面積: 20.0反 │
│ │
│ 米: 15.3反 │
│ ├ にこまる: 10.2反 │
│ └ たちはるか: 5.1反 │
│ │
│ 野菜: 3.2反 │
│ │
│ その他: 1.5反 │
│ │
│ ❗未設定: 2.0反 │
│ │
│ [閉じる] │
└────────────────────────────────┘
```
### 機能要件
- [x] 全圃場を一覧表示（39行）
- [x] 各行に以下を表示:
- グループ名（インライン編集可能、datalist補完付き）
- 圃場名
- 面積（反）
- 作物（ドロップダウン、インライン選択）
- 品種（ドロップダウン、作物選択後に有効化）
- 備考（テキスト入力）
- 表示順変更ボタン（↑↓、カスタム順モード時のみ）
- [x] 年度切り替え（ドロップダウン）
- [x] 並び替え機能:
- カスタム順（display_order）
- グループ順（group_name）
- 作付け順（crop別）
- [x] **インライン即時保存**: 作物・品種・備考を変更すると即座にAPIに保存（画面遷移なし、スクロール位置維持）
- [x] **集計サイドバー（PC）**:
- 閉じるボタンで非表示可能
- 作物別の合計面積
- 品種別の内訳（ツリー表示、展開可能）
- 未設定の面積を警告表示
- 作付け変更時にリアルタイム更新
- [x] **集計モーダル（スマホ）**:
- [集計]ボタンでサイドパネル表示
- PC版と同じ内容
- [ ] 検索機能（圃場名・住所で部分一致検索）— **未実装**
- [ ] フィルタ機能（作物で絞り込み、未割当のみトグル）— **未実装**
- [ ] チェックボックスによる一括操作 — **未実装**
- [ ] [前年度をコピー]ボタン — **Backend APIあり、Frontendボタン未実装**
### デザインノート
- **未割当の強調**: 作物未設定の行は目立つ表示
- **即時保存**: ユーザーが選択を変更するたびにバックグラウンドで保存（ローディングスピナーなし）
- **スクロール維持**: 保存時に画面がリセットされない
- **サイドバーの幅**: 約200px（固定）
---
## 画面4: 圃場管理一覧
### 目的
圃場マスタの管理（一覧表示、グループ編集、表示順変更、削除）。
**対応表モード**で共済・中山間マスタとの紐づけを一覧確認・直接編集。
### レイアウト（PC）— 通常モード
```
┌──────────────────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │
├──────────────────────────────────────────────────────────────────┤
│ │
│ 並び順: [表示順 ▼] 表示: [通常] [対応表] [+ 新規作成] │
│ │
│ ───────────────────────────────────────────────────────────── │
│ 順序 圃場名 グループ 住所 面積 所有者 共済 中山間 操作│
│ ───────────────────────────────────────────────────────────── │
│ 1 おまけ [口神__▼] 口神ノ川... 0.2反 吉田 1件 - ✏️🗑│
│ 2 口神１反 [口神__▼] 口神ノ川... 1.2反 吉田 1件 1件 ✏️🗑│
│ │
│ ... (39行) │
└──────────────────────────────────────────────────────────────────┘
```
### レイアウト（PC）— 対応表モード
```
┌──────────────────────────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 並び順: [表示順 ▼] 表示: [通常] [対応表] [+ 新規作成] │
│ │
│ ───────────────────────────────────────────────────────────────────── │
│ 圃場名 面積 共済（漢字地名） 中山間（所在地） │
│ ───────────────────────────────────────────────────────────────────── │
│ おまけ 0.2反 1-1 四万十町 足川 351 [×] - │
│ [+] [+]│
│ 口神 １反２畝 1.2反 2-2 四万十町 笹ヶ谷 374-1 [×] ID50 笹ヶ谷374 [×]│
│ [+] [+]│
│ ソーラーの上 0.8反 21-1 四万十町 大窪 592-1 [×] ID62 大窪592 [×]│
│ ID61 大窪592 [×]│
│ [+] [+]│
│ ───────────────────────────────────────────────────────────────────── │
│ ... (39行) │
└──────────────────────────────────────────────────────────────────────────┘
```
**対応表モードの特徴:**
- 各行に圃場名・面積・共済の漢字地名・中山間の所在地を横並び表示
- 複数紐づけがある場合は同一セル内で改行表示
- 各紐づけレコードの横に [×] ボタンで紐づけ解除
- 各セルの末尾に [+] ボタンで紐づけ追加（モーダル表示）
- 通常モードの順序・グループ・削除操作は非表示（対応表モードは紐づけ管理に集中）
### 機能要件
- [x] 全圃場を一覧表示（テーブル形式）
- [x] 表示列: 順序番号、圃場名、グループ名、住所、面積(反)、面積(m2)、所有者、操作
- [x] **グループ名のインライン編集**: datalist による候補表示付きテキスト入力
- [x] **表示順変更**: ↑↓ ボタンで順序入れ替え（表示順モード時）
- [x] 並び順の切り替え（グループ順、表示順、登録順）
- [x] [新規作成]ボタン → 画面6へ遷移
- [x] [✏️ 編集]ボタン → 画面5（圃場詳細）へ遷移
- [x] [🗑 削除]ボタン → 確認ダイアログ後に削除
- [x] **紐づけ状況列（E-2）** — 通常モードに「共済」「中山間」件数列を表示
- [ ] **対応表モード（E-2）** — **未実装**
- [ ] 表示切替トグル: [通常] [対応表] ボタン
- [ ] 対応表モードの表示列: 圃場名、面積(反)、共済（漢字地名）、中山間（所在地）
- [ ] 共済列: 耕地-分筆 + 漢字地名を表示。複数あれば改行
- [ ] 中山間列: ID + 大字+字+地番を表示。複数あれば改行
- [ ] 各紐づけレコードに [×] ボタン（確認ダイアログ付き紐づけ解除）
- [ ] 各セルに [+] ボタン（追加モーダル表示 → 画面5と同じLinkModal）
- [ ] 紐づけなしの場合は「-」をグレー表示
---
## 画面5: 圃場詳細・編集
### 目的
個別の圃場情報を確認・編集。共済/中山間マスタとの紐づけ管理。田んぼにいるときにスマホで確認する用途も想定。
### レイアウト（PC）
```
┌────────────────────────────────────────────────────────────┐
│ ← 一覧に戻る │
├────────────────────────────────────────────────────────────┤
│ │
│ 圃場名 住所 │
│ [口神 北中___________] [口神ノ川１９８（笹ヶ谷374-1)___] │
│ │
│ 面積（反） 面積（m2） 所有者 グループ名 │
│ [0.4___] [400___] [吉田___] [口神___] │
│ │
│ [保存] │
│ │
├────────────────────────────────────────────────────────────┤
│ │
│ 📋 共済情報 (2件 / 計800m2) [+追加] │
│ ─────────────────────────────────────────────────────── │
│ 耕地-分筆 漢字地名 住所 面積(m2) 操作│
│ ─────────────────────────────────────────────────────── │
│ 2-1 四万十町 笹ヶ谷 374-1 笹ヶ谷... 400 [×]│
│ 2-2 四万十町 笹ヶ谷 374-2 笹ヶ谷... 400 [×]│
│ │
├────────────────────────────────────────────────────────────┤
│ │
│ 📋 中山間情報 (1件 / 計400m2) [+追加] │
│ ─────────────────────────────────────────────────────── │
│ ID 所在地 面積(m2) 支払金額 操作 │
│ ─────────────────────────────────────────────────────── │
│ 50 口神ノ川 壱町切 1694 400 ¥8,000 [×] │
│ │
└────────────────────────────────────────────────────────────┘
```
**[+追加]ボタン押下時 — 紐づけ追加モーダル:**
```
┌────────────────────────────────────────────┐
│ 共済区画を追加 [×] │
├────────────────────────────────────────────┤
│ │
│ 🔍 [検索: 地番・漢字地名で絞り込み____] │
│ │
│ ─────────────────────────────────────── │
│ □ 3-1 四万十町 笹ヶ谷 375 300m2 │
│ □ 4-1 四万十町 笹ヶ谷 376 250m2 │
│ □ 5-1 四万十町 口神ノ川 198 500m2 │
│ ─────────────────────────────────────── │
│ ※ 既に他の圃場に紐づいている区画は │
│ (🔗 圃場名) で表示 │
│ │
│ [選択した区画を追加] │
│ │
└────────────────────────────────────────────┘
```
### レイアウト（スマホ）
```
┌────────────────────────────────────┐
│ ← 一覧に戻る │
├────────────────────────────────────┤
│ │
│ 圃場名 │
│ [口神 北中________________] │
│ 住所 │
│ [口神ノ川１９８（笹ヶ谷374-1)__] │
│ 面積（反） 面積（m2） │
│ [0.4___] [400___] │
│ 所有者 グループ名 │
│ [吉田___] [口神___] │
│ │
│ [保存] │
│ │
├────────────────────────────────────┤
│ 📋 共済情報 (2件/計800m2) [+追加] │
│ ┌──────────────────────────────┐│
│ │ 2-1 四万十町笹ヶ谷374-1 ││
│ │ 400m2 [×] ││
│ └──────────────────────────────┘│
│ ┌──────────────────────────────┐│
│ │ 2-2 四万十町笹ヶ谷374-2 ││
│ │ 400m2 [×] ││
│ └──────────────────────────────┘│
│ │
├────────────────────────────────────┤
│ 📋 中山間情報 (1件/計400m2)[+追加]│
│ ┌──────────────────────────────┐│
│ │ ID50 口神ノ川壱町切1694 ││
│ │ 400m2 ¥8,000 [×] ││
│ └──────────────────────────────┘│
│ │
└────────────────────────────────────┘
```
### 機能要件
- [x] 圃場の基本情報を編集フォームで表示
- [x] 編集可能フィールド: 圃場名、住所、面積(反)、面積(m2)、所有者、グループ名
- [x] [保存]ボタン → PATCH API で更新
- [x] [← 一覧に戻る] → `/fields` へ遷移
- [x] エラーメッセージ表示
- [x] 共済情報の読み取り専用テーブル表示（A-8 完了）
- [x] 中山間情報の読み取り専用テーブル表示（A-8 完了）
- [ ] **紐づけ管理機能（E-2: 対応付け可視化・編集）** — **未実装**
- [ ] 共済/中山間セクションに [+追加] ボタン
- [ ] 追加モーダル: 未紐づけの区画一覧から選択して追加
- [ ] 検索フィルタ（地番、漢字地名、IDで絞り込み）
- [ ] 既に他の圃場に紐づいている区画は紐づけ先を表示（M:N のため追加は可能）
- [ ] 各行に [×] ボタンで紐づけ解除（区画自体は削除しない）
- [ ] 確認ダイアログ: 「この紐づけを解除しますか？」
- [ ] **面積参考表示（E-2）** — **未実装**
- [ ] セクション見出しに紐づけ区画の合計面積を小さく併記（例: 「共済情報 (2件 / 計800m2)」）
- [ ] ※ M:N関係の特性上、圃場面積と一致しないのが通常。警告アイコンやハイライトは表示しない
- [ ] 面積はあくまで参考情報として、件数と合計面積を淡いグレー文字で表示するのみ
- [ ] 将来的に栽培履歴も表示（Phase 2）
### 必要なAPI（E-2 用）
| メソッド | エンドポイント | 説明 |
|---------|---------------|------|
| GET | `/api/kyosai-fields/` | 共済マスタ全件取得（紐づけ追加モーダル用） |
| GET | `/api/chusankan-fields/` | 中山間マスタ全件取得（紐づけ追加モーダル用） |
| POST | `/api/fields/{id}/kyosai-links/` | 共済紐づけ追加 `{ kyosai_field_ids: [1,2,3] }` |
| DELETE | `/api/fields/{id}/kyosai-links/{kyosai_id}/` | 共済紐づけ解除 |
| POST | `/api/fields/{id}/chusankan-links/` | 中山間紐づけ追加 `{ chusankan_field_ids: [1,2,3] }` |
| DELETE | `/api/fields/{id}/chusankan-links/{chusankan_id}/` | 中山間紐づけ解除 |
### デザインノート
- [+追加] ボタンはセクション見出しの右端に配置
- [×] ボタンは各行の右端、テキストリンクスタイル（赤系）
- **面積表示は控えめに**: 件数と合計面積をセクション見出しにグレー小文字で表示するのみ。M:N関係の特性上、圃場面積と合計面積は基本的に一致しないため、警告アイコンやハイライト色は一切使わない
- モーダルの区画一覧はチェックボックス選択式（複数同時追加可能）
---
## 画面6: 圃場新規作成
### 目的
手動で圃場を1件ずつ新規登録（インポート以外の方法）
### レイアウト
```
┌────────────────────────────────────┐
│ ← 一覧に戻る │
├────────────────────────────────────┤
│ │
│ 圃場名 │
│ [____________________________] │
│ │
│ 住所 │
│ [____________________________] │
│ │
│ 面積（反） │
│ [________] │
│ │
│ 面積（m2） │
│ [________] │
│ │
│ 所有者 │
│ [____________________________] │
│ │
│ [作成] │
│ │
└────────────────────────────────────┘
```
### 機能要件
- [x] 各フィールドを入力して圃場を新規作成
- [x] [作成]ボタン → POST API で作成
- [x] 作成成功 → 圃場一覧へ遷移
- [x] バリデーションエラー → エラーメッセージ表示
### 補足
- インポート（ODS/Excel）との使い分け: 大量登録はインポート、1件追加は手動作成
- グループ名は新規作成時には設定不可（作成後に圃場一覧から設定）
---
## 画面7: 申請書ダウンロード
### 目的
水稲共済細目書・中山間交付金のPDFをダウンロード
### レイアウト（PC）
```
┌────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] ... │
├────────────────────────────────────────────────────┤
│ │
│ 年度: [2025年度 ▼] │
│ │
│ ┌────────────────────────────────────────────────┐│
│ │ 📄 水稲共済細目書 ││
│ │ ││
│ │ 区画数: 31区画 ││
│ │ ││
│ │ ⚠️ 未割当の圃場: 4筆 ││
│ │ → 作付け計画を完成させてください ││
│ │ ││
│ │ [プレビュー] [PDFダウンロード] ││
│ └────────────────────────────────────────────────┘│
│ │
│ ┌────────────────────────────────────────────────┐│
│ │ 📄 中山間地域等直接支払交付金 ││
│ │ ││
│ │ 区画数: 71区画 ││
│ │ ││
│ │ ✅ 全て割当済み ││
│ │ ││
│ │ [プレビュー] [PDFダウンロード] ││
│ └────────────────────────────────────────────────┘│
│ │
└────────────────────────────────────────────────────┘
```
### 機能要件
- [x] 年度を選択
- [x] 各申請書について:
- [x] [PDFダウンロード]ボタン → ファイルダウンロード
- [ ] 区画数の表示 — **未実装**
- [ ] 未割当の警告表示 — **未実装**
- [ ] [プレビュー]ボタン → 新しいタブでPDF表示 — **未実装（A-5）**
- [ ] ダウンロードされるPDFのファイル名:
- 水稲共済: `水稲共済細目書_2025年度.pdf`
- 中山間: `中山間交付金_2025年度.pdf`
- [ ] PDFはA4サイズ、印刷してそのまま提出可能
---
## 画面7-A: PDF帳票フォーマット仕様
### 7-A-1: 水稲共済細目書 PDF
**基本仕様:**
- 用紙: A4 縦
- 表形式（1行1区画、全31行）
- ヘッダー: 「水稲共済細目書（YYYY年度）」
- ページ番号あり
- 印刷してそのまま提出可能
**列定義:**
| # | 列名 | データ元 | 備考 |
|---|------|---------|------|
| 1 | 漢字地名 | OfficialKyosaiField.kanji_name | 例: 四万十町 笹ヶ谷 374-1 |
| 2 | 耕地-分筆 | k_num + "-" + s_num | 例: 2-1 |
| 3 | 本地面積 (m2) | OfficialKyosaiField.area | 内部 m2 で保存 |
| 4 | 作付品目 | Plan.crop.name | 作付け計画から取得 |
| 5 | 品種 | Plan.variety.name | 〃（nullの場合は空欄） |
| 6 | 圃場名称 | Field.name | 吉田農地台帳の名称 |
**複数圃場紐づき時の扱い:**
- 1つの共済区画に複数の実圃場（Field）が紐づく場合 → 作物・品種・圃場名をカンマ区切りで列挙
- 例: 「米, 野菜」「にこまる, トマト」「口神北東, 口神北中」
**未設定時の扱い:**
- 作付け未設定の場合 → 作付品目列に「未設定」と表示
---
### 7-A-2: 中山間地域等直接支払交付金 PDF
**基本仕様:**
- 用紙: A4 横（列が多いため）
- 表形式（1行1区画、全71行）
- ヘッダー: 「中山間地域等直接支払交付金（YYYY年度）」
- ページ番号あり
- 印刷してそのまま提出可能
**列定義:**
| # | 列名 | データ元 | 備考 |
|---|------|---------|------|
| 1 | 所在地 | 大字+字+地番+枝番 連結 | 例: 口神ノ川 壱町切 1694 |
| 2 | 植栽面積 | OfficialChusankanField.planting_area | m2 |
| 3 | 作付け品目(元) | OfficialChusankanField.original_crop | ODS「作付け品目」列（役場記入の値） |
| 4 | 協定管理者 | OfficialChusankanField.manager | |
| 5 | 所有者 | OfficialChusankanField.owner | |
| 6 | 作物 | Plan.crop.name | 作付け計画から取得 |
| 7 | 品種 | Plan.variety.name | 〃（nullの場合は空欄） |
| 8 | 圃場名称 | Field.name | 吉田農地台帳の名称 |
**複数圃場紐づき時の扱い:**
- 共済と同様、カンマ区切りで列挙
---
## 画面8: データ取込
### 目的
圃場マスタや申請マスタのインポート
### レイアウト（PC）
```
┌────────────────────────────────────────────────────┐
│ 🌾 KeinaSystem [作付け計画] [圃場管理] ... │
├────────────────────────────────────────────────────┤
│ │
│ 📥 データインポート │
│ │
│ ┌────────────────────────────────────────────────┐│
│ │ 吉田農地台帳（圃場マスタ） ││
│ │ ││
│ │ ファイルを選択: [ファイルを選択] 📎 ││
│ │ ││
│ │ ⚠️ 既存データは上書きされます ││
│ │ ││
│ │ [インポート実行] ││
│ └────────────────────────────────────────────────┘│
│ │
│ ┌────────────────────────────────────────────────┐│
│ │ 共済マスタ ││
│ │ ││
│ │ ファイルを選択: [ファイルを選択] 📎 ││
│ │ [インポート実行] ││
│ └────────────────────────────────────────────────┘│
│ │
│ ┌────────────────────────────────────────────────┐│
│ │ 中山間マスタ ││
│ │ ││
│ │ ファイルを選択: [ファイルを選択] 📎 ││
│ │ [インポート実行] ││
│ └────────────────────────────────────────────────┘│
│ │
│ 📤 データエクスポート │
│ • [全圃場データ (CSV)] ※バックアップ用 │
│ • [作付け計画 (CSV)] ※バックアップ用 │
│ │
└────────────────────────────────────────────────────┘
```
### 機能要件
- [x] 3種類のマスタを縦並びで表示（タブではなく各セクション形式）
- [x] ファイルアップロード（ODS/Excel対応）
- [x] インポート実行（結果メッセージ表示）
- [ ] プレビュー機能（インポート前に確認）— **未実装**
- [ ] エクスポート機能（CSV）— **未実装（A-6）**
---
## 🎨 UI共通仕様
### カラーパレット
```
プライマリカラー（緑系）:
#2E7D32 濃い緑（ヘッダー、ボタン）
#4CAF50 緑（アクセント、アクティブなナビ項目）
#81C784 淡い緑（ホバー）
セカンダリカラー（土系）:
#8D6E63 茶色（サブヘッダー）
#BCAAA4 淡い茶（背景）
警告・状態色:
#F44336 赤（エラー、未設定）
#FF9800 オレンジ（警告）
#4CAF50 緑（成功）
#2196F3 青（情報）
グレースケール:
#212121 ダークグレー（テキスト）
#757575 グレー（サブテキスト）
#E0E0E0 ライトグレー（ボーダー）
#FAFAFA ホワイト（背景）
```
### タイポグラフィ
```
フォント:
- システムフォント優先
- 日本語: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif
- 英数字: Inter, "Roboto", "Helvetica", sans-serif
サイズ:
- 見出し(h1): 28px / 太字
- 見出し(h2): 22px / 太字
- 本文: 16px / 通常
- 小文字: 14px / 通常
行間:
- 本文: 1.6
- 見出し: 1.3
```
### スペーシング
```
余白の基本単位: 8px
8px: 最小余白
16px: 標準余白（要素間）
24px: セクション間
32px: 画面の上下余白
```
### レスポンシブブレークポイント
```
スマートフォン: 〜767px
タブレット: 768px〜1023px
PC: 1024px〜
```
---
## 🖱️ インタラクション
### ボタン
- **プライマリボタン**: 緑背景、白文字、影付き
- **セカンダリボタン**: 白背景、緑文字、ボーダー付き
- **ホバー**: 10%明るく、カーソルpointer
- **押下**: 5%暗く、影を小さく
### インライン編集（作付け計画）
- **ドロップダウン**: 選択変更と同時にバックグラウンド保存
- **テキスト入力**: blur（フォーカスアウト）時に保存
- **保存中**: ローディングスピナーは表示しない（スクロールリセット防止のため）
- **エラー時**: トースト通知でエラー表示
### トースト通知
- **位置**: 画面右上
- **表示時間**: 3秒（自動消去）
- **種類**: 成功（緑）、エラー（赤）、警告（オレンジ）、情報（青）
---
## 📱 スマホ特有の配慮
### タップ領域
- **最小サイズ**: 44px × 44px
- **余白**: ボタン間は最低8px
### スクロール
- **慣性スクロール**: `-webkit-overflow-scrolling: touch`
- **無限スクロール**: 不要（全39筆なので一覧でOK）
### 入力
- **キーボードタイプ**: 適切に指定（email, number, textなど）
- **オートコンプリート**: 有効化
### ナビゲーション
- **Navbar**: PC版と同じ項目をレスポンシブに配置
- **戻るボタン**: 画面左上に配置（詳細画面など）
Reference in New Issue View Git Blame Copy Permalink