B2C Commerce の画像のフィンガープリント (fingerprint) に関する FAQ

Q1: 画像のフィンガープリントとは？

画像 URL に含まれる「dw」で始まる 10 桁のハッシュ値は「フィンガープリント(fingerprint)」と呼びます。
フィンガープリントは画像ファイルのハッシュ値から生成される値であり、画像の内容ごとに一意の値になります。
また、画像の内容が更新されるたびに新しいフィンガープリントが付与されます。この仕組みにより、キャッシュで更新前の画像が参照されることを防ぐことができます。


Q2: 最新の画像をストアフロントで表示させたい場合、画像の URL はどのように設定すれば良いでしょうか？

最新の画像を表示させたい場合、ストアフロントページ上の HTML タグ <img> の「src」属性で記述を行うときに以下どちらかの方法で画像 URL を指定する必要があります。

• ISML テンプレートで URL を生成する : URLUtils クラスのメソッド
• コンテンツアセットで URL を生成する : $staticlink$ 関数

これらによって生成される画像 URL にフィンガープリントが付与されるため、最新の画像を参照することができます。

URLUtils クラスや $staticlink$ 関数の詳細については、以下のドキュメントを参照してください。
Class URLUtils
$staticlink$


Q3: フィンガープリントなしでも画像にアクセスできますか？

フィンガープリントなしの URL でも画像を参照することができますが、キャッシュの影響によって更新前の画像が表示される可能性があります。


Q4: 古いフィンガープリント付きの URL で画像を参照した場合、どのような結果になりますか？

古いフィンガープリントでも画像を参照することができますが、キャッシュの影響によって更新前の画像が表示される可能性があります。


Q5: フィンガープリントを使用するキャッシュの仕組みについて教えてください。

このトピックについては例を用いて説明します。
ブラウザーから B2C Commerce サイトへのアクセスにおける HTML の通信経路を簡単に図で表すと以下になります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ブラウザー ↔ 埋め込み CDN ↔ Web Adapter ↔ アプリケーションサーバー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

「SampleImage-Start」という controller があるとします。この controller で以下のような <img> タグの含まれる ISML をレンダリングします。タグの src 属性では URLUtils.staticURL メソッドで画像 (codey.png) の URL を取得するように設定しています。

<img src="${URLUtils.staticURL(URLUtils.CONTEXT_LIBRARY, 'RefArchSharedLibrary', 'codey.png')}" alt="codey" />

ブラウザーから SampleImage-Start にアクセスすると、アプリケーションサーバー側の URLUtils の処理によって以下の HTML がブラウザーに返されます。HTML の <img> タグで参照する画像 URL に「dw」から始まる 10 桁のフィンガープリントが含まれるようになります。

<img src="/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw6cc4a9c4/codey.png" alt="codey">

画像のリクエストはブラウザー上で HTML の読み込みが終わった後に送信されます。その通信経路を簡単に図で表すと以下のようなものです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ブラウザー ↔ 埋め込み CDN ↔ (Dynamic Imaging Service (DIS))※ ↔ Web Adapter ↔ アプリケーションサーバー
※ DIS を利用する場合のみ、通信経路にこれが含まれます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

結果として、ブラウザーから SampleImage-Start にアクセスしますと、以下の画像 (codey.png) とフィンガープリント (dw6cc4a9c4) 付きの 画像 URL が確認できるようになります。

B2C Commerce 環境の WebDAV パス上に格納される画像ファイルはアプリケーションサーバーのファイルシステム上に存在します。
ブラウザーから画像 URL に初めてアクセスするときに、その画像はアプリケーションサーバー上で取得され、その後は埋め込み CDN・DIS (利用する場合のみ)・Web Adapter にキャッシュされます。次回以降同じ URL でアクセスするときに、画像はキャッシュから取得されます。

このような場合に WebDAV 上の画像ファイル (codey.png) が更新されると、ブラウザーから SampleImage-Start にアクセスするときに、<img> タグの src 属性で生成される画像の URL にはアプリケーションサーバーの処理によって新しいフィンガープリント (dw2e82d815) が付与された HTML が生成されます。

<img src="/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw2e82d815/codey.png" alt="codey">

HTML は埋め込み CDN ではキャッシュされないため、ブラウザーには更新された画像 URL を含むページの HTML が返却されます。
ブラウザーは新しい画像 URL へのリクエストを送信し、 埋め込み CDN・DIS (利用する場合のみ)・Web Adapter 側でキャッシュミスが発生し、アプリケーションサーバーから最新の画像が取得されます。
その後、その画像は再度にキャッシュされ、キャッシュの TTL (Time-To-Live) の間は同じ URL ではキャッシュがヒットします。
TTL 経過後のリクエストではキャッシュミスが発生し、再びアプリケーションサーバーから画像を取得します。


Q6: 画像キャッシュクリアの仕組みについて教えてください。

上述のように、一度アクセスした画像は埋め込み CDN・DIS (利用する場合のみ)・Web Adapter でキャッシュされます。
これらのキャッシュはそれぞれの TTL 設定に従って削除されます。

埋め込み CDN: キャッシュはオリジンサーバー (B2C Commerce インスタンス) の TTL 設定に従って保存・削除されます。
※ オリジンサーバーの TTL の設定場所は下記「Web Adapter」セクションに記載します。

DIS: キャッシュ はプラットフォーム内部の TTL 設定に従って保存・削除されます。
※ DIS 側のキャッシュの削除についてはお客様側で行う方法はなく、サポートに連絡する必要があります。

Web Adapter: キャッシュは以下 2 つのメニュー上の TTL 設定に従って保存・削除されます。

• [管理 > サイト > サイトの管理 > {サイト名} - キャッシュ] 上の [静的コンテンツの TTL (有効期限)]
• [管理 > サイト > サイトの管理 > グローバル静的キャッシュ] 上の [グローバル静的コンテンツの Time to Live (TTL)]

※ Production 環境上の静的コンテンツの TTL は最短 86,400 秒 (24 時間) に設定可能です。

静的コンテンツキャッシュの詳細については、以下のドキュメント (英語) を参照してください。
Content Cache (Static Content Cache の部分を参照)