メディアギャラリーモジュール

[アーティクル]
08/02/2024

この記事では、メディアギャラリーモジュールを取り上げ、Microsoft Dynamics 365 Commerce のサイトページにそれを追加する方法について説明します。

メディアギャラリーモジュールは、ギャラリービューに 1 つ以上の画像を表示します。メディアギャラリーモジュールは、水平方向 (画像の下の行として) または垂直方向 (画像の横の列として) のいずれかに配置できるサムネイル画像をサポートします。また、メディアギャラリーモジュールには、画像をズーム (拡大) したり、全画面モードで表示したりする機能も用意されています。メディアギャラリーモジュールでレンダリングするには、Commerce サイトビルダーのメディアライブラリでイメージが使用可能でなければなりません。現時点では、メディアギャラリーモジュールでサポートしているのは画像のみです。

既定のモードで、メディアギャラリーモジュールは、製品の詳細ページ (PDP) のページコンテキストから使用できる製品 ID を使用して、対応する製品画像をレンダリングします。 Commerce Headquarters で、すべての製品に対してメディアファイルパスを定義する必要があります。その後、Commerce Headquarters で製品に対して定義されたファイルパスに従って、サイトビルダーメディアライブラリに画像をアップロードする必要があります。これらの画像には、製品および製品バリアントの画像が含まれます。サイトビルダーのメディアライブラリーに画像をアップロードする方法の詳細については、画像のアップロードを参照してください。

または、製品 ID またはページコンテキストに依存しない画像ギャラリーページで、完全に精選された一連の画像をホストすることもできます。この場合、画像をサイトビルダーのメディアライブラリーにアップロードし、サイトビルダーで指定する必要があります。

メディアギャラリーモジュールの使用例を次に示します:

PDP での製品画像のレンダリング
製品マーケティングページでの製品画像のレンダリング
精選された一連の画像をギャラリーページなどのマーケティングページに表示

次の図に示す例では、PDP 上の購入ボックスが、メディアギャラリーモジュールを使用して製品画像をホストします。

メディアギャラリーモジュールを使用して製品画像をホストする製品詳細ページの購入ボックスの例。

メディアギャラリーのプロパティ

プロパティ名	値	説明
画像ソース	ページコンテキストまたは製品 ID	既定値はページコンテキストです。ページコンテキストが選択されている場合、モジュールは、ページが製品 ID 情報を提供することを想定します。製品 ID を選択した場合は、画像の製品 IDを製品 ID プロパティの値として指定する必要があります。この機能は、Commerce バージョン 10.0.12 で使用できます。
製品 ID	製品 ID	このプロパティは、画像ソースプロパティの値が製品 ID である場合にのみ適用できます。
画像ズーム	インラインまたはコンテナー	このプロパティを使用すると、ユーザーはメディアギャラリーモジュールの画像をズームできます。画像は、インラインまたは画像の横にある別のコンテナーでズームできます。この機能は、10.0.12 で使用できます。
拡大率	10 進数	このプロパティは、画像のズーム倍率を指定します。たとえば、値が 2.5 に設定されている場合、画像は 2.5 倍に拡大されます。
全画面表示	True または False	このプロパティは、画像を全画面表示モードで表示できるかどうかを指定します。全画面表示モードでは、ズーム機能がオンになっている場合、画像をさらに拡大することもできます。この機能は、Commerce のバージョン 10.0.13 リリースで利用できます。
ズーム画像の品質	パーセンテージを表し、追跡バーコントロールを使用して選択される 1 ～ 100 の数値	このプロパティでは、ズーム画像の画像品質を定義します。ズーム画像が常に最高の解像度を使用するように、100% に設定できます。このプロパティは、無損失形式を使用しているため、PNG ファイルには適用できません。この機能は、Commerce バージョン 10.0.19 リリース以降で使用できます。
画像	サイトビルダーのメディアライブラリーから選択された画像	製品からレンダリングするだけでなく、メディアギャラリーモジュール用に画像を精選することもできます。これらの画像は、使用可能な製品画像に追加されます。この機能は、Commerce バージョン 10.0.12 で使用できます。
サムネイルの向き	垂直または水平	このプロパティでは、サムネイル画像を垂直ストリップと水平ストリップのどちらで表示するかを指定します。
バリアントのマスター製品画像を非表示にする	True または False	このプロパティが True に設定されている場合、バリアントが選択されると、バリアントに画像がない限り、マスター製品画像は非表示になります。このプロパティは、バリアントがない製品には影響しません。
分析コードの選択に関するメディアの更新	True または False	プロパティが True に設定されている場合、いずれかの分析コード (色、スタイル、サイズ) が選択されており、画像が利用可能な場合にメディアの画像は更新されます。対応する画像を更新するためにすべての製品バリアント分析コードを選択する必要はないので、このプロパティを使用するとブラウジングエクスペリエンスを簡略化できます。このプロパティは、詳細タブで使用できます。

重要

分析コードの選択に関するメディアの更新プロパティは、Commerce バージョン 10.0.21 リリースで利用可能です。 Commerce モジュールライブラリパッケージのバージョン 9.31 をインストールする必要があります。

次の図は、全画面およびズームオプションが使用できるメディアギャラリーモジュールの例を示しています。

全画面およびズームオプションが使用できるメディアギャラリーモジュールの例。

次の図は、精選された画像がある (つまり、指定された画像が製品 ID またはページコンテキストに依存しない) メディアギャラリモジュールの例を示しています。

精選された画像があるメディアギャラリーモジュールの例。

Commerce Scale Unit インタラクション

画像ソースがページコンテキストから派生している場合は、PDP からの製品 ID を使用して画像を取得します。メディアギャラリーモジュールでは、Commerce Scale Unit アプリケーションのプログラムインターフェース (API) を使用して製品の画像ファイルパスを取得します。その後、画像はメディアライブラリから取得され、モジュールでレンダリングできるようになります。