操作
機能 #188
未完了task2.call2arm.com ニュース機能 - React実装要望
開始日:
2025-06-04
期日:
進捗率:
0%
予定工数:
説明
要望概要¶
対象URL: https://task2.call2arm.com/redmine-ui/news
現在の状況: 未実装（404またはページが存在しない）
要望内容: Redmine連携ニュース表示機能をReactで実装
実装要件¶
1. 基本機能¶
-
Redmine APIからのニュース取得
- エンドポイント:
/api/news.json - ページネーション対応
- 件数制限設定（デフォルト: 20件）
- エンドポイント:
2. 表示内容¶
-
ニュース一覧表示
- タイトル
- 作成日時
- 作成者
- プロジェクト名
- 概要（description）
- 添付ファイル情報（あれば）
3. UI/UX要件¶
-
レスポンシブデザイン
- TailwindCSS + LINEデザイン言語準拠
- 既存ページとの統一性確保
-
ナビゲーション
- 横渡しリンク設置（チケット#187と同様）
- breadcrumb navigation
-
フィルタリング機能
- プロジェクト別フィルタ
- 日付範囲フィルタ
- 作成者フィルタ
4. 技術仕様¶
- フレームワーク: React
- 状態管理: useState/useEffect
- API通信: axios
- スタイリング: TailwindCSS
- ルーティング: React Router
5. API仕様¶
// 基本的なニュース取得
GET /api/news.json
Query Parameters:
- limit: 取得件数（デフォルト: 20）
- offset: オフセット（ページネーション用）
- project_id: プロジェクトID（フィルタ用）
// 期待されるレスポンス構造
{
"news": [
{
"id": 1,
"title": "ニュースタイトル",
"summary": "要約",
"description": "詳細内容",
"created_on": "2025-06-04T18:00:00Z",
"project": {
"id": 1,
"name": "プロジェクト名"
},
"author": {
"id": 1,
"name": "作成者名"
}
}
],
"total_count": 50,
"offset": 0,
"limit": 20
}
6. ページ構成案¶
// コンポーネント構造
<div className="container mx-auto px-4 py-6">
{/* ヘッダー・ナビゲーション */}
<NavigationBar />
{/* フィルタ・検索 */}
<FilterSection />
{/* ニュース一覧 */}
<NewsListSection />
{/* ページネーション */}
<PaginationSection />
</div>
7. 既存システムとの連携¶
- 認証: X-Redmine-API-Key ヘッダー使用
- CORS: 既存設定活用
- プロキシ: task2-call2arm nginx設定活用
8. 参考実装¶
- task.call2arm.com: 既存Vue.jsニュース機能
- 統一感: 他のredmine-ui ページとの整合性
期待効果¶
- Redmine情報の一元管理
- プロジェクト進捗の可視化
- チーム内情報共有の効率化
- 統一されたUI/UX体験
技術的考慮事項¶
- エラーハンドリング（API障害時）
- ローディング状態の表示
- SEO対応（meta tags）
- アクセシビリティ対応
優先度¶
- 緊急度: 中（機能拡充）
- 重要度: 中（情報管理効率化）
操作