ズームビューアのすべての視覚的なカスタマイズと、ほとんどの動作のカスタマイズは、カスタムCSSを作成することで行います。
推奨されるワークフローとして、適切なビューアの初期設定のCSSファイルを別の場所にコピーし、カスタマイズして、カスタマイズしたファイルの場所をstyle=
コマンドで指定します。
初期設定のCSSファイルは、次の場所にあります。
<s7_viewers_root>/html5/ZoomViewer_light.css
このビューアには、「ライト」と「ダーク」のカラースキームに対応する2つのCSSファイルが付属し、すぐに使用できます。 初期設定では「ライト」バージョンが使用されますが、次の標準CSSを使用して「ダーク」バージョンに切り替えることができます。
<s7_viewers_root>/html5/ZoomViewer_dark.css
カスタムのCSSファイルには、初期設定のCSSファイルと同じクラス宣言が含まれている必要があります。 クラス宣言を省略した場合、ビューアは正常に機能しません。ビューアには、ユーザインターフェイス要素の初期設定のスタイルが組み込まれていません。
カスタムCSSルールを指定する別の方法は、Webページ上またはリンクされたいずれかの外部CSSルール内で、埋め込みスタイルを直接使用することです。
カスタムCSSを作成する場合、ビューアはコンテナのDOM要素に.s7zoomviewer
クラスを割り当てることに注意してください。 style=
コマンドによって渡された外部CSSファイルを使用する場合は、CSSルールの子孫セレクターで.s7zoomviewer
クラスを親クラスとして使用します。 Webページ上で埋め込みスタイルを使用する場合、このセレクターを次のようにコンテナのDOM要素のIDで修飾します。
#<containerId>.s7zoomviewer
CSSで様々なデバイスや埋め込みサイズをターゲットして、ユーザーのデバイスや特定のWebページのレイアウトに応じてコンテンツの表示を変えることができます。 例えば、レイアウト、ユーザインターフェイス要素のサイズおよびアートワークの解像度を変えることができます。
ビューアでは、レスポンシブデザインCSSの作成メカニズムが2つサポートされています。CSSマーカーと標準のCSSメディアクエリ これらは、個別にも、一緒にも使用できます。
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ピクセルに設定します。 また、ビューアのサイズが非常に小さくなると、ボタンは完全に非表示になります。
.s7zoomviewer.s7mouseinput .s7zoominbutton {
width:28px;
height:28px;
}
.s7zoomviewer.s7touchinput .s7zoominbutton {
width:56px;
height:56px;
}
.s7zoomviewer.s7size_small .s7zoominbutton {
visibility:hidden;
}
ピクセル密度の異なるターゲットデバイスをデバイスに適用するには、CSSメディアクエリを使用する必要があります。 以下のメディアクエリブロックには、高密度画面に固有のCSSが含まれます。
@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}
レスポンシブデザインCSSを構築する最も柔軟性の高い方法は、CSSマーカーを使用することです。デバイスの画面サイズだけでなく、実際のビューアサイズもターゲットできるので、レスポンシブデザインレイアウトに便利です。
初期設定のビューアCSSファイルを、CSSマーカーアプローチの例として使用できます。
CSSメディアクエリ
デバイスの検出は、純粋なCSSメディアクエリを使用して行うこともできます。 特定のメディアクエリブロック内に含まれるすべては、対応するデバイスで実行された場合にのみ適用されます。
モバイルビューアに適用される場合、4つのCSSメディアクエリが使用されます。これらのメディアはCSS内で次に示す順に定義されます。
すべてのタッチデバイスに固有のルールのみを含める。
@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) 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:9in) and (max-device-height:9in)
{
}
高解像度画面の携帯電話に固有のルールのみを含める。
@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を次のように整理する必要があります。
各メディアクエリでビューアのCSS全体を重複する必要はありません。 特定のデバイスに固有のプロパティのみがメディアクエリ内で再定義されます。
多くのビューアユーザインターフェイス要素は、ビットマップアートワークを使用してスタイル設定され、複数の異なる表示状態を持ちます。 良い例として、通常は少なくとも3つの状態を持つボタンが挙げられます。「up」、「over」および「down」 各ステートには、独自のビットマップアートワークを割り当てる必要があります。
従来のスタイル設定手法では、CSSはユーザインターフェイス要素の状態ごとに、サーバー上の個々の画像ファイルへの個別の参照を持ちます。 以下は、ズームインボタンのスタイル設定に使用するCSSの例です。
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-image:url(images/v2/ZoomInButton_dark_up.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-image:url(images/v2/ZoomInButton_dark_over.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-image:url(images/v2/ZoomInButton_dark_down.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-image:url(images/v2/ZoomInButton_dark_disabled.png);
}
このアプローチの欠点は、エンドユーザーが要素との初回のインタラクション時にちらつきや遅延が発生することです。 このアクションは、新しい要素状態の画像アートワークがまだダウンロードされていないために発生します。 また、このアプローチは、サーバーへのHTTP呼び出しの数が増えたので、パフォーマンスに若干悪影響を及ぼす場合があります。
CSSスプライトは、異なるアプローチで、すべての要素状態の画像アートワークを「スプライト」と呼ばれる単一のPNGファイルに結合します。 このような「スプライト」は、指定された要素のすべての視覚的な状態を次々に配置します。 スプライトを使用してユーザーインターフェイス要素をスタイル設定する場合、CSSのすべての異なる状態に対して、同じスプライト画像が参照されます。 また、background-position
プロパティは、「スプライト」イメージのどの部分を使用するかを指定するために各状態に使用されます。 「スプライト」画像は、適切な方法で構成できます。 通常、ビューアは縦に並べられます。 下の例は、「スプライト」ベースで、上から同じズームインボタンのスタイル設定を行った例です。
.s7zoomviewer .s7zoominbutton[state] {
background-image: url(images/v2/ZoomInButton_dark_sprite.png);
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-position: -84px -560px;
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-position: -56px -560px;
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-position: -28px -560px;
}
.s7zoomviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-position: -0px -560px;
}
!IMPORTANT
ルールの使用はサポートされていません。 特に、!IMPORTANT
ルールは、ビューアまたはビューアSDKが提供するデフォルトまたは実行時のスタイル設定を上書きする場合には使用しないでください。 これは、適切なコンポーネントの動作に影響を与える可能性があるためです。 代わりに、CSSセレクターを適切な仕様で使用して、このリファレンスガイドに記載されているCSSプロパティを設定する必要があります。background-image
プロパティを使用してユーザインターフェイス要素に割り当てます。width
プロパティとheight
プロパティは、論理サイズを定義します。 background-image
に渡されるビットマップのサイズは論理サイズに影響しません。-webkit-background-size:contain
プロパティを適用して、背景を、論理ユーザーインターフェイス要素のサイズまで縮小します。display:none
を追加します。rgba(R,G,B,A)
の形式を使用します。 それ以外の場合は、#RRGGBB
の形式を使用できます。ビデオビューアに適用されるユーザーインターフェイス要素リファレンスドキュメントを次に示します。