画像コンポーネント image-component

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

使用方法 usage

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

コンテンツ作成者は、編集ダイアログを使用して、切り抜きの適用や画像の回転などの画像アセットを編集できます。

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

バージョンと互換性 version-and-compatibility

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

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

コンポーネントのバージョン
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v3
-
互換性あり
互換性あり
v2
互換性あり
互換性あり
互換性あり
v1
互換性あり
互換性あり
互換性あり

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

レスポンシブ機能 responsive-features

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

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

TIP
デフォルトでは、画像コンポーネントはアダプティブ画像サーブレットを利用します。仕組みについて詳しくは、アダプティブ画像サーブレットを参照してください。

Dynamic Media サポート dynamic-media

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

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

次世代の Dynamic Media サポート next-gen-dm

画像コンポーネント(リリース 2.23.2 以降)は、次世代の Dynamic Media リモートアセットをサポートします。

設定が完了すると、リモートの次世代の Dynamic Media サービスから画像コンポーネント用のアセットを選択できます。

SVG のサポート svg-support

画像コンポーネントは Scalable Vector Graphics(SVG)をサポートしています。

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

セキュリティ security

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

コンポーネント出力のサンプル sample-component-output

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

技術的詳細 technical-details

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

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

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

編集ダイアログ edit-dialog

編集ダイアログでは、コンテンツ作成者は画像の切り抜きおよび画像のズームを行えます。

Dynamic Media を有効にしているか、次世代の Dynamic Media の機能を有効にしているかによって、画像の編集に使用できるオプションが異なります。

標準のアセット編集 standard-assets

標準の AEM アセットを編集している場合は、画像コンポーネントのコンテキストメニューで「編集」アイコンをクリックします。

画像コンポーネントの編集ダイアログ

  • 切り抜きを開始

    「切り抜きを開始」アイコン

    このオプションを選択すると、定義済みの切り抜き比率のドロップダウンが開きます。

    • 元のアセットを表示するには、オプション「トリミングを削除」を選択します。

    切り抜きオプションを選択したら、青色のハンドルを使用して画像上の切り抜きのサイズを調整します。

    切り抜きツールオプション

  • 右に回転

    「右に回転」アイコン

    画像を右(時計回り)に 90° 回転させるには、このオプションを使用します。

  • ズームをリセット

    「ズームをリセット」アイコン

    画像が既にズームされている場合にこのオプションを使用すれば、ズームレベルがリセットされます。

  • ズームスライダーを開く

    「ズームスライダーを開く」アイコン

    画像のズームレベルを制御するためのスライダーを表示するには、このオプションを使用します。

    ズームスライダーコントロール

インプレースエディターを使用して画像を変更することもできます。スペース上の制限のため、インラインで使用できるのは基本的なオプションのみです。すべての編集オプションを使用したい場合は、フルスクリーンモードを使用してください。

画像インプレース編集のオプション

NOTE
GIF 画像の画像編集操作はサポートしていません。編集モードで GIF に対して行われた変更は、一切保持されません。

Dynamic Media のアセット編集 dynamic-media-assets

Dynamic Media の機能を有効にしている場合は、画像自体の編集をアセットコンソールで実行する必要があります。

次世代の Dynamic Media のアセット編集 next-gen-dm-assets

次世代の Dynamic Media を設定している場合は、コンポーネントのコンテキストメニューで「スマート切り抜き」オプションを使用できます。

スマート切り抜き

ダイアログを使用して、スマート切り抜きを調整します。

スマート切り抜きダイアログ

TIP
スマート切り抜きについて詳しくは、機能に関するこのビデオをご覧ください。

設定ダイアログ configure-dialog

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

「アセット」タブ asset-tab

画像コンポーネントの設定ダイアログの「アセット」タブ

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

  • 画像アセット - 「ページからアイキャッチ画像を継承」を選択している場合は、自動的に入力されます。選択を解除し、次のオプションを設定して画像を手動で定義します。

    • ローカルファイルシステムからアップロードするには、アセットブラウザーからアセットをドロップするか、「参照」オプションをタップします。

    • 現在選択されている画像を選択解除するには、「クリア」をタップまたはクリックします。

    • アセットブラウザーを開いて画像を選択するには、「選択」をタップまたはクリックします。

      • 次世代の Dynamic Media の機能が有効になっている場合、アセットを選択する次の複数のオプションがあります。

        • ローカル:ローカルの AEM アセットライブラリから選択します。
        • リモート:AEM インスタンスの外部にある Dynamic Media ライブラリから選択します。
    • アセットエディターでアセットのレンディションを管理するには、「編集」をタップまたはクリックします。

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

    • ページから代替テキストを継承 - このオプションでは、DAM における dc:description メタデータのリンク先アセット値の代替説明を使用します。アセットがリンクされていない場合は現在のページの代替説明を使用します。
  • 代替テキストを提供しない - 画像が単なる装飾画像である場合や、ページへの追加情報を伝えるものでない場合に、スクリーンリーダーなどの支援テクノロジーで画像を無視するように指定します。

「メタデータ」タブ metadata-tab

