eCatalog Viewerのカスタマイズ customizing-ecatalog-viewer

最終更新日： 2025年8月14日

作成対象：

Developer
User

eCatalog Viewerのビジュアルカスタマイズとビヘイビアーのカスタマイズは、すべてカスタム CSSを作成して行います。

推奨されるワークフローは、適切なビューアのデフォルトのCSS ファイルを取得し、別の場所にコピーしてカスタマイズし、style= コマンドでカスタマイズしたファイルの場所を指定することです。

デフォルトのCSS ファイルは次の場所にあります。

<s7_viewers_root>/html5/eCatalogViewer_dark.css

カスタム CSS ファイルには、デフォルトのクラス宣言と同じクラス宣言が含まれている必要があります。クラス宣言を省略すると、ユーザーインターフェイス要素に組み込みのデフォルトスタイルが提供されないため、ビューアが正しく機能しません。

カスタム CSS ルールを提供する別の方法として、埋め込みスタイルをweb ページまたはリンクされた外部CSS ルールのいずれかに直接使用することもできます。

カスタム CSSを作成する場合、ビューアはコンテナ DOM要素に.s7ecatalogviewer クラスを割り当てることに注意してください。 style= コマンドで渡された外部CSS ファイルを使用している場合は、CSS ルールの子孫セレクターで.s7ecatalogviewer クラスを親クラスとして使用します。 Web ページに埋め込みスタイルを行う場合は、このセレクターをコンテナ DOM要素のIDで次のように修飾します。

#<containerId>.s7ecatalogviewer

レスポンシブデザインのCSSを作成する section-c1e74f5114ad418884ca1c95f5ea5b63

ユーザーのデバイスや特定のweb ページレイアウトに応じて、コンテンツの表示を異なるように、さまざまなデバイスやCSSへの埋め込みサイズをターゲットにすることができます。このターゲットには、異なるweb ページレイアウト、ユーザーインターフェイス要素のサイズ、アートワークの解像度が含まれますが、これらに限定されません。

ビューアは、レスポンシブデザインのCSSを作成する方法として、CSS マーカーと標準のCSS メディアクエリの2つをサポートしています。これらの方法は、単独でも一緒でも使用できます。

CSS マーカー

レスポンシブデザインのCSSの作成に役立つように、ビューアはCSS マーカーをサポートしています。特別なCSS クラスは、実行時のビューアサイズと、現在のデバイスで使用されている入力タイプに基づいて、トップレベルのビューアコンテナ要素に動的に割り当てられます。

CSS マーカーの最初のグループには、.s7size_large、.s7size_mediumおよび.s7size_small個のクラスが含まれています。ビューアコンテナのランタイム領域に基づいて適用されます。つまり、ビューア領域が一般的なデスクトップモニター.s7size_largeのサイズと同じかそれより大きい場合、または共通のタブレットデバイス .s7size_mediumにサイズが近い場合に割り当てられます。携帯電話の画面に似た領域には、.s7size_smallが設定されています。これらのCSS マーカーの主な目的は、画面やビューアサイズごとに異なるユーザーインターフェイスレイアウトを作成することです。

CSS マーカーの2番目のグループには、.s7mouseinputと.s7touchinputが含まれています。現在のデバイスにタッチ入力機能がある場合は、マーカー.s7touchinputが設定されます。それ以外の場合は、.s7mouseinputが使用されます。これらのマーカーは、通常タッチ入力には大きな要素が必要なため、異なる入力タイプに対して異なる画面サイズのユーザーインターフェイス入力要素を作成することを目的としています。デバイスにマウス入力とタッチ機能の両方がある場合は、.s7touchinputが設定され、ビューアはタッチ対応のユーザーインターフェイスをレンダリングします。

次のCSSの例では、マウスを入力したシステムではズームインボタンのサイズを28 x 28 ピクセル、タッチデバイスでは56 x 56 ピクセルに設定しています。さらに、ビューアサイズが小さくなると、ボタンが完全に非表示になります。

.s7ecatalogviewer.s7mouseinput .s7zoominbutton {
    width:28px;
    height:28px;
}
.s7ecatalogviewer.s7touchinput .s7zoominbutton {
    width:56px;
    height:56px;
}
.s7ecatalogviewer.s7size_small .s7zoominbutton {
    visibility:hidden;
}

異なるピクセル密度のデバイスをターゲットにするには、CSS メディアクエリを使用します。次のメディアクエリブロックには、高密度スクリーンに固有のCSSが含まれます。

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

CSS マーカーを使用することは、レスポンシブデザインのCSSを作成する最も柔軟な方法です。デバイスの画面サイズだけでなく、実際の視聴者サイズもターゲットにすることができ、レスポンシブデザインのページレイアウトに役立つ可能性があります。

CSS マーカーアプローチの例として、デフォルトのビューア CSS ファイルを使用します。

CSS メディアクエリ

デバイス検出は、純粋なCSS メディアクエリを使用して実行することもできます。特定のメディアクエリブロック内に囲まれたすべてが、対応するデバイスで実行された場合にのみ適用されます。

モバイルビューアに適用する場合は、CSSで次の順序で定義された4つのCSS メディアクエリを使用します。

すべてのタッチデバイスに固有のルールのみが含まれます。

code language-none

@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px)
{
}

高解像度の画面を持つタブレットに固有のルールのみが含まれます。

