eCatalog ecatalog

eCatalog Viewer は、電子パンフレットをスプレッド別またはページ別にスプレッド別に表示するカタログ ビューアです。 eCatalog を使用すると、ユーザーは追加のユーザーインターフェイス要素または専用のサムネールモードを使用してカタログ内を移動できます。 ユーザーは、すべてのページをズームインして詳細を確認することもできます。

ビューアのタイプは 507 です。

​ システム要件と前提条件 ​ を参照してください。

このビューアは ecatalog で機能し、オプションの画像マップとソーシャル共有ツールをサポートしています。 ズームツール、カタログナビゲーションツール、全画面表示のサポート、サムネール、オプションの「閉じる」ボタンを備えています。 このビューアでは、ソーシャル共有ツール、印刷、ダウンロード、お気に入りもサポートされています。 デスクトップおよびモバイルデバイスで動作するように設計されています。

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?asset=Viewers/Pluralist

eCatalog ビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

eCatalog ビューアは、実行時にビューアによってダウンロードされるメインのJavaScript ファイルと一連のヘルパーファイル（1 つのJavaScriptに、この特定のビューアで使用されるすべてのビューア SDK コンポーネント、アセット、CSS が含まれます）を表します

eCatalog ビューアは、IS-Viewers に付属する実稼動用のHTML ページを使用してポップアップモードで使用することも、ドキュメント化された API を使用して対象の web ページに統合する埋め込みモードで使用することもできます。

設定とスキニングは、他のビューアと同様です。 すべてのスキニングは、カスタム CSS を使用して行います。

​ すべてのビューアに共通のコマンドリファレンス – 設定属性 ​ および ​ すべてのビューアに共通のコマンドリファレンス - URL を参照してください

eCatalog ビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

eCatalog ビューアでは、他のモバイルアプリケーションに共通する次のタッチジェスチャーをサポートしています。

カタログページ間を移動するための現実的なページ反転アニメーション効果を有効にすることができます。 このような場合、ユーザーはページの隅を長押ししてドラッグし、ページを反転させることができます。

このビューアは、タッチスクリーンとマウスを備えた Windows デバイスでのタッチ入力とマウス入力の両方もサポートしています。 ただし、このサポートは、Chrome、Internet Explorer 11、Edgeの web ブラウザーのみに制限されます。

このビューアは、​ キーボードのアクセシビリティとナビゲーション ​ で説明されているように、完全にキーボードでアクセスできます。

eCatalog ビューアを使用したソーシャルメディア共有ツール section-eb575084a99647c3a9591f439f40b412

eCatalog ビューアでは、ソーシャル共有ツールをサポートしています。 これらは、ユーザーがクリックまたはタップすると共有ツールバーに展開されるメインコントロールバーのボタンとして使用できます。

共有ツールバーには、サポートされている共有チャネルのタイプ（Facebook、Twitter、メール共有、埋め込みコード共有、リンク共有など）ごとのアイコンが含まれています。 メール共有、埋め込み共有、リンク共有の各ツールがアクティベートされると、ビューアは対応するデータ入力フォームを含むモーダルダイアログボックスを表示します。 Facebook または Twitter が呼び出されると、ビューアはソーシャルサービスからの標準の共有ダイアログにユーザーをリダイレクトします。 Web ブラウザーのセキュリティ制限により、共有ツールは全画面表示モードでは使用できません。

eCatalog ビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

Web ページによって、ビューアの動作に対するニーズは異なります。 選択するとビューアが別のブラウザーウィンドウで開くリンクが、web ページに表示される場合があります。 それ以外の場合は、ホスティングページにビューアを直接埋め込む必要があります。 後者の場合、web ページが静的なページレイアウトになっている可能性や、異なるデバイスや異なるブラウザーウィンドウサイズに異なる表示を行うレスポンシブデザインが使用されている可能性があります。 これらのニーズに対応するために、ビューアでは 3 つの主要な操作モード（ポップアップ、固定サイズの埋め込み、レスポンシブデザインの埋め込み）をサポートしています。

ポップアップモードについて

ポップアップモードでは、ビューアは別の web ブラウザーウィンドウまたはタブで開きます。 ブラウザーのサイズが変更された場合や、モバイルデバイスの向きが変更された場合に、ブラウザーウィンドウ領域全体を使用して調整が行われます。

ポップアップモードは、モバイルデバイスで最も一般的です。 Web ページは、JavaScript呼び出し、HTML要素 window.open() の適切な設定、またはその他の適切なメソッド A 使用して、ビューアを読み込みます。

ポップアップ操作モードには、標準のHTML ページを使用することをお勧めします。 この場合、eCatalogViewer.html という名前で、標準の IS-Viewers デプロイメントの html5/ サブフォルダー内に配置されます。

<s7viewers_root>/html5/eCatalogViewer.html

カスタム CSS を適用すると、視覚的にカスタマイズできます。

次に、新しいウィンドウでビューアを開くHTML コードの例を示します。

