このリファレンス記事は、Liferay DXPのAdaptive Media機能を使用してWebページをデザインし、トラブルシューティングを行うお客様を対象としています。 コンテンツ制作者は、様々な理由でブラウザに組み込まれたツールを使ってWebページを検査することがよくあります。 彼らは、すべてのウェブ要素が意図した通りに機能していることを確認したい、あるいは、自分のページが業界標準（例えば、508条やWCAG）に準拠していることを確認したいと考えています。 ネイティブの Adaptive Media ウィジェットを使用した後に srcset の画像が違って見えても不思議ではありません。
基本的な設定はこんな感じです。
- 細長いイメージのあるWebコンテンツ記事を作成します。 (708px×1650pxの画像を使ってみました)
- コントロールパネル → 設定 → アダプティブメディアに移動します。
- 新しい画像解像度ルールを作成します。 高さ1000px以上の長尺画像はすべて1000pxにリサイズしてほしい。 ( )記号をクリックして、新しいルールを作成します。
- 以下のように入力してください。
- 名前: MaxHeight_1000px
- 最大幅 (px): {leave blank}: : {leave blank}
- 最大高さ (px): 1000
- をクリックしてを保存します。
- 3ドットアイコンをクリック → 残りのを適応 .
ステータスバーが100%になると、Webコンテンツ記事のプレビュー内の埋め込み画像のサイズが1000pxに変更されます。
次はサイトに行って、この記事を見てください。
- をクリックして、 コントロールパネルの リンクをサイトに移動します。 どのようなサイトを利用しても大丈夫です。
- サイトにページを追加します。
- 追加 ボタンをクリックします。
- ページにAsset Publisherポートレットを追加します。 先に作成したWebコンテンツが表示されます。
- 記事リンクをクリックすると画像が拡大します。
- 右側 画像の上をクリックし、 要素の検査 (Q) コマンドをクリックします。 これにより、インスペクタ機能が開きます。
のソースメディアを表示するために画像上にマウスを置いた場合、 のsrcset では1000pxと表示されているにもかかわらず、画像の元の寸法が表示されることがあることが指摘されていました。 同様に、トグルを使用して、どのデバイス（モバイルまたはデスクトップ）に基づいて異なるシミュレートされたビューを変更する場合、サムネイルのプレビューのサイズが変更されます。
決議
これは意図的な行動です。 問題は Adaptive Media ポートレットではなく、ブラウザにあります。 FirefoxやChromeで利用可能な開発者ツールには独自の設定があり、それはDXPの設定に影響を与える ではなく です。 下のスクリーンショットを見ると、プレビューサイズが1000pxに設定されていることがわかります。 これは先ほどの設定と同じです。
ウェブページの設計やトラブルシューティングは、面倒な作業になることがあります。 ウェブデザイナーは、LiferayのAdaptive Mediaポートレットは、所定の幅と高さに基づいて統一されたサムネイルのセットを生成するために存在することを保証することができます。