code language-none

@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}

すべての携帯電話に固有のルールのみが含まれます。

code language-none
`@media only screen and (max-device-width:9in) and (max-device-height:9in) { }`

高解像度の画面を持つ携帯電話に固有のルールのみが含まれます。

code language-none

@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
  only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}

メディアクエリのアプローチを使用して、デバイスセンシングでCSSを整理する必要があります。

まず、「デスクトップ固有」セクションでは、デスクトップ固有またはすべてのスクリーンに共通するすべてのプロパティを定義します。
2つ目は、4つのメディアクエリが上記で定義された順序で行われ、対応するデバイスタイプに固有のCSS ルールが提供されます。

各メディアクエリでビューア CSS全体を複製する必要はありません。特定のデバイスに固有のプロパティのみが、メディアクエリ内で再定義されます。

CSS スプライト section-9d570f95eb2443aca74c1b02f6e89aff

多くのビューアーユーザーインターフェイス要素は、ビットマップアートワークを使用してスタイル設定され、複数の異なる視覚状態を持ちます。良い例は、通常は「up」、「over」、「down」の3つの異なる状態を持つボタンです。各ステートには、割り当てられた独自のビットマップアートワークが必要です。

スタイル設定に対する従来のアプローチでは、CSSはユーザーインターフェイス要素の状態ごとに、サーバー上の個々の画像ファイルへの個別の参照を持ちます。次に、ズームインボタンのスタイル設定に使用するCSSの例を示します。

.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-image:url(images/v2/ZoomInButton_dark_up.png);
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-image:url(images/v2/ZoomInButton_dark_over.png);
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-image:url(images/v2/ZoomInButton_dark_down.png);
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-image:url(images/v2/ZoomInButton_dark_disabled.png);
}

このアプローチの欠点は、要素が初めて操作されたときに、エンドユーザーがちらついたり、ユーザーインターフェイスの応答が遅れたりすることです。このアクションは、新しいエレメント状態の画像アートワークがまだダウンロードされていないために発生します。また、このアプローチは、サーバーへのHTTP呼び出し数が増加するため、パフォーマンスにわずかな悪影響を及ぼす可能性があります。

CSS スプライトは、すべてのエレメント状態の画像アートワークを「スプライト」と呼ばれる1つのPNG ファイルに結合する別のアプローチです。このような「スプライト」には、特定の要素のすべての視覚状態が次から次へと配置されます。スプライトを使用してユーザーインターフェイス要素のスタイルを設定する場合、同じスプライトイメージがCSSのすべての異なるステートに対して参照されます。また、background-position プロパティは各状態に対して使用され、「スプライト」画像のどの部分を使用するかを指定します。「スプライト」画像は、任意の適切な方法で構成できます。通常、ビューアは垂直方向に積み重ねられます。以下は、上から同じズームインボタンをスタイル設定する「スプライト」ベースの例です。

.s7ecatalogviewer .s7zoominbutton[state]  {
    background-image: url(images/v2/ZoomInButton_dark_sprite.png);
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-position: -84px -560px;
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-position: -56px -560px;
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-position: -28px -560px;
}
.s7ecatalogviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-position: -0px -560px;
}

一般的なスタイリングノートとアドバイス section-95855dccbbc444e79970f1aaa3260b7b

CSSを使用してビューアのユーザーインターフェイスをカスタマイズする場合、!IMPORTANT ルールの使用はビューア要素のスタイル設定には対応していません。特に、!IMPORTANT ルールは、ビューアまたはビューア SDKが提供するデフォルトまたは実行時のスタイル設定を上書きするために使用しないでください。その理由は、適切なコンポーネントの動作に影響を与える可能性があるためです。代わりに、このリファレンスガイドに記載されているCSS プロパティを設定するには、適切な特異性を持つCSS セレクターを使用する必要があります。
CSS内の外部アセットへのすべてのパスは、ビューアのHTML ページの場所ではなく、CSSの場所に対して解決されます。デフォルトのCSSを別の場所にコピーする場合は、このルールに注意してください。デフォルトのアセットもコピーするか、カスタム CSS内のパスを更新します。
ビットマップアートワークにはPNG形式が適しています。
ビットマップアートワークは、background-image プロパティを使用してユーザーインターフェイス要素に割り当てられます。
ユーザーインターフェイス要素のwidthおよびheight プロパティが、その論理サイズを定義します。 background-imageに渡されたビットマップのサイズは、論理サイズに影響しません。
Retinaのような高解像度の画面の高いピクセル密度を使用するには、ビットマップアートワークを論理ユーザーインターフェイス要素サイズの2倍のサイズで指定します。次に、-webkit-background-size:contain プロパティを適用して、背景を論理ユーザーインターフェイス要素サイズまで縮小します。
ユーザーインターフェイスからボタンを削除するには、そのCSS クラスにdisplay:noneを追加します。
CSSがサポートするカラー値には、様々な形式を使用できます。透明性が必要な場合は、形式rgba(R,G,B,A)を使用してください。それ以外の場合は、形式#RRGGBBを使用できます。

共通のユーザーインターフェイス要素 section-d6330c9be8c444aa9b2a07886e3dbc2a

次に、eCatalog Viewerに適用されるユーザーインターフェイス要素のリファレンスドキュメントを示します。

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref