Redmineの設定

作業内容¶

既存の task2.call2arm.com UI に AI アドバイザー機能を統合し、全体的な UI/UX を最適化します。

詳細タスク¶

1. メインアプリケーションへの統合

   • /ui/src/App.jsx - メインアプリケーション更新
   • /ui/src/routes.js - ルーティング更新
   • /ui/src/layouts/DashboardLayout.jsx - レイアウト調整
   • 全体的なナビゲーション構造の見直し

2. AIアドバイザーページの実装

   • /ui/src/pages/AIAdvisor.jsx - メインページ
   • サイドバーナビゲーション連携
   • レスポンシブデザイン対応
   • キーボードショートカット対応

3. フローティングチャットウィジェットの実装

   • /ui/src/components/AIAdvisor/ChatWidget.jsx - ウィジェット
   • アプリケーション全体でのアクセス
   • 最小化/展開機能
   • コンテキスト維持機能

4. コンテキストアウェア機能の実装

   • 現在表示中のページ/チケットに基づく提案
   • Redmine チケット表示との連携
   • 関連ドキュメント推薦

5. UI/UX 最適化

   • テーマ統一
   • アニメーション・トランジション
   • ローディング状態の改善
   • エラー表示の統一

技術的指示¶

• 既存のコンポーネント構造とスタイルガイドラインを尊重
• パフォーマンスを考慮した遅延ロード（React.lazy, Suspense）
• モバイルファーストのレスポンシブデザイン
• アクセシビリティ対応（ARIA属性、キーボードナビゲーション）
• コンポーネント間の状態共有には Context API または状態管理ライブラリを使用
• 一貫したエラー処理とユーザーフィードバック

成果物¶

• 更新されたメインアプリケーション
• AIアドバイザーページ
• フローティングチャットウィジェット
• コンテキストアウェア機能
• 最適化された UI/UX
• テスト結果とパフォーマンス測定

参考リソース¶

• React アプリケーション統合パターン
• LINE デザイン言語ガイドライン
• アクセシビリティベストプラクティス (WCAG 2.1)
• React パフォーマンス最適化テクニック