e カタログ検索 ecatalog-search

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

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

ユーザは、カタログのコンテンツに対してキーワードベースまたはフレーズに基づく検索を行うこともできる。

ビューアータイプ 513。

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

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/

eCatalog Viewerの使用 section-e6c68406ecdc4de781df182bbd8088b4

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

ECatalog Search Viewerは、IS-Viewersを備えた実稼動対応のHTML ページを使用してポップアップモードで使用したり、埋め込みモードで使用したりできます。このページは、文書化されたAPIを使用してターゲット web ページに統合されます。

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

すべてのビューアに共通する​ コマンド参照 – 構成属性およびすべてのビューアに共通するコマンド参照 – URLを参照してください

eCatalog Search Viewerの操作 section-642e66ca38cd4032992840ec6c0b0cd2

eCatalog Search Viewerは、他のモバイルアプリケーションで一般的な次のタッチジェスチャーをサポートしています。

カタログページ間を移動する際に、リアルなページ反転アニメーション効果を有効にすることができます。 この場合、ユーザーはページの角を保持してドラッグし、ページを反転させることができます。

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

e カタログ検索ビューアを使用したソーシャルメディア共有ツール section-eb575084a99647c3a9591f439f40b412

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

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

ビューアの検索機能は、メインツールバーのルックグラスアイコンとして使用できます。 アイコンをクリックまたはタップすると、入力フィールドを含む検索パネルがアクティブになります。 キーワードまたはフレーズを入力してEnter キーを押すと、ビューアは検索結果をパネルにレンダリングし、見つかった単語をメインビューにハイライト表示します。

eCatalog Search Viewerの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

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

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

ポップアップモードでは、ビューアは別のweb ブラウザーウィンドウまたはタブで開きます。 ブラウザーのサイズが変更されたり、モバイルデバイスの向きが変更されたりすると、ブラウザーのウィンドウ領域全体が調整されます。

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

ポップアップ操作モードには、標準のHTML ページを使用することをお勧めします。 この場合はeCatalogSearchViewer.htmlと呼ばれ、標準のIS-Viewers デプロイメントのhtml5/ サブフォルダー内にあります。

<s7viewers_root>/html5/eCatalogSearchViewer.html

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

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

<a href="https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/" target="_blank">Open pop-up viewer</a>

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

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

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

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

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

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

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

固定サイズ埋め込み

次の操作を実行して、ビューアをweb ページに追加します。

<s7viewers_root>/html5/js/eCatalogSearchViewer.js

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

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

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogSearchViewer.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を既存の「ホルダー」 DIVに追加します。 次のコードは、完全な例です。 ブラウザーのサイズを変更するとビューアサイズがどのように変化するか、およびビューアの縦横比がアセットとどのように一致するかを確認できます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.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 eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/",
 "searchserverurl":"https://s7search1.scene7.com/s7search/"
}
}).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/eCatalogSearchViewer.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 eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/",
 "searchserverurl":"https://s7search1.scene7.com/s7search/"
}
}).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/eCatalogSearchViewer.js"></script>
<style type="text/css">
#s7viewer.s7ecatalogsearchviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer();
eCatalogSearchViewer.setContainerId("s7viewer");
eCatalogSearchViewer.setParam("serverurl", "https://s7d1.scene7.com/is/image/");
eCatalogSearchViewer.setParam("searchserverurl", "https://s7search1.scene7.com/s7search/");
eCatalogSearchViewer.setAsset("Viewers/Pluralist");
eCatalogSearchViewer.init();
</script>
</body>
</html>