Step 3: Core Technology

iPhoneのHEIC画像が
ブラウザで表示できない問題

iPhoneで撮った写真が読み込めない…。開発終盤に立ちはだかった「HEICの壁」を乗り越えた話です。

まさかの「画像が表示されない」

開発がほぼ終わった頃、自分のiPhoneからアップロードを試すと画像が全く表示されませんでした。調べてみると、iPhoneの写真は HEIC という独自形式で保存されており、ほとんどのブラウザはこれを直接表示することができないのです。

「サーバーに送らずに解決する」というルールを崩したくなかった私は、heic2any というライブラリに辿り着きました。これはブラウザの強力な計算機能（WebAssembly）を使い、ブラウザ内で無理やりHEICをJPEGに変換する凄いやつです。

// HEIC形式ならJPEGに変換する処理を挟む
if (file.type === "image/heic") {
    const converted = await heic2any({ blob: file, toType: "image/jpeg" });
}

変換には少し時間がかかるので、ローディング画面などの工夫が必要でしたが、これで「iPhoneユーザーも安心して使える」ツールになりました。技術の進化と、先人たちが残してくれたライブラリに感謝した瞬間です。