カルーセルビューアのカスタマイズ customizing-carousel-viewer

Last update: Wed Sep 15 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

カルーセルビューアのすべての視覚的なカスタマイズと、ほとんどの動作のカスタマイズは、カスタムCSSを作成することで行います。

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

初期設定のCSSファイルは次の場所にあります。

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/CarouselViewer_dotted_light.css

このビューアには、数値インジケーターと点線インジケーターの4つのCSSファイルが用意されており、それぞれが「明」と「暗」のカラースキームで表示されます。デフォルトでは「点線の光」バージョンが使用されますが、異なる標準CSSを使用し、SetIndicator.modeパラメーターを設定すると、別のバージョンに簡単に切り替えることができます。その他の標準CSSは次の場所にあります。

<s7_viewers_root>/html5/CarouselViewer_dotted_dark.css

<s7_viewers_root>/html5/CarouselViewer_numeric_dark.css

<s7_viewers_root>/html5/CarouselViewer_numeric_light.css

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

カスタムCSSルールを指定する別の方法は、Webページ上またはリンクされたいずれかの外部CSSルール内で、埋め込みスタイルを直接使用することです。

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

#<containerId>.s7carouselviewer

レスポンシブデザインCSSの構築 section-0bb49aca42d242d9b01879d5ba59d33b

CSSで様々なデバイスおよび埋め込みサイズをターゲットにして、ユーザーのデバイスや特定のWebページのレイアウトに応じて、コンテンツの表示を変えることができます。この手法には、レイアウト、ユーザインターフェイス要素のサイズ、アートワークの解像度などが該当しますが、これらに限定されません。

ビューアでは、レスポンシブデザインCSSの作成メカニズムが2つサポートされています。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が含まれます。現在のデバイスがタッチ入力の場合、CSSマーカー.s7touchinputが設定されます。それ以外の場合は、.s7mouseinputが使用されます。通常、タッチ入力にはより大きな要素が必要なので、これらのマーカーは、入力タイプごとに異なる画面サイズを持つユーザーインターフェイス入力要素を作成することを目的としています。

以下のサンプルCSSでは、ズームインボタンのサイズを、マウス入力のシステムでは28 x 28ピクセルに設定し、タッチ入力デバイスでは56 x 56ピクセルに設定します。ビューアのサイズがさらに小さい場合は、20 x 20ピクセルに設定されます。

.s7carouselviewer.s7mouseinput .s7imagemapeffect .s7icon {
    width:28px;
    height:28px;
}
.s7carouselviewer.s7touchinput .s7imagemapeffect .s7icon {
    width:56px;
    height:56px;
}
.s7carouselviewer.s7size_small .s7imagemapeffect .s7icon {
    width:20px;
    height:20px;
}

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

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

レスポンシブデザインCSSを構築する最も柔軟な方法は、CSSマーカーを使用することです。デバイスの画面サイズだけでなく、実際のビューアサイズもターゲットにでき、レスポンシブデザインのレイアウトに役立ちます。

初期設定のビューアCSSファイルを、CSSマーカーアプローチの例として使用できます。

CSSメディアクエリ

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

モバイルビューアに適用される場合は、4つのCSSメディアクエリが使用されます。これらはCSSで以下に示す順序で定義されます。

すべてのタッチデバイスに固有のルールのみを含む。

code language-none

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) { }`

@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

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) { }`

@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

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) { }`

@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を次のように整理する必要があります。

まず、デスクトップ固有のセクションで、デスクトップに固有またはすべての画面に共通のすべてのプロパティを定義します。
次に、4つのメディアクエリを上で定義した順に実行し、対応するデバイスタイプに固有のCSSルールを指定します。

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

CSSスプライト section-9b6d8d601cb441d08214dada7bb4eddc

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

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

.s7carouselviewer .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
}
.s7carouselviewer .s7imagemapeffect .s7icon:hover {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

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

CSSスプライトは、すべての要素状態の画像アートワークを「スプライト」と呼ばれる単一のPNGファイルに組み合わせる別のアプローチです。このような「スプライト」は、指定された要素のすべての視覚的状態を次々に配置します。スプライトを使用してユーザインターフェイス要素をスタイル設定する場合、CSS内のすべての異なる状態に対して同じスプライト画像が参照されます。また、background-positionプロパティは、「スプライト」イメージのどの部分を使用するかを指定するために各状態に対して使用されます。「スプライト」イメージは、適切な方法で構築できます。通常、ビューアは垂直に積み重ねられます。

次に、同じホットスポットアイコンのスタイル設定に関する「スプライト」ベースの例を示します。

.s7carouselviewer .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
background-position: -0px -56px; width: 56px; height: 56px;
}
.s7carouselviewer .s7imagemapeffect .s7icon:hover {
background-position: -0px -0px; width: 56px; height: 56px;
}

スタイルに関する一般的な注意事項とアドバイス section-95855dccbbc444e79970f1aaa3260b7b

CSSを使用してビューアのユーザインターフェイスをカスタマイズする場合、!IMPORTANTルールの使用は、ビューア要素のスタイル設定に対してサポートされません。特に、ビューアまたはビューアSDKが提供するデフォルトのスタイル設定や実行時のスタイル設定を上書きする場合は、!IMPORTANTルールを使用しないでください。この理由は、適切なコンポーネントの動作に影響を与える可能性があるからです。代わりに、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

ビデオ画像ビューアに適用されるユーザーインターフェイス要素リファレンスドキュメントを次に示します。

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8