画像コンポーネント（v2）

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

使用方法

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

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

バージョンと互換性

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

レスポンシブ機能

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

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

Dynamic Media サポート

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

コアコンポーネントで構築された Web エクスペリエンスは、豊富で強力で高パフォーマンスなクロスプラットフォームの Dynamic Media 画像機能を特徴とします。

SVG のサポート

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

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

セキュリティ

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

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

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

技術的詳細

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

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

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

設定ダイアログ

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

「アセット」タブ

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

「メタデータ」タブ

• プリセットの種類 - 使用可能な画像プリセットの種類（画像プリセット​または​スマート切り抜き）を定義します。これは、Dynamic Media 機能が有効な場合にのみ使用できます。
  • 画像プリセット - 「画像プリセット」の「プリセットタイプ」を選択すると、「画像プリセット」ドロップダウンを使用して使用可能な Dynamic Media プリセットから選択できます。これは、選択したアセットに対してプリセットが定義されている場合にのみ使用できます。
  • スマート切り抜き - 「スマート切り抜き」の「プリセットタイプ」が選択されている場合、「レンディション」ドロップダウンを使用して、選択したアセットの使用可能なレンディションから選択できます。これは、選択したアセットに対してレンディションが定義されている場合にのみ使用できます。
  • 画像修飾子 - プリセットタイプ​が選択されているかどうかに関係なく、ここで、& で区切られた、追加の Dynamic Media の画像サービングコマンドを定義できます。
• 画像は装飾画像 - 画像が支援テクノロジーによって無視される場合（したがってその代替テキストが不要な場合）はオンにします。これは、装飾画像にのみ適用されます。
• 代替テキスト - 視覚に障害のあるユーザー向けの、画像の意味や機能を示す代替テキスト。
  • 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° 回転させる）には、このオプションを使用します。

• ズームをリセット

  

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

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

  

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

  

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

デザインダイアログ

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

「メイン」タブ

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

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

• DM 機能を有効化 - オンにすると、Dynamic Media 機能を有効にできます。
• Web に最適化された画像を有効にする — オンにすると、 web に最適化された画像配信サービス は WebP 形式で画像を配信し、画像のサイズを平均で 25%削減します。
  • このオプションは、AEMaaCS でのみ使用できます。
  • オフにした場合、または Web に最適化された画像配信サービスを使用できない場合、 アダプティブ画像サーブレット が使用されます。
• 遅延読み込みを有効にする - ページへの画像コンポーネントの追加時に遅延読み込みオプションが自動的に有効化されるかどうかを定義します。
• 画像は装飾画像 - ページへの画像コンポーネントの追加時に装飾画像オプションが自動的に有効化されるかどうかを定義します。
• DAM から代替テキストを取得 - ページへの画像コンポーネントの追加時に 、DAM から代替テキストを取得するオプションが自動的に有効化されるかどうかを定義します。
• DAM からキャプションを取得 - ページへの画像コンポーネントの追加時に、DAM からキャプションを取得するオプションが自動的に有効化されるかどうかを定義します。
• キャプションをポップアップとして表示 - ページへの画像コンポーネントの追加時に、画像のキャプションをポップアップとして表示するオプションが自動的に有効化されるかどうかを定義します。
• UUID の追跡を無効化 - 画像アセットの UUID の追跡を無効化する場合にオンにします。
• 幅 - 画像の幅（ピクセル単位）のリストを定義でき、コンポーネントは、ブラウザーサイズに基づいて最適な幅を自動的に読み込みます。
  • 別のサイズを追加するには、「追加」ボタンをタップまたはクリックします。
    • サイズの順序を変更するには、グラブハンドルを使用します。
    • 幅を削除するには、削除​アイコンを使用します。
  • デフォルトでは、画像の読み込みは、画像が表示される時点まで遅延されます。
    • ページ読み込み時に画像を読み込むには、オプション「遅延読み込みを無効化」を選択します。
• JPEG 画質 - 変換（拡大／縮小や切り抜きなど）が行われる JPEG 画像の品質係数（0 ～ 100 パーセントで指定）。

「機能」タブ

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

• ソース

  

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

• 向き

  

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

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

  注意

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

• 切り抜き

  

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

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

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

「スタイル」タブ

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

Adobe Client Data Layer

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