サーバー代ゼロ、個人データ漏洩リスクゼロ。完全クライアントサイドで完結する Tier List 作成ツールのアーキテクチャ

サーバー代ゼロ、個人データ漏洩リスクゼロでTier List作成ツールを構築するアーキテクチャを紹介。インフラコストとプライバシー保護の課題に対し、完全クライアントサイドで完結する設計を採用することで、これらの問題を解決する。

• サーバー代ゼロ、個人データ漏洩リスクゼロを目指し、フロントエンド（React/Next.js）のみで完結するTier List作成ツールRanklyを開発した。
• ユーザーがアップロードした画像はサーバーに保存せず、URL.createObjectURLを使用してブラウザメモリ上で一時参照URLを生成し、メモリ消費を抑えている。
• 画像とテキストカードを同一のドラッグ＆ドロップイベントハンドラーで扱えるように、シンプルで一元化された状態管理モデルを採用した。
• サーバーサイド処理なしで高解像度PNGエクスポートを実現するため、非表示Canvas要素上で画像合成処理を行い、Blob変換後に直接ダウンロードさせる仕組みを構築した。
• デバイスピクセル比(DPR)を考慮しCanvasを2～3倍のスケールで確保することで、ぼやけのない鮮明なPNGファイルを生成し、ユーザー体験を向上させている。