ブラウザでHEIC変換

2024年10月、StackBlitz / bolt.new から heic-converter を始めた。iPhone の写真（HEIC）をブラウザ上で JPEG に変換するやつ。

動機

iPhone 写真は HEIC で、Web にそのまま上げると表示できないことが多い。サーバーに送る前に、ブラウザ側で JPEG にしてしまいたかった。アップロードもサーバー処理も要らないので、その方がプライバシー的にも気楽。

構成

bolt.new が吐いた React + Vite + shadcn/ui のベースに、変換まわりを足した。

• heic2any — HEIC → JPEG/PNG の変換本体
• react-dropzone — ドラッグ&ドロップで画像を受ける
• jszip — 複数枚をまとめて zip でダウンロード
• sonner — 変換完了のトースト
• 変換ロジックは src/lib/image-utils.ts、UI は ImageConverter.tsx

全部クライアントサイドで完結する。ファイルはどこにも送らない。

ハマったところ / 気づき

heic2any を入れたら変換自体はあっさり動いた。むしろ考えどころは「複数枚を一気に変換したとき、1枚ずつ落とすのは面倒」という UX 側で、jszip でまとめて zip にして1回でダウンロードできるようにした。react-dropzone + トーストで、放り込んだら勝手に変換されて完了通知が出る、くらいの軽さに寄せた。

学び

こういう小さいユーティリティは、StackBlitz / bolt.new → GitHub のフローが最速。本番化（独自ドメインとか）は後回しでよくて、まず「動くものを URL で渡せる」状態にするのが正解だった。実際この変換は、ツール詰め合わせの 2rab-app にも組み込んだ。クライアント完結のミニツールは、Cloudflare Pages に置いておくと地味に長く使える。