Works
01 project
01
あしあと
旅行記録 PWA — ashiato.tomoi-app.com
日本全47都道府県を塗りつぶしながら旅行記録を残せるPWA。単なる記録アプリにとどまらず、「1,000枚の写真を保存してもクラッシュしない」という難題をVanilla JSのみで解決した、ブラウザのメモリ管理への本気の挑戦です。
技術的な工夫
- iOS Safari クラッシュを根絶 100枚超でSafariが落ちる問題を、IntersectionObserverによる遅延読み込み・DOM上限100枚のページネーション・img.src初期化によるGC促進の三重対策で完全解消。
- Canvas使い回し設計 画像圧縮用Canvasをグローバルに1つだけ生成して再利用。Canvas乱立によるグラフィックメモリ枯渇を構造レベルで防止。
- ハイブリッドストレージ 高画質原版はIndexedDB（端末内）、軽量サムネイルはSupabase（クラウド）に分離し、通信量と表示速度を両立。
- ゼロフレームワーク・約4,000行 ReactやVueに依存せず、app.js 約4,000行をVanilla JSのみで実装。ブラウザAPIを直接制御することで余分なオーバーヘッドをゼロに。
- フルスタック個人開発・運用中 フロント・Vercel Serverless（Python）・Supabase設計・PWA・Service Workerまで一人で構築し、実際のユーザーに公開・運用中。
