【ITニュース解説】Convert iPhone HEIC photos to JPG in the browser with JavaScript

iPhoneで撮影された写真が「HEIC」という形式で保存されることは、多くの人が知るところである。このHEIC形式は、従来の「JPG」形式に比べてファイルサイズが約半分と非常に効率的で、ストレージ容量の節約に大きく貢献する。しかし、この高効率なHEIC形式には大きな課題が存在する。それは、多くのウェブサイトのアップロードフォーム、Windowsのアプリケーション、さらには一部のウェブブラウザなどがHEIC形式に未対応であり、写真を開いたりアップロードしたりできないという互換性の問題である。特に、ユーザーがiPhoneで撮影した写真をウェブサイトにアップロードしようとした際に、その写真がHEIC形式であるために拒否されてしまうというケースは頻繁に発生し、システムエンジニアとしてこれをどう解決するかは重要な課題となる。

この互換性の問題を解決するための画期的な方法が、サーバーを介さずにユーザーのブラウザ内でHEICファイルをJPG形式に変換するというアプローチである。通常、ファイルの変換処理はサーバー側で行われることが多い。しかし、ブラウザ内で完結させることで、ユーザーのプライバシーが保護されるだけでなく、サーバーへの負荷を軽減し、高速な処理が実現できるというメリットがある。この実現には「heic2any」というJavaScriptライブラリが重要な役割を果たす。

では、なぜ通常のWeb技術だけではHEICファイルをブラウザ内で簡単にJPGに変換できないのだろうか。Web開発において、画像を別の形式に変換する一般的な方法は、HTMLの「canvas」要素を使うことである。画像をcanvasに描画し、そのcanvasの内容をtoBlob()という機能を使って新しい形式のデータ（例えばJPG）として出力する。しかし、この方法はHEICファイルではうまく機能しない。その理由は、Safari以外の主要なウェブブラウザ（Google Chrome、Mozilla Firefox、Microsoft Edgeなど）がHEIC形式をネイティブでデコードする機能を持たないためである。つまり、これらのブラウザは<img>タグを使ってHEICファイルを直接読み込むことすらできない。canvasで画像を処理するには、まずその画像をブラウザが理解できる形式で読み込む必要があるため、HEICファイルを直接扱えないブラウザではcanvasを使った変換もできないのだ。

ここで登場するのが「heic2any」ライブラリである。このライブラリは、WebAssemblyにコンパイルされたHEICデコーダを内包している。WebAssemblyとは、ウェブブラウザで高速に動作するバイナリ形式のコードであり、JavaScriptよりも高速な処理を必要とする場面で利用される。heic2anyライブラリは、ブラウザがネイティブでHEICをデコードできなくても、WebAssemblyの力を借りてHEICデータを解析し、画像として復元できるため、結果的にcanvasを使わずにHEICからJPGへの変換を可能にする。

具体的な実装の流れは以下のようになる。まず、HTMLでは<input type="file">という要素を配置し、ユーザーがHEICファイルを選択できるようにする。この入力要素には、accept=".heic,.heif,image/heic,image/heif"のように属性を設定することで、HEIC形式のファイルのみを選択候補として表示させ、ユーザーが誤って他の形式のファイルを選択するのを防ぐことができる。次に、JavaScriptコードで、このファイル入力要素のchangeイベント（ユーザーがファイルを選択したときに発生するイベント）を監視する。イベントが発生すると、選択されたファイルデータ（「Blob」と呼ばれるバイナリデータ形式）をheic2anyライブラリに渡す。この際、toType: 'image/jpeg'と指定してJPG形式への変換を指示し、quality: 0.9のように画質を設定することで、変換後のファイルサイズと品質のバランスを調整する。

ファイル変換は時間がかかる処理であるため、JavaScriptでは「非同期処理」という手法を用いる。awaitキーワードを使用することで、ファイル変換が完了するまで次の処理を待機させつつ、その間にウェブページ全体が固まってユーザーが操作できなくなるのを防ぐ。変換が完了すると、heic2anyはJPG形式のBlobデータを返す。このBlobデータをURL.createObjectURL()という機能を使って一時的なURLに変換し、これをダウンロードリンクのhref属性に設定することで、ユーザーは変換されたJPGファイルを自分のデバイスにダウンロードできるようになる。ダウンロード時のファイル名も、元のHEICファイル名から拡張子を.jpgに置き換える処理を行う。

この実装にはいくつかの重要な考慮事項がある。第一に、heic2anyライブラリ自体が約1.3MBと比較的大きいため、ウェブページの初回ロード時に常に読み込むのではなく、ユーザーがHEICファイルを実際に選択した後に遅延ロード（lazy load）することで、通常のページの表示速度を保つ工夫が必要となる。第二に、ライブフォトのように複数の画像をまとめて含むHEICファイルの場合、heic2anyは複数のJPGデータを配列として返すことがあるため、返された結果が配列かどうかをArray.isArray(result)で確認し、適切に処理する必要がある。第三に、一部の環境ではブラウザがHEICファイルの「MIMEタイプ」（ファイルの種類の情報）を正しく認識せず、file.typeが空になることがあるため、ファイル拡張子も併せて確認することで、HEICファイルを確実に識別できるような堅牢な実装が求められる。

また、HEICファイルのデコード処理は多くのメモリを消費するため、ユーザーが一度に大量のHEICファイルを変換しようとした場合、ブラウザがフリーズしたりクラッシュしたりするリスクがある。これを避けるためには、全てのファイルを一斉に処理するのではなく、awaitを使ったループで一つずつファイルを順番に変換していく方法が安全である。画質の設定については、quality: 0.9という値が推奨されている。これは、最高品質の1.0と視覚的な差はほとんどないにもかかわらず、ファイルサイズを大幅に削減できるため、効率と品質のバランスが取れた選択肢である。そして、最も重要な点の一つは、この変換プロセスが全てユーザーのブラウザ内で完結し、変換対象の画像データがサーバーにアップロードされることがないため、ユーザーのプライバシーが厳重に保護されるというメリットである。

HEICファイルの変換という一見単純な課題の背後には、ファイル形式の理解、ブラウザの互換性、JavaScriptによる非同期処理、WebAssemblyの活用、ユーザーインターフェース設計、パフォーマンス最適化、セキュリティ（プライバシー保護）といった、システムエンジニアがWebアプリケーションを開発する上で直面する多様な技術的要素と考慮事項が存在する。このような具体的な課題を解決する過程を通じて、Webフロントエンド開発の奥深さと、それを支える技術への理解を深めることができるだろう。