コンテンツにスキップ

Frontend UI Implementation Plan

[!NOTE] 最新の実装状況は 機能実装ステータス (Remaining Functionality) を参照してください。

本計画はファイル管理関連のDashフロントエンドにおいて、 詳細画面設計とユーザビリティ改善を踏まえた実装ステップを示すものです。 既存の MVP コンポーネントを拡張し、使いやすいドキュメント管理インターフェースを 構築します。

1. 目標と範囲

  • アップロード、バージョン管理、差分比較、バッチ処理の各機能を 統合したダッシュボードを構築する。
  • ユーザーが直感的にファイルを操作できるようにUXを向上させる。
  • バックエンド API（VersionManager, rollback_version, 解析パイプライン） と疎結合に設計する。

対象ページ / コンポーネント: 1. ファイル送信 & プレビュー 2. バージョン履歴リストと操作パネル 3. バージョン比較ビューワー 4. 批処理キュー・モニタリング 5. 全体レイアウト・ナビゲーション

対応ブラウザ: 最新 Chrome/Firefox/Safari

2. 画面設計案

2.1 ダッシュボード構造

┌───────────────────────────────────────────┐
│ ナビバー (Upload | History | Compare | Batch) │
└───────────────────────────────────────────┘
│                                           │
│ [選択されたタブのパネル表示領域]          │
│                                           │
└───────────────────────────────────────────┘

ナビバーはDash dbc.Navbar で実装し、タブ切り替えはコールバックで行う。

2.2 ファイルアップロード画面

  • ドラッグ&ドロップ領域にアイコンとステータスを表示
  • 選択済みファイルの一覧（ファイル名、サイズ、進行状況バー）
  • 各ファイルに対するキャンセル／削除ボタン
  • アップロード成功後に "解析を開始" ボタンを有効化
  • サイズ・形式エラーはモーダル or インライン警告で表示
  • プレビュー: テキストやPDFの最初の数行を即時表示 （pdfjs や <pre> を使用）

2.3 バージョン履歴画面

  • DataTable に加え、各行に「ダウンロード」「比較」「ロールバック」 のアクションボタンを追加
  • テーブルのフィルタ/検索機能を有効化
  • 選択したエントリを詳細パネル（サイドバーモーダル）で表示 → メタデータ（サイズ、作成日時、ページ数など）

2.4 バージョン比較画面

  • 左右ペインにそれぞれバージョンを選択するドロップダウン
  • frontend/version_compare.diff_text から得た diff を Syntax highlighting 付きで表示
  • 変更箇所へのジャンプ機能（Next/Prev diff）
  • スペース、タブ等の表示オプション

2.5 バッチ処理画面

  • キューに入っているジョブの一覧（ファイル名・ステータス）
  • ステータスごとの色分け（queued/running/failed/done）
  • 全体進捗バー・個別進行状況バー
  • ジョブの追加フォーム（ファイル選択 or テキスト入力）
  • 停止・再試行ボタン
  • イベントログ表示（スクロール可能）

2.6 共通要素

  • グローバル通知コンポーネント（ dbc.Toast を使用）
  • ロード中インジケータ、遅延読み込み
  • モバイル対応レイアウト

3. ユーザビリティ & アクセシビリティ

  • キーボード操作対応（タブ移動、エンターでアップロード/アクション）
  • 視覚障害者向けの ARIA ラベルとコントラスト比策定
  • ファイル名やエラーメッセージの国際化対応（必要に応じて）
  • 大容量/多数ファイル時のパフォーマンス監視（仮想リスト）

4. 実装ステップ

  1. デザインフレームワーク導入: Dash Bootstrap Components を 依存に追加（もし未導入なら）
  2. ページテンプレート: frontend/pages/base.py を作成しナビバー/ コンテナを定義
  3. Upload ページ拡張: MVP コンポーネントを置換し、アップロード キュー UI を実装。バックエンド API へ POST コールを追加。
  4. History ページ: テーブルアクション追加と詳細パネル実装。
  5. Compare ページ: ペインと diff ナビゲーションを組み込む。
  6. Batch ページ: キュー管理 UI と API ポーリングを実装。
  7. 共通通知/ログ: トーストとログウィンドウを追加
  8. アクセシビリティ: ARIA 属性およびキーボードショートカット をテストし修正
  9. システムテスト: E2E テストを tools 以下に追加（selenium/ Playwright など）
  10. ドキュメント更新: README/デベロッパーガイドに操作手順を追加

各ステップには 1～2 週間を想定（リソースにより調整）。MVP レベル の完成は全体で 2 ヶ月以内が目標。

5. API & コールバック概要

  • /api/upload POST - ファイルデータ受信 → large_file_handler → parse_document_stream → VersionManager
  • /api/versions GET - 指定パスの履歴を返す
  • /api/versions/<id>/rollback POST - ロールバック実行
  • /api/diff POST - 2 つのバージョン ID を受け取り差分テキストを返す
  • /api/batch GET/POST/DELETE - キュー状態管理

Dash 側はこれらを requests や dash.callback_context で呼び出す。

6. テスト & QA

  • ユニットテスト: 既存コンポーネントのレンダリング確認
  • 統合テスト: API モックを使ったページフロー
  • UI テスト: 自動化 E2E でアップロード→バージョン作成→比較まで
  • パフォーマンステスト: 1000 ファイルのバッチでメモリ/応答時間測定

7. 次のフェーズ

  1. ドラッグ＆ドロップでフォルダ単位アップロード
  2. セキュリティ: CSRF トークン / 認証フロー追加
  3. モバイルアプリや Electron ラッパー対応
  4. AI 支援による自動タグ付け・全文検索統合

上記計画をもとにタスクを分割し、プロジェクト管理ツールへ取り込み ください。