<a href="https://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?asset=Viewers/Pluralist" target="_blank">Open popup viewer</a>

固定サイズ埋め込みモードとレスポンシブデザイン埋め込みモードについて

埋め込みモードでは、ビューアが既存の web ページに追加されます。これには、ビューアに関連しない顧客コンテンツが既に含まれている場合があります。 閲覧者は通常、Web ページの不動産の一部のみを占有します。

主なユースケースは、デスクトップまたはタブレットデバイス向けの web ページと、デバイスタイプに応じて自動的にレイアウトを調整するレスポンシブデザインのページです。

固定サイズの埋め込みは、初回読み込み後にビューアのサイズが変更されない場合に使用されます。 この方法は、静的なレイアウトを持つ web ページに最適です。

レスポンシブデザインの埋め込みは、コンテナコンポー DIV ントのサイズ変更に応じて、実行時にビューアのサイズを変更する必要があることを前提としています。 最も一般的なユースケースは、柔軟なページレイアウトを使用する web ページにビューアを追加する場合です。

レスポンシブデザインの埋め込みモードでは、web ページのコンテナコンポー DIV ントのサイズがどのように調整されるかに応じて、ビューアの動作が異なります。 Web ページでコンテナ DIV の幅のみが設定され、高さが制限されない場合、ビューアは、使用されるアセットの縦横比に応じて自動的に高さを選択します。 この機能により、アセットが側面にパディングを入れずに、ビューに完全に収まります。 このユースケースは、Bootstrapや Foundation などのレスポンシブレイアウトフレームワークを使用した web ページで最も一般的です。

そうでない場合、web ページでビューアのコンテナ DIV の幅と高さの両方が設定されていると、ビューアはその領域だけを埋め、web ページレイアウトが提供するサイズに従います。 良い例は、ビューアをモーダルオーバーレイに埋め込む場合です。この場合、オーバーレイは web ブラウザーのウィンドウサイズに応じてサイズが調整されます。

固定サイズ埋め込み

Web ページにビューアを追加するには、次の手順を実行します。

<s7viewers_root>/html5/js/eCatalogViewer.js

ビューアがAdobe Dynamic Media Classic サーバーの 1 つにデプロイされ、同じドメインから提供される場合は、相対パスを使用できます。 そうでない場合は、IS-Viewers がインストールされているAdobe Dynamic Media Classic サーバーの 1 つへのフルパスを指定します。

相対パスは次のようになります。

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogViewer.js"></script>

高さが制限されないレスポンシブデザインの埋め込み

レスポンシブデザインの埋め込みを使用すると、通常、web ページには、ビューアのコンテナ DIV ージの実行時サイズを指定する何らかの柔軟なレイアウトが配置されます。 この例では、web ページで、ビューアのコンテナ DIV ージの高さを制限せずに、web ブラウザーのウィンドウサイズの 40% を使用するとします。 生成される web ページのHTML コードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

このようなページにビューアを追加する方法は、固定サイズの埋め込みに似ています。唯一の違いは、ビューアのサイズを明示的に定義する必要がないことです。

上記の手順はすべて、固定サイズの埋め込みと同じです。 コンテナ DIV を既存の「holder」 DIV に追加します。 次のコードは完全な例です。 ブラウザーのサイズを変更したときのビューアのサイズの変化や、ビューアの縦横比がアセットにどのように一致するかを確認できます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var eCatalogViewer = new s7viewers.eCatalogViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

次のページの例では、高さが制限されないレスポンシブデザインの埋め込みについて、より現実的なユースケースを示します。

​ ライブデモ ​

幅と高さが定義された柔軟なサイズの埋め込み

幅と高さが定義されたフレキシブルサイズの埋め込みでは、web ページのスタイル設定が異なります。 つまり、「ホルダー」 DIV ージに両方のサイズを提供し、ブラウザーウィンドウの中央に配置します。 また、Web ページでは、HTML 要素と BODY 要素のサイズが 100% に設定されます。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

残りの埋め込みステップは、高さが制限されないレスポンシブデザインの埋め込みと同じです。 結果の例を次に示します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var eCatalogViewer = new s7viewers.eCatalogViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

Setter ベースの API を使用した埋め込み

JSON ベースの初期化を使用する代わりに、設定ベースの API および no-args コンストラクターを使用することができます。 この API コンストラクターはパラメーターを取らず、setContainerId()、setParam()、setAsset() の API メソッドを使用して、個別のJavaScript呼び出しで設定パラメーターを指定します。

次の例は、setter ベースの API を使用した固定サイズの埋め込みを示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogViewer.js"></script>
<style type="text/css">
#s7viewer.s7ecatalogviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var eCatalogViewer = new s7viewers.eCatalogViewer();
eCatalogViewer.setContainerId("s7viewer");
eCatalogViewer.setParam("serverurl", "https://s7d1.scene7.com/is/image/");
eCatalogViewer.setAsset("Viewers/Pluralist");
eCatalogViewer.init();
</script>
</body>
</html>