猫の手ツール

Step 3: Core Technology

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

iPhoneで撮った写真がプレビューされない…。開発終盤、実機テストで立ちはだかった「HEICの壁」。サーバーに画像を送りたくないという設計思想を守りつつ、ブラウザ内で完結して解決する方法を模索しました。

1. HEICとは何か？なぜブラウザで表示できないのか

HEIC (High Efficiency Image File Format) は、AppleがiOS 11から採用した画像フォーマットです。従来のJPEGに比べて圧倒的に高圧縮でありながら、高画質を維持できるという優れた技術です。

しかし、Web開発者にとってHEICは厄介な存在です。なぜなら、ChromeやFirefox、Safariといった主要なWebブラウザの多くが、セキュリティや特許ライセンス、計算負荷の問題から、HEICを標準の <img> タグで直接表示することをサポートしていないからです。iPhoneユーザーが撮った写真をWebアプリで扱おうとすると、画面が真っ白になってしまうのはこれが原因です。

2. サーバーレス解決策：heic2any の導入

「猫の手ツール」では、プライバシー保護のために画像を一切サーバーに送信しない設計を徹底しています。そのため、サーバー側で ImageMagick などのライブラリを使って変換するという手法は取れませんでした。

そこで辿り着いたのが、ブラウザ上で動作するJavaScriptライブラリ heic2any です。これは内部で WebAssembly (Wasm) を利用しており、ブラウザの強力な計算能力をフル活用して、クライアントサイドだけでHEICからJPEG/PNGへの変換を可能にします。

実装：HEICを検知して自動変換するロジック

ユーザーがファイルを選択した際、MIMEタイプを確認し、HEICであれば即座に変換処理を走らせる実装にしました。

【具体的なコード】heic2any による非同期変換

// ファイルが選択された時のハンドラ
async function handleImageSelect(file) {
    let targetFile = file;

    // MIMEタイプが image/heic なら変換実行
    if (file.type === "image/heic" || file.name.toLowerCase().endsWith(".heic")) {
        try {
            // ローディングインジケーターを表示
            showSpinner("iPhone形式の画像を変換中...");

            const convertedBlob = await heic2any({
                blob: file,
                toType: "image/jpeg",
                quality: 0.8
            });

            // 変換後のBlobをFileオブジェクトとして再定義
            targetFile = new File([convertedBlob], file.name.replace(/\.heic$/i, ".jpg"), {
                type: "image/jpeg"
            });
        } catch (error) {
            showErrorMessage("画像の変換に失敗しました。");
            return;
        } finally {
            hideSpinner();
        }
    }

    // 以降は通常のJPEGとして処理（Canvas描画など）
    processImage(targetFile);
}

3. 注意点と落とし穴：リソース管理とUX

この魔法のような技術ですが、実務で使う上ではいくつかのハードルがありました。

  • CPU負荷と変換時間： HEICのデコードは非常に重い処理です。特にスペックの低いスマートフォンでは、変換に3〜5秒ほどかかる場合があります。ユーザーが「フリーズした」と誤解しないよう、明確なローディング表示（スピナーなど）が必須です。
  • ライブラリのサイズ： heic2any は Wasm バイナリを含んでいるため、ライブラリ自体のサイズが大きめです。必要な時だけ動的にインポート（Dynamic Import）するなどの工夫をしないと、ページ全体の読み込みが遅くなる可能性があります。
  • メモリ消費： 大きな画像（4K以上など）を変換すると、ブラウザのメモリを一時的に大量消費します。処理が終わったら速やかに不要なBlobを解放するなどの管理が求められます。

4. 実務に活きる：技術が「優しさ」に変わる瞬間

インフラエンジニアとして「システムを堅牢に作る」ことばかりを考えていた時期もありましたが、フロントエンド開発を通じて「技術でユーザーの不便を解消する」楽しさを知りました。

iPhoneユーザーが何気なく撮った写真を、そのまま何も考えずに使える。その「当たり前」をブラウザ内完結のセキュリティと両立させる。この heic2any との戦いを経て、猫の手ツールはより多くの人に安心して使ってもらえるツールへと進化しました。

まとめ

HEIC問題は、単なるフォーマットの違いではなく、OSの壁とブラウザの限界がぶつかり合うフロントエンドの難所です。しかし、WebAssemblyのような先端技術を借りれば、サーバーを介さずとも解決の道は見えてきます。

「どんな環境のユーザーも置いていかない」。このエンジニアリングの姿勢を大切に、これからも細かなブラウザの挙動や新技術と向き合っていきたいと思います。

© 2026 nekonote-tools.com