画像コンポーネント

コアコンポーネントの画像コンポーネントは、アダプティブな画像コンポーネントです。

使用方法

画像コンポーネントは、アダプティブ画像選択やレスポンシブ動作の機能を備えているほか、ページ訪問者にとっては遅延読み込み、コンテンツ作成者にとっては画像の簡単な配置が可能になります。

デザインダイアログでは、画像の幅や追加の設定をテンプレート作成者が定義できます。コンテンツ編集者は、設定ダイアログでアセットをアップロードまたは選択できます。

バージョンと互換性

このドキュメントでは、画像コンポーネントの現在のバージョン（2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v3）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

レスポンシブ機能

画像コンポーネントには、すぐに使用可能な堅牢なレスポンシブ機能が用意されています。ページテンプレートレベルで、デザインダイアログを使用して、画像アセットのデフォルトの幅を定義できます。画像コンポーネントは、正確な幅を自動的に読み込み、ブラウザーウィンドウのサイズに合わせて表示します。ウィンドウのサイズが変更されると、画像コンポーネントは、その場で適切な画像サイズを動的に読み取ります。画像コンポーネントはコンテンツの読み取り用に最適化されているので、コンポーネント開発者はカスタムメディアのクエリ定義を気にかける必要がありません。

さらに、画像コンポーネントは、遅延読み込みをサポートし、ブラウザーで表示できるようになるまで、実際の画像アセットの読み込みを遅らせて、ページの応答性を高めます。

Dynamic Media のサポート

画像コンポーネント（リリース 2.13.0 現在）は、Dynamic Media アセットをサポートします。これらの機能を有効にすると、簡単なドラッグ＆ドロップで、または他の画像と同様にアセットブラウザーを使用して、Dynamic Media 画像アセットを追加する機能が提供されます。また、画像修飾子、画像プリセット、スマート切り抜きもサポートされます。

コアコンポーネントで構築された web エクスペリエンスは、Adobe Sensei を利用した、堅牢でパフォーマンスの高いクロスプラットフォームの豊富な Dynamic Media 画像機能を提供できます。

SVG のサポート

画像コンポーネントでは Scalable Vector Graphics（SVG）がサポートされています。

• DAM からの SVG アセットのドラッグ＆ドロップと、ローカルファイルシステムからの SVG ファイルのアップロード、はどちらもサポートされます。
• 元の SVG ファイルがストリーミングされます（変換はスキップされます）。
• SVG 画像の場合、画像モデルで「スマート画像」と「スマートサイズ」が空の配列に設定されます。

セキュリティ

セキュリティ上の理由から、元の SVG が画像エディターで直接呼び出されることは決してありません。<img src=“path-to-component”> 経由で呼び出されます。これにより、ブラウザーが SVG ファイルに埋め込まれた任意のスクリプトを実行するのを防ぎます。

コンポーネント出力のサンプル

画像コンポーネントを体験したり、その設定オプションの例や、HTML 出力や JSON 出力の例を確認したりするには、コンポーネントライブラリにアクセスしてください。

技術的詳細

画像コンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

画像コンポーネントは、schema.org のマイクロデータをサポートしています。

設定ダイアログ

画像コンポーネントには、画像自体の定義と、その説明および基本プロパティの定義を行うための設定ダイアログが用意されています。

「アセット」タブ

• ページからアイキャッチ画像を継承 - このオプションは、 リンクされたページのアイキャッチ画像を使用します。画像がリンクされていない場合は現在のページのアイキャッチ画像を使用します。

• アクセシビリティ用代替テキスト - このフィールドでは、視覚に障害のあるユーザー向けの画像説明を定義できます。

  • ページから代替テキストを継承 - このオプションでは、DAM における dc:description メタデータのリンク先アセット値の代替説明を使用します。アセットがリンクされていない場合は現在のページの代替説明を使用します。

• 画像アセット

  • アセットブラウザーからアセットをドロップするか、「参照」オプションをタップすると、ローカルファイルシステムからアップロードできます。
  • 現在選択されている画像を選択解除するには、「クリア」をタップまたはクリックします。
  • アセットエディターで​アセットのレンディションを管理​するには、「編集」をタップまたはクリックします。

• 代替テキストを提供しない - このオプションは、画像が単なる装飾画像である場合や、ページへの追加情報を伝えない場合に、スクリーンリーダーなどの支援テクノロジーで画像を無視するように指定します。

「メタデータ」タブ

