画像管理・選択ツール開発事例
プロジェクト概要
大量の画像フォルダから特定の条件を満たすフォルダを効率的に巡回し、画像の確認と設定ファイルのコピーを行うデスクトップアプリケーションを開発しました。
背景・課題
- 数百のフォルダに散らばった画像ファイルを手動で確認する作業が非効率
- 特定の設定ファイル（JSON形式）が含まれるフォルダのみを対象とした処理が必要
- 画像の内容確認後、設定ファイルを別の場所にコピーする作業の自動化が求められた
技術スタック
フロントエンド
- HTML5/CSS3: レスポンシブなユーザーインターフェース
- JavaScript (ES6): 非同期処理とDOM操作
- Flexboxレイアウト: 2カラム構成の実装
バックエンド
- Python 3.10: メインロジック
- PyWebView: デスクトップアプリケーション化
- Pathlib: ファイルパス操作
- Base64エンコーディング: 画像データの転送
その他
- OS標準機能: ファイル操作、タイムスタンプ取得
主要機能
1. 自動フォルダスキャン
- 指定ディレクトリ内の全サブフォルダを作成日時順で自動検索
- 特定ファイル（設定ファイル）の存在チェック
- 条件に合わないフォルダの自動スキップ
2. 画像ビューワー機能
- フォルダ移動時の自動画像表示
- 同一フォルダ内での画像切り替え
- Base64エンコーディングによるリアルタイム画像表示
- 画像情報の表示（ファイル名、現在位置/総数）
3. ナビゲーション機能
- 前後フォルダへの移動
- 進行状況の可視化
- ボタン状態の動的制御（最初/最後での無効化）
4. ファイル操作機能
- 設定ファイルの自動コピー
- コピー先ディレクトリの自動作成
- 処理結果のフィードバック
技術的特徴
アーキテクチャ
┌─────────────────┐ ┌──────────────────┐
│ フロントエンド │ │ バックエンド │
│ (HTML/CSS/JS) │◄──►│ (Python API) │
└─────────────────┘ └──────────────────┘
│
▼
┌──────────────────┐
│ ファイルシステム │
└──────────────────┘
データフロー
- 初期化: フォルダ構造をスキャンし、処理対象を特定
- 画像処理: PNG画像をBase64エンコードしてフロントエンドに送信
- ユーザー操作: JavaScript経由でPython APIを呼び出し
- ファイル操作: 設定ファイルのコピー処理を実行
UI/UX設計
レイアウト構成
- 左パネル: フォルダ情報、進行状況表示
- 右パネル: 画像表示エリア
- 操作パネル: 4つの主要ボタン配置
ユーザビリティ
- ワンクリックでの画像切り替え
- 視覚的なフィードバック（成功/エラーメッセージ）
- キーボードフレンドリーな操作性
開発過程での技術的課題と解決策
1. PyWebViewのAPI連携問題
課題: JavaScript側でPython関数が認識されない
解決: js_apiパラメータを使用した正しい実装方法の採用
2. 大量ファイルの効率的処理
課題: 数百フォルダのスキャン処理の最適化
解決: ジェネレータパターンと条件分岐による早期リターン
3. 画像データの転送
課題: バイナリ画像データのWeb表示
解決: Base64エンコーディングによるデータURL形式での転送
パフォーマンス最適化
- 遅延読み込み: 画像は表示時にのみ読み込み
- メモリ管理: 不要なデータの適切な破棄
- エラーハンドリング: 異常ファイルでの処理継続
学習・成長ポイント
技術習得
- デスクトップアプリケーション開発の実践経験
- フロントエンド・バックエンド間のデータ連携手法
- ファイルシステム操作の効率的な実装
問題解決能力
- API連携における技術的障壁の克服
- ユーザビリティを考慮した設計の実装
- 段階的な機能追加による開発手法
成果・効果
- 作業効率: 手動作業時間を約80%削減
- 操作性: 直感的なUIによる学習コスト削減
- 拡張性: モジュール化により新機能追加が容易
今後の拡張可能性
- 複数ファイル形式への対応（JPEG、GIF等）
- バッチ処理機能の追加
- ログ機能の実装
- 設定画面の追加
このプロジェクトでは、デスクトップアプリケーション開発において、フロントエンド技術とPythonを組み合わせた実用的なツール開発を実現しました。特に、ユーザビリティと処理効率の両立に重点を置いた設計・実装を行いました。