カルーセルバナー carousel-banners

ホットスポットと画像マップの変数を識別します（AEM Assets と Dynamic Media の両方を使用するユーザーのみ）。

まず、既存のクイックビュー実装で使用されている動的変数を識別します。これにより、AEM Assetsでのカルーセルバナー作成プロセスで、ホットスポットと画像マップのデータを適切に入力できます。

オプション：必要であれば、カルーセルセットビューアプリセットを作成します。

管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、複数のカルーセルに対してこのカスタムビューアプリセットを再利用できることです。ただし、ユーザーがカルーセルを作成するときに、カルーセルの動作や外観を直接カスタマイズすることもできます。カルーセルで特定のデザインが求められるケースではこの方法が適しています。

画像バナーをアップロードします。

インタラクティブにする画像バナーをアップロードします。

カルーセルセットを作成します。

カルーセルセットで、ユーザーはバナー画像間を移動し、ホットスポットまたは画像マップをタップして、関連するコンテンツにアクセスします。

Assets でカルーセルセットを作成するには、「作成」をタップし、「カルーセルセット」を選択します。アセットをスライドに追加し、「保存」をタップします。エディター内で、カルーセルの外観と動作を直接編集することもできます。

画像バナーにホットスポットまたは画像マップを追加します。

1 つ以上のホットスポットまたは画像マップを画像バナーに追加し、それぞれにアクション（リンクやクイックビュー、エクスペリエンスフラグメントなど）を関連付けます。ホットスポットまたは画像マップを追加した後、カルーセルセットを公開して、このタスクを完了します。 公開によって埋め込みコードが生成されます。これは、コピーして Web サイトのランディングページに適用するために使用できます。

詳しくは、 （オプション）カルーセルバナーのプレビュー — オプション。 必要に応じて、カルーセルセットの表示を確認して、インタラクティビティをテストすることができます。

カルーセルバナーの公開.

他のアセットと同じようにカルーセルセットを公開します。Assets でカルーセルセットに移動し、選択してタップまたはタップします 公開. カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。

次のいずれかの操作を行います。

• Web サイトページへのカルーセルバナーの追加Web サイトページにカルーセルバナーの URL またはコピーした埋め込みコードを追加できます。

  • カルーセルバナーと既存のクイックビューの統合。サードパーティの Web コンテンツ管理システムを使用している場合は、新しいカルーセルバナーを、Web サイト上の既存のクイックビュー実装に統合する必要があります。

• AEM で Web サイトへのカルーセルバナーの追加AEM Sites のお客様は、インタラクティブメディアコンポーネントを使用して、カルーセルセットを AEM 内のページに直接追加できます。

Assets で、カルーセルセットを作成するフォルダーに移動し、作成／カルーセルセット ​をタップします。

の カルーセルバナーエディター ページ、タップ タップしてアセットセレクターを開く をクリックして、最初のスライドの画像を選択します。

の カルーセルバナーエディター ページで、次のいずれかの操作を行います。

• ページの左上隅付近にある「スライドを追加」をタップします。
• ページの中央付近にあるをタップします。 タップしてアセットセレクターを開く.

カルーセルセットに含めるアセットをタップして選択します。選択済みのアセットにはチェックマークアイコンが付いています。作業が完了したら、ページの右上隅付近にあるをタップします。 選択.

アセットセレクターでは、キーワードを入力して Enter キーをタップすることで、アセットを検索することができます。フィルターを適用して、検索結果を絞り込むこともできます。パス、コレクション、ファイルタイプおよびタグでフィルタリングできます。フィルターを選択してから、ツールバーの​ フィルター ​アイコンをタップします。次をタップしてビューを変更 表示 アイコンと選択 列表示, カード表示 ​または リスト表示.

詳しくは、セレクターの操作を参照してください。

カルーセルセットで回転させるすべての画像が追加されるまで、スライドの追加を続けます。

（オプション）次のいずれかの操作を行います。

• 必要に応じて、スライドをドラッグして、セットリスト内の画像を並べ替えます。
• 画像を削除するには、画像を選択し、「スライドを削除」をタップします。
• プリセットを適用するには、ページの右上隅付近にある「プリセット」ドロップダウンリストをタップし、セットに一度に適用するプリセットを選択します。

スライドを削除するには、スライドをタップし、 スライドを削除 」と入力します。 スライドを移動するには、並べ替えアイコンをタップし、長押しして目的の場所に移動します。

スライドに画像を追加した後で、ホットスポットまたは画像マップ（または両方）を画像に追加できます。ホットスポットまたは画像マップの追加を参照してください。

「動作」タブと「外観」タブをタップまたはクリックし、カルーセルバナーの外観や特定のコンポーネントの動作を調整することで、カルーセルセットのビジュアルデザインと動作を変更できます。 ビューアエディターの使用方法について詳しくは、ビューアプリセットの管理を参照してください。

カルーセルバナーがどのように表示されるかをプレビューすることもできます。 （オプション）カルーセルバナーのプレビューを参照してください。

終了したら「保存」をタップします。

Assets ビューで、インタラクティブにするカルーセルセットに移動します。

カルーセルセットを選択し、「編集」をタップします。

カルーセルビューアエディターで、インタラクティブにするスライドを選択します。

ページの左上隅付近にある「ホットスポット」または「画像マップ」をタップします。

次のいずれかの操作を行います。

