ドキュメント Dynamic Media画像サービングおよび画像レンダリング API

レスポンシブ画像ライブラリの使用 using-responsive-image-library

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

レスポンシブ画像ライブラリを web ページに追加し、このライブラリで既存の画像を管理するには、次の手順を実行します。

レスポンシブ画像ライブラリを使用するには

プリセットと共にレスポンシブ画像ライブラリを使用する場合は、Dynamic Media Classicで画像プリセットを作成します。

レスポンシブ画像ライブラリで使用する画像プリセットを定義する場合は、画像サイズに影響を与える設定（wid=、hei=、scl= など）を使用しないでください。画像プリセットでは、「サイズ」フィールドを指定しないでください。代わりに、空の値のままにします。
ライブラリのJavaScript ファイルを Web ページに追加します。

ライブラリ API を使用する前に、responsive_image.js を含めてください。このJavaScript ファイルは、標準の IS-Viewers デプロイメントの libs/ サブフォルダーにあります。

<s7viewers_root>/libs/responsive_image.js

既存の画像を設定します。

ライブラリは、操作対象の画像インスタンスから特定の設定属性を読み取ります。このような画像に対して s7responsiveImage API 関数が呼び出される前に属性を定義します。

既存の画像 URL を data-src 属性に配置することをお勧めします。次に、既存の src 属性を、1x1GIF画像がデータ URI としてエンコードされるように設定します。これにより、読み込み時に web ページから送信される HTTP リクエストの数が減ります。ただし、SEO （検索エンジン最適化）が必要な場合は、画像インスタンスに title 属性を設定する方が良いでしょう。

次に、画像の属性を定義し data-breakpoints データ URI としてエンコードされた 1x1GIFを使用する例を示します。

code language-none
`<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">`

ライブラリが管理するすべての画像インスタンスに対して、s7responsiveImage API 関数を呼び出します。

ライブラリが管理するすべての画像インスタンスに対して、s7responsiveImage API 関数を呼び出します。そのような呼び出しの後、ライブラリは、web ページレイアウト内の IMG 要素の実行時サイズとデバイス画面の密度に応じて、元の画像を画像サービングからダウンロードされた画像に置き換えます。

次のコードは、画像に対して API 関数 s7responsiveImage 呼び出す例です。画像が responsiveImage の画像の ID であると仮定しています。

code language-none
`<script type="text/javascript"> s7responsiveImage(document.getElementById("responsiveImage")); </script>`

例 example-0509a0dd2a8e4fd58b5d39a0df47bd87

ライブラリは、Web ページ上の多数の画像インスタンスの同時操作をサポートしています。そのため、ライブラリで管理する各画像に対して、上記の手順 1 と 2 を繰り返します。

画像要素のサイズを柔軟に調整するには、web ページが責任を負います。レスポンシブ画像ライブラリ自体は、固定サイズの画像と「可変」画像を区別しません。固定サイズの画像に適用した場合、新しい画像は 1 回だけ読み込まれます。

次のコードは、レスポンシブ画像ライブラリによって管理される単一の流動画像を持つ単純な web ページの完全な例です。この例には、web ブラウザーのウィンドウサイズに合わせて画像を「レスポンシブ」にするための追加の CSS スタイルが含まれています。

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
  .container {
   width: 50%;
  }
  .fluidimage {
   max-width: 100%;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <img id="responsiveImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="200,400,600,800" class="fluidimage">
  </div>
  <script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/libs/responsive_image.js"></script>
  <script type="text/javascript">
   s7responsiveImage(document.getElementById("responsiveImage"));
  </script>
 </body>
</html>

スマート切り抜きの使用

AEM 6.4 とDynamic Media Viewers 5.9 では、次の 2 つのスマート切り抜きモードを使用できます。

手動 - ユーザー定義のブレークポイントと、対応する画像サービスコマンドは、画像要素の属性内で定義します。
スマート切り抜き – 計算されたスマート切り抜きレンディションは、配信サーバーから自動的に取得されます。最適なレンディションは、画像要素のランタイムサイズを使用して選択されます。

スマート切り抜きモードを使用するには、data-mode 属性を smart crop に設定します。以下に例を挙げます。

<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset"
data-mode="smartcrop">

関連する画像要素は、ブレークポイントが変更されたときに、実行時に s7responsiveViewer イベントをディスパッチします。

         responsiveImage.addEventListener("s7responsiveViewer", function (event) {
           var s7event = event.s7responsiveViewerEvent;
           if(s7event.type == "breakpointchanged") {
              console.log("New width: " + s7event.width);
              console.log("Old width: " + s7event.oldWidth);
           }
        });

recommendation-more-help

a26166cd-f2f4-45ce-996d-96a0f0d6cf49