YOURMYSTAR を支える UnJS と ipx

弊社では、多くの UnJS 製パッケージを利用しています。 本記事では、その中でも画像のリサイズ・形式変換を行う ipx を利用している事例と、自社で拡張して使っていた「自動フォーマット選択」を UnJS に還元した事例を紹介します。

UnJS とは

UnJS は、JavaScript / TypeScript 向けのオープンソースのエコシステムで、Nitro, h3, ofetch, ipx などのライブラリを提供しています。 ipx は、画像のリサイズや形式変換（WebP変換など）を高速・安全に扱うためのライブラリです。 弊社では、画像プロキシを Nitro で立てたサーバー上で ipx を動かす形で利用しています。

画像プロキシとは

ユアマイスターのサービスでは、多数の画像を最適なサイズ・形式で配信する必要があります。そのために画像プロキシを自前で運用しており、画像の配信経路は、おおまかに Cloud Storage → 画像プロキシ → Cloud CDN → ユーザー（クライアント） という流れになっています。元画像は Cloud Storage に格納されており、ユーザー（クライアント）からのリクエストはまず Cloud CDN に入ります。キャッシュミス時には画像プロキシへ渡され、画像プロキシ（Nitro + ipx）が Cloud Storage から元画像を取得して URL パラメータに応じてリサイズ・形式変換を行い、レスポンスを返します。レスポンスには Cache-Control などのキャッシュ用ヘッダーを付与しており、CDN やブラウザでのキャッシュ方針を画像プロキシ側で制御しています。変換結果は CDN にキャッシュされるため、同じ条件のリクエストは CDN からユーザーに返され、画像プロキシやストレージへの負荷を抑えています。

配信の流れをシーケンスで示すと次のとおりです。

UnJS へのフィードバック（ipx の auto フォーマット）

画像プロキシでは、ブラウザによって対応している画像形式が異なるため、リクエストに応じて最適な画像形式を返したいという要望がありました。 Cloudinary や imgix にある機能に近い挙動です。 当初は ipx を拡張して実装・運用していましたが、汎用的に使えそうだと判断し、ipx に提案しています。利用するだけでなく、必要に応じて拡張した結果をコミュニティに還元している事例の一つです。

https://github.com/unjs/ipx/pull/85

ipx の auto フォーマットの使い方

提案している auto フォーマットは、画像の形式を URL パラメータで指定する際に format を auto に指定することで利用できます。ipx がリクエストの Accept ヘッダー等を解釈し、対応している形式（WebP や AVIF など）のうち最適（になりそう）なものを返します。これにより、クライアント側で形式を決めずに「自動でよい形式で返してほしい」という要望に応えられます。詳細やマージ後の利用方法は unjs/ipx の PR #85 や ipx のドキュメントを参照してください。

おわりに

今回、弊社で UnJS 製の ipx を画像プロキシにどう使っているか、および自動フォーマット選択を UnJS にフィードバックした経緯をまとめました。今後も、業務で使うライブラリで「ここはこうできたらよい」と感じた部分があれば、可能な範囲でパッチや PR として提案し、OSS に還元していきたいと考えています。