メール画像コンポーネント email-image-component

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

使用方法 usage

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

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

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

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

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

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

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

レスポンシブ機能 responsive-features

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

さらにメール画像コンポーネントは、遅延読み込みをサポートしており、ブラウザーに表示されるまで実際の画像アセットの読み込みを遅らせ、コンテンツの応答性を向上させます。

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

Dynamic Media のサポート dynamic-media

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

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

SVG のサポート svg-support

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

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

セキュリティ security

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

技術的詳細 technical-details

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

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

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

設定ダイアログ configure-dialog

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

「アセット」タブ asset-tab

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

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

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

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

    • アセットブラウザーからアセットをドロップするか、「参照」オプションをタップすると、ローカルファイルシステムからアップロードできます。
    • 現在選択されている画像を選択解除するには、「クリア」をタップまたはクリックします。
    • アセットエディターでアセットのレンディションを管理するには、「編集」をタップまたはクリックします。
  • 代替テキストを提供しない - このオプションは、画像が単なる装飾画像である場合や、ページへの追加情報を伝えるものでない場合に、スクリーンリーダーなどの支援テクノロジーで画像を無視するように指定します。

  • 遅延読み込みを無効化 - このオプションは、必要に応じて読み込むのではなく、すべての画像コンポーネントをプリロードします。

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

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

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

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

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

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

    • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
    • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
    • ID を変更すると、CSS に影響を与える可能性があります。
  • 固定幅 - このオプションは、画像の幅をピクセル単位で定義します。

  • 画像を使用可能な幅に拡大・縮小 - このオプションは "width":"100%" を画像スタイル属性に適用します。

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 スタイルシステムをサポートしています。

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