画像コンポーネント

コアコンポーネントの画像コンポーネントは、インプレース編集機能を備えたアダプティブな画像コンポーネントです。

使用方法

画像コンポーネントは、アダプティブ画像選択およびレスポンシブ動作を備えており、ページ訪問者に対する遅延読み込みや、コンテンツ作成者に対する簡単な画像の配置や切り抜きを提供します。

デザインダイアログでは、テンプレート作成者が、画像の幅や切り抜きの設定、追加の設定などを定義できます。コンテンツエディターは、設定ダイアログでアセットをアップロードまたは選択し、編集ダイアログで画像の切り抜きをおこなうことができます。画像を単純にインプレースで変更することもでき、非常に便利です。

レスポンシブ機能

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

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

バージョンと互換性

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

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

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

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

SVG のサポート

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

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

セキュリティ

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

注意

SVG のサポートには、AEM 内の新しい画像エディター機能をサポートするために、コアコンポーネントのリリース 2.1.0 以上と、AEM 6.4 の Service Pack 2 以降が必要です。

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

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

技術的詳細

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

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

メモ

コアコンポーネントリリース 2.1.0 の時点で、画像コンポーネントは schema.org microdata をサポートしています。

設定ダイアログ

画像コンポーネントには、標準の編集ダイアログデザインダイアログのほかに、画像自体の定義やその説明および基本プロパティの定義をおこなうための設定ダイアログも用意されています。

「アセット」タブ

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

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

「メタデータ」タブ

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

  • 画像は装飾画像
    画像が支援テクノロジーによって無視される場合(したがってその代替テキストが不要な場合)はオンにします。これは、装飾画像にのみ適用されます。

  • 代替テキスト
    視覚に障害のあるユーザー向けの、画像の意味や機能を示す代替テキスト。

    • DAM から代替テキストを取得 - オンにすると、DAM の dc:description メタデータの値が画像の代替テキストに設定されます。
  • キャプション
    画像に関する追加情報。デフォルトでは画像の下に表示されます。

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

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

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

編集ダイアログ

編集ダイアログでは、コンテンツ作成者は画像の切り抜き、画像のローンチマップの変更および画像のズームをおこなえます。

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

  • 切り抜きを開始

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

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

    • 独自の切り抜きを定義するには、オプション「フリーハンド」を選択します。
    • 元のアセットを表示するには、オプション「切り抜きを削除」を選択します。

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

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

  • 右に回転

    「右に回転」アイコン

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

  • 水平方向に反転

    「水平方向に反転」アイコン

    画像を水平方向に反転させる(y 軸を中心に 180° 回転させる)には、このオプションを使用します。

  • 垂直方向に反転

    「垂直方向に反転」アイコン

    画像を垂直方向に反転させる(x 軸を中心に 180° 回転させる)には、このオプションを使用します。

  • ズームをリセット

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

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

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

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

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

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

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

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

メモ

画像編集操作(切り抜き、反転、回転)は GIF 画像ではサポートされません。編集モードで GIF に対しておこなわれたそのような変更は、一切保持されません。

デザインダイアログ

デザインダイアログでは、コンテンツ作成者がこのコンポーネントの使用時に利用できる切り抜き、アップロード、回転の各オプションを、テンプレート作成者が定義することができます。

「メイン」タブ

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

さらに、作成者がページにコンポーネントを追加した際に自動的に無効化される一般的なコンポーネントオプションを定義できます。

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

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

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

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

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

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

  • UUID の追跡を無効化
    画像アセットの UUID の追跡を無効化する場合にオンにします。


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

    • 別のサイズを追加するには、「追加」ボタンをタップまたはクリックします。
      • サイズの順序を変更するには、グラブハンドルを使用します。
      • 幅を削除するには、削除​アイコンを使用します。
    • デフォルトでは、画像の読み込みは、画像が表示される時点まで遅延されます。
      • ページ読み込み時に画像を読み込むには、オプション「遅延読み込みを無効化」を選択します。
  • JPEG 画質
    変換(拡大 / 縮小や切り抜きなど)がおこなわれる JPEG 画像の品質係数(0 ~ 100 パーセントで指定)。

メモ

「JPEG 画質」オプションは、コアコンポーネントのリリース 2.2.0 以降で使用できます。

メモ

コアコンポーネントのリリース 2.2.0 以降では、画像コンポーネントが一意の UUID 属性 data-asset-id を画像アセットに追加するようになりましたが、これは、個々のアセットの閲覧数の追跡や分析を可能にするためです。

「機能」タブ

機能」タブでは、コンテンツ作成者がコンポーネントの使用時に利用できるオプション(アップロードオプション、向きのオプション、切り抜きオプションなど)を定義できます。

  • ソース

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

    コンテンツ作成者が自身のローカルコンピュータから画像をアップロードできるようにするには、オプション「ファイルシステムからのアセットのアップロードを許可」を選択します。コンテンツ作成者が AEM からしかアセットを選択できないようにするには、このオプションを選択解除します。

  • 向き

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

  • 回転
    コンテンツ作成者が
    右に回転」オプションを使用できるようにするには、このオプションを使用します。

  • 反転
    コンテンツ作成者が
    水平方向に反転」および「垂直方向に反転」オプションを使用できるようにするには、このオプションを使用します。

    注意

    反転」オプションはデフォルトでは無効になっています。これを有効にすると、画像コンポーネントの編集ダイアログで「水平方向に反転」および「垂直方向に反転」ボタンが表示されますが、この機能は現在 AEM でサポートされていないので、これらのオプションを使用しておこなわれた変更は一切保持されません。

  • 切り抜き

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

    コンテンツ作成者が編集ダイアログでコンポーネントの画像の切り抜きをおこなえるようにするには、オプション「切り抜きを許可」を選択します。

    • 定義済みの切り抜き縦横比を追加するには、「追加」をクリックします。
    • わかりやすい名前を入力します。この名前が「切り抜きを開始」ドロップダウンに表示されます。
    • 縦横比の数値を入力します。
    • 縦横比の順序を変更するには、ドラッグハンドルを使用します
    • 縦横比を削除するには、ごみ箱アイコンを使用します。
    注意

    AEM では、切り抜きの縦横比は「高さ / 幅」で定義されます。これは従来の定義である「幅 / 高さ」とは異なり、レガシー互換性のための設定です。UI には比率自体ではなく UI が表示されるので、比率にわかりやすい名前を付けていれば、コンテンツ作成者がこの違いに気付くことはありません。

「スタイル」タブ

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

アダプティブ画像サーブレット

画像コンポーネントは、コアコンポーネントのアダプティブ画像サーブレットを使用します。アダプティブ画像サーブレットは、画像処理とストリーミングを担当し、開発者はコアコンポーネントのカスタマイズに活用できます。

メモ

Last-Modified ヘッダーを介した条件付き要求は、アダプティブ画像サーブレットでサポートされますが、Last-Modified ヘッダーのキャッシュを Dispatcher で有効にする必要があります

AEM プロジェクトアーキタイプのサンプル Dispatcher 設定には、既にこの設定が含まれています。

このページ