親チケット #146 の子チケットとして設定します。

【仕様検討】Redmineカンバンビュー拡張機能¶

1. 現状分析¶

1.1 システム構成¶

• Redmine API (call2arm.com): 標準的なRedmine APIを提供
• カスタムUI (task2.call2arm.com): Reactベースのカスタムインターフェース
• 現在の機能: チケット一覧表示（テーブル形式）が実装済み
• 未実装機能: カンバンビュー（ボード形式）

1.2 利用可能なAPI¶

• /issues.json: チケット一覧取得
• /issue_statuses.json: ステータス情報取得
• /projects.json: プロジェクト情報取得
• その他標準的なRedmine REST API

1.3 UI技術スタック¶

• フロントエンド: React
• 主要コンポーネント: チケット一覧表示コンポーネント

2. 要件詳細¶

2.1 チケットパネル詳細ボタン¶

• 要件: チケットカード上に「詳細」ボタンを配置し、クリックでチケット詳細画面に遷移する
• 技術的アプローチ:
  • カンバンカードコンポーネントの拡張
  • 詳細ボタンコンポーネント実装
  • リンク先: /redmine-ui/tickets/{id}
• UIデザイン:
  • 位置: カード右下
  • スタイル: 小さなボタン、テキスト「詳細」
  • ホバー効果: 背景色変更

2.2 担当者別カンバンビュー¶

• 要件: 列がステータス、行が担当者となるカンバンボード
• 技術的アプローチ:
  • 新規ビューコンポーネント作成
  • React Grid/Table ライブラリ活用（例: react-table, MUI Grid）
  • データ構造: ステータス×担当者のマトリックス
• データフロー:
  • RedmineAPIからチケット情報取得
  • 担当者とステータスでチケットをグループ化
  • マトリックス形式で表示
• UIデザイン:
  • 行ヘッダー: 担当者名+アバター
  • 列ヘッダー: ステータス名
  • セル内: 該当するチケットカード

2.3 日次/週次/月次フィルター¶

• 要件: カンバンボード上部に日次/週次/月次の選択UIを配置
• 技術的アプローチ:
  • フィルターコンポーネント実装
  • 日付計算ロジック実装
  • クエリパラメータ対応
• 日付計算:
  • 日次: 当日のみ (new Date())
  • 週次: 当週 (startOfWeek() ~ endOfWeek())
  • 月次: 当月 (startOfMonth() ~ endOfMonth())
• UIデザイン:
  • ラジオボタンまたはタブ形式
  • カスタム日付範囲オプション
  • 日付選択用カレンダーピッカー

2.4 日付条件¶

• 要件: 開始日と終了日の間にチケットが存在したら表示
• 技術的アプローチ:
  • フィルターロジック実装
  • RedmineAPIクエリパラメータ利用
  • 日付範囲内チケット取得
• フィルター条件:
  • チケット開始日 <= フィルター終了日 AND
  • チケット終了日 >= フィルター開始日

3. 技術的実装方針¶

3.1 フロントエンドアーキテクチャ¶

• React Functional Components + Hooks
• Redux/Context APIでのステート管理
• Material-UI/Tailwindなどのデザインシステム利用

3.2 APIインテグレーション¶

• Redmine REST API対応
• APIクライアント層の実装
• キャッシング戦略

3.3 ドラッグ&ドロップ機能¶

• react-beautiful-dnd または @hello-pangea/dnd ライブラリ利用
• チケットステータス変更時のAPI呼び出し
• オプティミスティックUI更新

3.4 レスポンシブデザイン¶

• モバイル対応（横スクロール）
• タブレット・デスクトップ最適化
• アクセシビリティ対応

4. 画面モックアップ案¶

4.1 チケットパネル詳細ボタン¶

+------------------------------+
| #123 チケットタイトル        |
| 担当: 山田太郎               |
| 期限: 2025-06-15             |
|                              |
|                      [詳細]  |
+------------------------------+

4.2 担当者別カンバンビュー¶

+----------------+----------+----------+----------+----------+
|                | 新規     | 進行中   | 解決     | 終了     |
+----------------+----------+----------+----------+----------+
| 山田太郎       | [チケット] [チケット] [チケット] [チケット] |
|                | [チケット] [チケット]            |          |
+----------------+----------+----------+----------+----------+
| 佐藤次郎       | [チケット]            | [チケット] [チケット] |
|                |          |          | [チケット] |          |
+----------------+----------+----------+----------+----------+
| 未割当         | [チケット] [チケット] |          |          |
|                | [チケット] |          |          |          |
+----------------+----------+----------+----------+----------+

4.3 日次/週次/月次フィルター¶

+----------------------------------+
| [日次] [週次] [月次] [カスタム ▼] |
|                                  |
| 開始日: [2025-06-01] 終了日: [2025-06-30] |
+----------------------------------+

5. 技術的課題と対応策¶

5.1 パフォーマンス対応¶

• 課題: 大量チケット表示時のパフォーマンス低下
• 対策:
  • 仮想スクロール実装（react-window）
  • ページネーション対応
  • データの部分読み込み

5.2 リアルタイム更新¶

• 課題: 複数ユーザーによる同時編集時の整合性
• 対策:
  • 定期的ポーリング
  • WebSocket実装（可能であれば）
  • 楽観的更新と競合解決

5.3 モバイル対応¶

• 課題: 小画面でのカンバンボード表示
• 対策:
  • レスポンシブデザイン
  • モバイル特化ビュー
  • タッチ操作最適化

6. 実装優先順位¶

1. 基本カンバンビュー実装
2. チケットパネル詳細ボタン追加
3. 担当者別カンバンビュー実装
4. 日次/週次/月次フィルター実装
5. ドラッグ&ドロップ機能実装
6. UIデザイン最適化
7. パフォーマンス改善

7. 検証方法¶

1. チケットパネル詳細ボタン

   • クリックでチケット詳細画面に正しく遷移するか
   • 適切なスタイルで表示されるか

2. 担当者別カンバンビュー

   • 全担当者が正しく表示されるか
   • チケットが正しいセルに表示されるか
   • 未割当チケットの表示確認

3. 日次/週次/月次フィルター

   • 各期間でチケットが正しくフィルタされるか
   • カスタム日付範囲が機能するか
   • 期間切り替えがスムーズに動作するか

8. 結論と次のステップ¶

この仕様検討に基づき、設計フェーズに進みます。