Redmineの設定

🎯 目的¶

search.call2arm.com の React Frontend と Node.js API の完全統合により、モダンなClaude会話管理WebUIを実現

📋 前提条件¶

• ✅ チケット407-408: Node.js API + projects.json完了
• ✅ チケット409: conversations.json インポート完了
• ✅ React Frontend基盤構築済み

🔧 実装内容¶

Phase 4B.1: React Frontend完成¶

コンポーネント統合¶

• 検索ページ: /react-app/src/pages/SearchPage.tsx
  • プロジェクト別フィルタリング
  • 全文検索機能 (会話・アーティファクト対応)
  • 検索結果のページネーション
  • アーティファクト種別フィルタ (text/code/artifact/image)

統計ダッシュボード¶

• 統計ページ: /react-app/src/pages/StatsPage.tsx
  • プロジェクト別会話統計
  • 月別活動グラフ
  • アーティファクト種別分析
  • ユーザー活動サマリー

設定管理¶

• 設定ページ: /react-app/src/pages/SettingsPage.tsx
  • Claude API Key管理
  • エクスポート設定
  • 検索設定 (結果件数、ソート順)
  • テーマ・UI設定

Phase 4B.2: API統合強化¶

検索API実装¶

• GET /api/v2/search: 統合検索エンドポイント
  • クエリパラメータ: q, project_id, type, limit, offset
  • フルテキスト検索: PostgreSQL FTS活用
  • 関連度ランキング: tf-idf スコアリング

会話管理API¶

• GET /api/v2/conversations: 会話一覧・フィルタリング
• GET /api/v2/conversations/{id}: 会話詳細取得
• PUT /api/v2/conversations/{id}/project: プロジェクト紐づけ変更
• DELETE /api/v2/conversations/{id}: 会話削除

エクスポートAPI¶

• GET /api/v2/export/conversations: JSON/Markdown形式エクスポート
• GET /api/v2/export/projects/{uuid}: プロジェクト別エクスポート

Phase 4B.3: 高度機能実装¶

会話分析機能¶

• 会話長分析: メッセージ数・文字数統計
• アーティファクト分析: 生成コード・文書の分類
• トレンド分析: 時系列での利用傾向

インテリジェント機能¶

• 関連会話提案: 類似トピックの会話提案
• プロジェクト推薦: 会話内容からプロジェクト分類提案
• 重複会話検出: 類似会話の自動検出

🌐 UI/UX設計¶

デザインシステム¶

• 技術: TailwindCSS + React
• デザイン言語: LINEデザイン言語 (親しみやすさ重視)
• レスポンシブ: モバイルファースト設計
• アクセシビリティ: WCAG 2.1 AA準拠

ページ構成¶

Layout.tsx (共通レイアウト)
├── SearchPage.tsx (メイン検索)
├── ImportPage.tsx (インポート管理)
├── StatsPage.tsx (統計ダッシュボード)
└── SettingsPage.tsx (設定管理)

🔧 技術要件¶

Frontend技術スタック¶

• React 18: 最新React機能活用
• TypeScript: 型安全性確保
• TailwindCSS: 効率的スタイリング
• Vite: 高速ビルド・HMR

API設計原則¶

• RESTful: 標準REST API設計
• JSON: 統一データ形式
• エラーハンドリング: 詳細エラーレスポンス
• ページネーション: 大量データ対応

📊 パフォーマンス目標¶

• 初期表示: < 2秒
• 検索応答: < 3秒
• 大量データ: 1万件の会話まで対応
• メモリ使用量: < 200MB (ブラウザ)

🎯 成功指標¶

• React Frontend完全稼働
• 全APIエンドポイント動作確認
• 検索機能の精度・速度確認
• プロジェクト↔会話紐づけ機能確認
• エクスポート機能動作確認
• レスポンシブデザイン確認

🔗 関連チケット¶

• #407-408 (完了): API基盤・データインポート
• #409 (作成): conversations.json大容量インポート
• 未来のチケット: リモートMCP化対応