• プリセットの種類 - 使用可能な画像プリセットの種類（画像プリセット​または​スマート切り抜き）を定義します。これは、Dynamic Media 機能が有効な場合にのみ使用できます。
  • 画像プリセット - 「画像プリセット」の「プリセットタイプ」を選択すると、「画像プリセット」ドロップダウンを使用して使用可能な Dynamic Media プリセットから選択できます。これは、選択したアセットに対してプリセットが定義されている場合にのみ使用できます。
  • スマート切り抜き - 「スマート切り抜き」の「プリセットタイプ」が選択されている場合、「レンディション」ドロップダウンを使用して、選択したアセットの使用可能なレンディションから選択できます。これは、選択したアセットに対してレンディションが定義されている場合にのみ使用できます。
  • 画像修飾子 - プリセットタイプ​が選択されているかどうかに関係なく、ここで、& で区切られた、追加の Dynamic Media の画像サービングコマンドを定義できます。
• キャプション - 画像に関する追加情報。デフォルトでは画像の下に表示されます。
  • DAM からキャプションを取得 - オンにすると、DAM の dc:title メタデータの値が画像のキャプションテキストに設定されます。
  • キャプションをポップアップとして表示 - オンにした場合、キャプションは画像の下には表示されなくなり、画像の上にマウスポインターを置いたときに一部のブラウザーでポップアップとして表示されるようになります。
• リンク - 画像を別のリソースにリンクします。
  • 別の AEM リソースにリンクする場合は、選択ダイアログを使用します。
  • AEM リソースにリンクしない場合は、絶対 URL を入力します。非絶対 URL は、AEM に対する相対 URL として解釈されます。
  • リンクを新しいタブで開く - このオプションを使用すると、リンクは新しいブラウザーウィンドウで開きます。
• ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
  • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
  • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
  • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「スタイル」タブ

画像コンポーネントでは、AEM スタイルシステムをサポートしています。

ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。

ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。

デザインダイアログ

「メイン」タブ

• DM 機能を有効化 - オンにすると、Dynamic Media 機能を使用できます。
  • このオプションは、環境で Dynamic Media が有効になっている場合にのみ表示されます。
• Web 最適化画像を有効にする - オンにすると、web に最適化された画像配信サービスは WebP 形式で画像を配信し、画像のサイズを平均で 25%削減します。
  • このオプションは、AEMaaCS でのみ使用できます。
  • オフにした場合や web に最適化された画像配信サービスを使用できない場合は、アダプティブ画像サーブレットが使用されます。
• 遅延読み込みを無効化 - オンにすると、コンポーネントは遅延読み込みなしですべての画像をプリロードします。
• 画像は装飾画像 - ページへの画像コンポーネントの追加時に装飾画像オプションが自動的に有効化されるかどうかを定義します。
• DAM から代替テキストを取得 - ページへの画像コンポーネントの追加時に 、DAM から代替テキストを取得するオプションが自動的に有効化されるかどうかを定義します。
• DAM からキャプションを取得 - ページへの画像コンポーネントの追加時に、DAM からキャプションを取得するオプションが自動的に有効化されるかどうかを定義します。
• キャプションをポップアップとして表示 - ページへの画像コンポーネントの追加時に、画像のキャプションをポップアップとして表示するオプションが自動的に有効化されるかどうかを定義します。
• 幅をサイズ変更 - この値は、DAM アセットであるベース画像の幅のサイズ変更に使用されます。
  • 画像の縦横比は維持されます。
  • 値が画像の実際の幅より大きい場合、この値は無効です。
  • この値は、SVG 画像には無効です。

画像の幅（ピクセル単位）のリストを定義でき、コンポーネントは、ブラウザーのサイズに基づいて最も適切な幅で自動的に読み込みます。これは、画像コンポーネントのレスポンシブ機能の重要な役割です。

• 幅 - 画像の幅（ピクセル単位）のリストを定義でき、コンポーネントは、ブラウザーサイズに基づいて最適な幅を自動的に読み込みます。
  • 別のサイズを追加するには、「追加」ボタンをタップまたはクリックします。
    • サイズの順序を変更するには、グラブハンドルを使用します。
    • 幅を削除するには、削除​アイコンを使用します。
  • デフォルトでは、画像の読み込みは、画像が表示される時点まで遅延されます。
    • ページ読み込み時に画像を読み込むには、オプション「遅延読み込みを無効化」を選択します。
• JPEG 画質 - 変換（拡大／縮小や切り抜きなど）が行われる JPEG 画像の品質係数（0 ～ 100 パーセントで指定）。

「スタイル」タブ

画像コンポーネントは、AEM スタイルシステムをサポートしています。

Adobe Client Data Layer

画像コンポーネントは、Adobe Client Data Layer をサポートしています。

Business.Adobe.com リソース