816 lines
44 KiB
Markdown
816 lines
44 KiB
Markdown
# 画面設計書
|
||
|
||
> **最終更新**: 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版と同じ項目をレスポンシブに配置
|
||
- **戻るボタン**: 画面左上に配置（詳細画面など）
|