画像コンポーネントの設定ダイアログの「メタデータ」タブ

  • プリセットの種類 - 使用可能な画像プリセットの種類(画像プリセット ​または​ スマート切り抜き)を定義します。これは、Dynamic Media 機能が有効な場合にのみ使用できます。

    • 画像プリセット - 「画像プリセット」の「プリセットタイプ」を選択すると、ドロップダウンの「画像プリセット」が使用可能で、利用可能な Dynamic Media プリセットから選択できます。これは、選択したアセットに対してプリセットが定義されている場合にのみ使用できます。
    • スマート切り抜き - スマート切り抜き ​の「プリセットタイプ」が選択されている場合、ドロップダウンの​ レンディション ​を使用して、選択したアセットの使用可能なレンディションから選択することができます。これは、選択したアセットに対してレンディションが定義されている場合にのみ使用できます。
    • 画像修飾子 - プリセットタイプ ​が選択されているかどうかに関係なく、ここで、& で区切られた、追加の Dynamic Media の画像サービングコマンドを定義できます。
  • キャプション - 画像に関する追加情報。デフォルトでは画像の下に表示されます。

    • DAM からキャプションを取得 - オンにすると、DAM の dc:title メタデータの値が画像のキャプションテキストに設定されます。
    • キャプションをポップアップとして表示 - オンにした場合、キャプションは画像の下には表示されなくなり、画像の上にマウスポインターを置いたときに一部のブラウザーでポップアップとして表示されるようになります。
  • リンク - 画像を別のリソースにリンクします。

    • 別の AEM リソースにリンクする場合は、選択ダイアログを使用します。
    • AEM リソースにリンクしない場合は、絶対 URL を入力します。絶対 URL 以外は、AEM を基準とした相対パスとして解釈されます。
    • リンクを新しいタブで開く - このオプションを使用すると、リンクは新しいブラウザーウィンドウで開きます。
  • ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS およびデータレイヤーのトラッキングに影響を与える可能性があります。
TIP
スマート切り抜き ​と​ 画像プリセット ​は、相互に排他的なオプションです。スマート切り抜きレンディションと共に画像プリセットを使用する必要がある場合、作成者は​ 画像修飾子 ​を使用して手動でプリセットを追加する必要があります。

「スタイル」タブ styles-tab-edit

画像コンポーネントの編集ダイアログの「スタイル」タブ

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

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

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

デザインダイアログ design-dialog

「メイン」タブ main-tab

画像コンポーネントのデザインダイアログの「メイン」タブ

  • DM 機能を有効化 - オンにすると、Dynamic Media 機能を使用できます。

    • このオプションは、環境で Dynamic Media が有効になっている場合にのみ表示されます。
  • Web に最適化された画像を有効にする - オンにすると、web に最適化された画像配信サービスは WebP 形式で画像を配信し、画像のサイズを平均で 25%削減します。

    • このオプションは、AEMaaCS でのみ使用できます。
    • オフにした場合や web に最適化された画像配信サービスを使用できない場合は、アダプティブ画像サーブレットが使用されます。
  • 遅延読み込みを無効にする - オンにすると、コンポーネントは遅延読み込みなしですべての画像をプリロードします。

  • 画像は装飾画像 - ページへの画像コンポーネントの追加時に装飾画像オプションが自動的に有効化されるかどうかを定義します。

  • DAM から代替テキストを取得 - ページへの画像コンポーネントの追加時に 、DAM から代替テキストを取得するオプションが自動的に有効化されるかどうかを定義します。

  • DAM からキャプションを取得 - ページへの画像コンポーネントの追加時に、DAM からキャプションを取得するオプションが自動的に有効化されるかどうかを定義します。

  • キャプションをポップアップとして表示 - ページへの画像コンポーネントの追加時に、画像のキャプションをポップアップとして表示するオプションが自動的に有効化されるかどうかを定義します。

  • 幅をサイズ変更 - この値は、DAM アセットであるベース画像の幅のサイズ変更に使用されます。

    • 画像の縦横比は維持されます。
    • 値が画像の実際の幅より大きい場合、この値は無効です。
    • この値は、SVG 画像には無効です。

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

  • - 画像の幅(ピクセル単位)のリストを定義でき、コンポーネントは、ブラウザーサイズに基づいて最適な幅を自動的に読み込みます。

    • 別のサイズを追加するには、「追加」ボタンをタップまたはクリックします。

      • サイズの順序を並べ替えるには、グラブハンドルを使用します。
      • 幅を削除するには、削除 ​アイコンを使用します。
    • デフォルトでは、画像の読み込みは、画像が表示される時点まで遅延されます。

      • ページ読み込み時に画像を読み込むには、オプション「遅延読み込みを無効にする」を選択します。
  • JPEG 画質 - 変換(拡大/縮小や切り抜きなど)が行われる JPEG 画像の品質係数(0~100 パーセントで指定)。

TIP
幅を慎重に定義してレンディションの選択を最適化するためのヒントについては、アダプティブ画像サーブレットのドキュメントを参照してください。

「スタイル」タブ styles-tab

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

Adobe Client Data Layer data-layer

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c