Skip to content

DESIGN.md

Latest commit

 

History

History
112 lines (95 loc) · 3.27 KB

DESIGN.md

File metadata and controls

112 lines (95 loc) · 3.27 KB
Raw

画像管理Webアプリ設計書

1. 概要

サーバ上の特定ディレクトリにある画像ファイルをWebブラウザで一覧表示し、ユーザー操作で画像を別ディレクトリに移動できるWebアプリケーション。

2. 技術スタック

  • サーバサイド: Python（FastAPI）
  • クライアントサイド: TypeScript, Vue.js, HTML, CSS
  • サーバOS: Windows

3. ディレクトリ構成（例）

project/
├── backend/
│   ├── app.py
│   ├── config.py
│   ├── static/
│   └── ...
├── frontend/
│   ├── src/
│   ├── public/
│   └── ...
├── image_source/      # 画像の元ディレクトリ（固定）
└── image_destination/ # 画像の移動先ディレクトリ（固定）

4. 機能要件

4.1 画像一覧表示

  • サーバ上のimage_sourceディレクトリ内の画像ファイル一覧をページングで取得し、クライアントに返すAPIを用意する。
  • クライアントはAPIから画像リストを取得し、サムネイルとして一覧表示する。
  • クライアント側はオートページャ（スクロールや「もっと見る」等で自動的に次ページを取得）機能を持つ。

4.2 画像コピー

  • クライアントで画像ごとに「コピー」ボタンを表示。
  • ボタン押下時、対象画像をimage_sourceからimage_destinationへサーバ側でコピーするAPIを呼び出す。
  • コピー済みの場合はサーバ側で判定し、クライアントにその旨を返す。
  • コピー後、一覧を再取得して画面を更新する。

5. 非機能要件

  • 画像ファイルはjpg/png/gif/webpフォーマットに対応。
  • サーバ・クライアント間の通信はREST API（JSON）を利用。
  • サーバ側の画像ディレクトリパスは設定ファイルで管理。
  • セキュリティ（認証・認可）は現時点では考慮しない。

6. API設計

6.1 画像一覧取得（ページング対応）

  • GET /api/images
  • クエリパラメータ:
    • offset: 取得開始位置（例: 0, 20, 40, ...）
    • limit: 取得件数（例: 20）

リクエスト例

GET /api/images?offset=0&limit=20

レスポンス例

{
  "total": 100,
  "images": [
    {
      "filename": "sample1.jpg",
      "url": "/images/sample1.jpg"
    },
    {
      "filename": "sample2.png",
      "url": "/images/sample2.png"
    }
    // ...最大20件
  ]
}
  • total: 画像の総数
  • images: 取得した画像情報リスト

6.2 画像コピー

  • POST /api/images/copy

リクエストボディ例

{
  "filename": "sample1.jpg"
}

レスポンス例（コピー成功）

{
  "success": true,
  "message": "画像をコピーしました",
  "alreadyCopied": false
}

レスポンス例（すでにコピー済み）

{
  "success": false,
  "message": "すでにコピー済みです",
  "alreadyCopied": true
}

7. 画面設計（概要）

  • 画像一覧画面
    • 画像サムネイルをグリッド表示
    • 各画像に「コピー」ボタン
    • オートページャ機能でスクロールや「もっと見る」操作時に追加画像を自動取得・表示