ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

サイトコンテンツでの適用された画像の使用

Adaptive Mediaはバックグラウンドで動作し、Liferay DXPにアップロードされた画像に対して複数の解像度を作成します。ブログ、ウェブコンテンツ、コンテンツページで使用する場合、対象画面サイズに基づいて最適な解像度を自動的に選択します。これらの改変画像をコンテンツに組み込む方法を理解することは、パフォーマンスを最適化するために不可欠です。

各改変画像は、HTML 内で data-fileentryid 属性によって識別され、コンテンツを表示すると最新の改変画像に更新されます。これにより、以前に作成されたコンテンツであっても、常に最新の画像が表示されることが保証されます。

注

画像のアダプティブ・メディアを無効にすると、オリジナルの画像がブログ・エントリー、ウェブ・コンテンツ記事、コンテンツ・ページに表示されます。

適用された画像をコンテンツに含める

コンテンツページに画像を追加すると、Adaptive Media は直接選択した画像とマッピングされた画像の両方をサポートします。ブログとウェブコンテンツでは、 ブログ画像、 ドキュメントとメディア、および アップロード タブから追加された画像にのみ適用されます。

注

加工した画像はブログ記事の本文にのみ適用でき、カバー画像には適用できません。

ドラッグ＆ドロップでブログ記事に追加された画像は、自動的にブログ画像リポジトリにアップロードされ、調整された上で、ブログ記事の内容に組み込まれます。 HTML を調べると、画像に <img> タグと data-fileentryid 属性が含まれていることが確認できます。

ウェブコンテンツ記事の場合、アダプティブメディアはファイルセレクターの ドキュメントとメディア タブから追加された画像のみで機能します。ブログとは異なり、アダプティブメディアは、ドラッグアンドドロップでWebコンテンツ記事に追加された画像には適用された画像を配信しません。

警告

Adaptive Media は、ブログ記事とメディアコンテンツ記事の両方のファイルセレクターの URL タブから追加された画像では動作しません。これは、画像がURLから直接リンクされているため、Adaptive Mediaがコピーする画像ファイルが提供されていないためです。

ブログエントリーまたはWebコンテンツ記事のHTMLには、書き込み中に<img>タグとdata-fileentryid属性が表示されます。コンテンツが表示されると、HTMLは自動的に置き換えられ、以下のような表示になります。

<picture>

   <source media="(max-width:850px)" srcset="/o/adaptive-media/image/44147/med/photo.jpeg">

   <source media="(max-width:1200px) and (min-width:850px)" srcset="/o/adaptive-media/image/44147/hd/photo.jpeg">

   <source media="(max-width:2000px) and (min-width:1200px)" srcset="/o/adaptive-media/image/44147/ultra-hd/photo.jpeg">

   <img src="/documents/20140/0/photo.jpeg/1992-9143-85d2-f72ec1ff77a0">

</picture>

この例では、解像度がそれぞれ異なる3つの異なる画像を使用しています。 sourceタグは、これらの各画像を定義します。また、元の画像（img）は、適用された画像が利用できない場合のフォールバックとして使用されることに注意してください。

構造化されたWebコンテンツでの適用された画像の使用

構造化ウェブコンテンツで適応画像を使用するには、コンテンツ作成者はウェブコンテンツの構造に画像フィールドを手動で含める必要があります。その後、エディターの左側にある画像フィールドを選択することで、一致するテンプレートでその画像フィールドを参照することができます。テンプレートに含まれているImagecrrfという名前の画像フィールドのスニペットの例を次に示します。

<#if Imagecrrf.getData()?? && Imagecrrf.getData() !="">
   <img data-fileentryid="${Imagecrrf.getAttribute("fileEntryId")}" alt="${Imagecrrf.getAttribute("alt")}" src="${Imagecrrf.getData()}" />
</#if>

このスニペットには、アダプティブメディアが画像を適用された画像に確実に置き換えるためのdata-fileentryid属性が含まれています。結果のWebコンテンツのHTMLをエディターのコードビューで調べると、次のようなタグが表示されます。

<img data-fileentryid="37308" src="/documents/20143/0/photo.jpeg/85140258-1c9d-89b8-4e45-d79d5e262318?t=1518425" />

<img> タグに data-fileentryid 属性が付いていることに注目してください。アダプティブメディアは、ファイルエントリーIDを使用して、<img>要素を各解像度で使用可能な適用された画像を含む<picture>要素に自動的に置き換えます（上記の<picture>の例を参照）。