• ホットスポットの場合：画像上で、ホットスポットを表示する場所をタップします。
• 画像マップの場合：画像上でをタップし、左上から右下にドラッグして、画像マップ領域を作成します。 画像マップのサイズを調整するには、コーナーをドラッグします。

必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。必要に応じて、他のホットスポットまたは画像マップを追加します。

ホットスポットまたは画像マップを削除するには、「アクション」タブをタップします。マップとホットスポット ​見出しの下にある​ 選択したタイプ ​ドロップダウンメニューから、削除するホットスポットまたは画像マップの名前を選択します。メニューの横にある​ ごみ箱 ​アイコンをタップし、「削除」をタップします。

「名前」テキストフィールドに、ホットスポットまたは画像マップの名前を入力します。 この名前は、 マップとホットスポット 」ドロップダウンリストから選択できます。 名前を指定すると、後で変更を加える際に、ホットスポットまたは画像マップを特定しやすくなります。

「アクション」タブで次のいずれかの操作を行います。

• 「クイックビュー」をタップします。

  • AEM Sitesおよび E コマースのユーザーである場合は、 製品ピッカー アイコン（虫眼鏡）を使用して 製品を選択 ページ。 使用する製品をタップし、ページの右上隅にあるチェックマークをタップして、 カルーセルバナーエディター.

  • AEM Sites または AEM eCommerce のユーザーではない場合は次のようにします。

    • これらの変数を定義するときは、ホットスポットの変数の識別を参照してください。
    • 次に、SKU 値を手動で入力します。内 SKU 値 「 」テキストフィールドに、製品の SKU(Stock Keeping Unit) を入力します。SKU は、提供する個々の製品またはサービスの一意の識別子です。 入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされたホットスポットが特定の SKU のクイックビューに関連付けられます。
    • （オプション）クイックビュー内で製品をさらに識別するために必要になる他の変数がある場合は、「汎用変数を追加」をタップします。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。
    • 詳しくは、セレクターの操作を参照してください。

• 「ハイパーリンク」をタップします。

  • AEM Sitesのユーザーである場合は、 サイトセレクター アイコン（フォルダー）を使用して URL に移動します。

    note note
    NOTE
    インタラクティブコンテンツに相対 URL のリンク（特に AEM Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。

  • スタンドアロンのユーザーの場合は、 HREF テキストフィールドで、リンクされた Web ページへの完全な URL パスを指定します。

    このリンクを新しいブラウザータブで開く（推奨のデフォルト）か同じタブで開くかを指定してください。

    詳しくは、セレクターの操作を参照してください。

• 「エクスペリエンスフラグメント」をタップします。

  • AEM Sitesのユーザーである場合は、 検索 アイコン（虫眼鏡）を使用して、エクスペリエンスフラグメントページを開きます。 使用するエクスペリエンスフラグメントをタップし、 選択 をクリックして、ホットスポット管理ページに戻ります。

    エクスペリエンスフラグメントを参照してください。

    注意:カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされないことに注意してください。 この問題を回避するには、ソーシャルメディア共有ツールのないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。

  • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。

カルーセルバナーがどのように表示されるかをプレビューすることもできます。 （オプション）カルーセルバナーのプレビューを参照してください。

「保存」をタップします。

カルーセルセットを公開します。 公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。AEM Sites のユーザーである場合は、カルーセルセットを Web ページに直接追加できます。

アセットの公開を参照してください。

Web サイトランディングページへのカルーセルセットの追加を参照してください。

次のいずれかの操作を行います。

• カルーセルセットアセットの上にマウスポインターを置いて、をタップします。 編集 （鉛筆アイコン）を使用します。
• カルーセルセットアセットの上にマウスポインターを置いて、 選択 （チェックマークアイコン）をタップし、 編集 をクリックします。
• カルーセルセットアセットをタップし、ページの左上隅にあるをタップします。 編集 （鉛筆アイコン）を使用します。

カルーセルセットを編集するには、次のいずれかの操作を行います。

• スライドを追加するには、 スライドを追加 アイコンをクリックし、そのスライドに追加するアセットの場所に移動して、チェックマークをタップします。
• スライドを並べ替えるには、スライドを新しい位置までドラッグします（並べ替えアイコンを選択して項目を移動します）。
• ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンをタップし、「 ホットスポットと画像マップの追加.
• カルーセルセットの外観や動作を編集するには、「外観」タブまたは「動作」タブをタップし、必要なオプションを設定します。
• ホットスポットまたは画像マップを編集するには、該当するスライドでホットスポットまたは画像マップを選択し、必要に応じて「 アクション タブをクリックします。
• スライドを削除するには、スライドを選択し、 スライドを削除 をクリックします。
• プリセットを適用するには、ページの右上隅付近にある「プリセット」ドロップダウンリストをタップし、ビューアプリセットを選択します。
• カルーセルセット全体を削除するには、カルーセルセットの場所に移動して選択し、 削除.

In Assets ​作成した既存のカルーセルバナーに移動し、タップして開きます。

「編集」をタップします。

ツールバーの右隅にあるビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。

「プレビュー」をタップします。

画像上のホットスポットまたは画像マップをタップし、関連付けられたアクションをテストします。

公開済みのカルーセルバナーの埋め込みコードをコピーします。

Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。

AEM Assets からコピーした埋め込みコードを Web ページに追加します。

コピーされた埋め込みコードはレスポンシブです。つまり、ページの埋め込み領域に自動的に適応します。