フィルムメタデータアプリ
フィルム写真メタデータ設定・管理ウェブアプリケーション
フィルム写真のEXIFメタデータを効率的に編集・管理できるウェブアプリケーションです。ファイルアップロードからメタデータ設定、ダウンロードまでの3ステップワークフローで、ユーザーが直感的に作業を進められるように設計しました。 TypeScript、Next.js、Tailwind CSSで開発し、写真をサーバーに送信せずブラウザで直接メタデータを編集できるように実装しました。また、Zustandでステップごとの状態管理を行い、React Device Detectによるデバイス検出とストリーミング+バッチダウンロードを実装して、モバイル環境でのメモリ使用量を最小化できるように開発しました。
TypeScriptReactNext.jsTailwindCSSZustandReact Hook FormZodfflatepiexifjsFile System API
詳細内容
3段階ファイル処理ワークフローの進行状態およびデータ維持システム開発
- ファイルアップロードからメタデータ設定、ダウンロードまでの3段階で構成されたワークフローでユーザーデータと進行状態を安定的に管理しました。
- Zustandを状態管理に活用して各段階別のユーザー入力値とファイル情報をグローバルに維持し、ユーザーが段階を移動してもデータ損失なく作業を続けられるように実装しました。
File System Access APIとWeb Streams APIを活用した最適化されたファイルダウンロード実装
- File System Access APIを活用してユーザーが直接保存場所を選択できるファイルダウンロード機能を実装しました。
- File System Access APIをサポートしないブラウザ環境ではWeb Streams APIベースのフォールバックパターンを実装しました。これにより大容量ファイル処理時のメモリ不足問題を防止し、ストリームベースの処理でブラウザパフォーマンス低下なく安定的なファイル処理を実装しました。
piexifjsライブラリを活用したEXIFメタデータ読み書き処理実装
•JavaScript環境でEXIFメタデータを扱うためにpiexifjsライブラリを導入し、フィルム写真のメタデータを読み込み・編集できる機能を実装しました。カメラモデル、撮影日、ISO、絞り値など様々なEXIF情報をユーザーフレンドリーなUIで編集できるようにしました。
ファイル検証と自然言語ソートによる安定的な一括処理
•アップロードされたファイルの形式とサイズを事前に検証して、サポートされていないファイル形式や破損したファイルによるエラーを防止しました。また、自然言語ソートユーティリティ関数を通じてファイル名の数字順序を正しく認識し、ユーザーが期待する順序でファイルが処理されるように実装しました。
RustベースのBiome導入で開発効率性向上
•既存のESLintとPrettierの組み合わせをRustベースのBiomeに置き換えて、リンティングとフォーマッティング速度を大幅に改善しました。コード品質検査と自動フォーマッティングを1つに統合し、高速な実行速度で開発ワークフローの効率性を高めて開発生産性を大きく向上させました。