ここでは、以下のトピックについて説明します。
テキストオーバーレイ機能は、AEM 6.3 機能パック 5 または AEM 6.4 機能パック 3 がインストールされている場合にのみ使用できます。
テキストオーバーレイは AEM Screens で利用できる機能で、画像の上にタイトルや説明を重ねて表示することにより、シーケンスチャネルに魅力的なエクスペリエンスを作成できます。
独自のカスタムコンポーネントの作成方法については、AEM Screens コンポーネントの拡張を参照してください。
この節では、ポスターコンポーネントを AEM Screens プロジェクトのシーケンスチャネルの 1 つでテキストオーバーレイとして使用する方法のみ紹介します。
この節では、AEM Screens プロジェクトでのテキストオーバーレイの使用について説明します。
前提条件
テキストオーバーレイ機能の実装を開始する前に、前提条件として、プロジェクトをセットアップしておく必要があります。例:
AEM Screens プロジェクト(この例では TextOverlayDemo)を作成する
チャネルフォルダーの下に TextSample というシーケンスチャネルを作成します
TextSample チャネルにコンテンツを追加する
次の画像は、チャネルフォルダーに TextSample チャネルがある TextOverlayDemo プロジェクトを示しています。
次の手順に従って、AEM Screens チャネルでテキストオーバーレイを使用します。
TextOverlayDemo/Channels/TextSample に移動し、アクションバーの「編集」をクリックして、エディターを開きます。
画像を選択し、設定(レンチ)アイコンをクリックして、プロパティダイアログボックスを開きます。
ダイアログボックスのナビゲーションバーから「テキストオーバーレイ」オプションを選択します(下図を参照)。
「テキストオーバーレイ」タブのプロパティを使用すると、Screens プロジェクトの任意のコンポーネントにテキストを追加できます。この節では、「テキストオーバーレイ」タブで使用できるプロパティの概要を説明します。
テキストボックスにテキストを追加し、太字、斜体、下線などの強調書式を追加できます。
カラーバリアント:このオプションを選択すると、テキストは「暗い色」(黒のテキスト)または「明るい色」(白のテキスト)になります。
サイズと位置の設定:テキストを水平または垂直方向に揃えることができます。さらに、詳細設定ツールを使用してテキストの位置揃えをおこなうこともできます。
詳細設定ツールを適切に使用するには、「px」をサフィックスとして使用して、正しい位置をピクセル単位で指定する必要があります。例えば、「200px」とすると、開始点から 200 ピクセル離れた位置が指定されます。
次の節では、データストアの値の使用方法について説明します。例えば、テキストオーバーレイコンポーネントの Google シートなどです。
前提条件
AEM Screens プロジェクトの ContextHub 構成を設定する必要があります。
データストアを使用してデータ駆動型アセットの変更を設定および管理する方法については、「AEM Screens での ContextHub の設定」を参照してください。
プロジェクトに必要な設定をおこなったら、次の手順に従って Google シートの値を使用します。
TextOverlayDemo/チャネル/TextSample に移動して、アクションバーから「プロパティ」をクリックします。
「パーソナライズ機能」タブを選択して、ContextHub 設定をセットアップします。
「ContextHub のパス」として libs/settings/cloudsettings/default/ContextHub 設定 を選択し、「選択」をクリックします。
「セグメントのパス」として conf/Screens/settings/wcm/segments を選択し、「選択」をクリックします。
「保存して閉じる」をクリックします。
ContextHub 設定とセグメントをそれぞれ最初に保存した、Context Hub とセグメントのパスを使用します。
TextOverlayDemo/Channels/TextSample に移動し、アクションバーの「編集」をクリックして、エディターを開きます。
「テキストオーバーレイの使用」の節で説明されているように、画像とテキストオーバーレイコンポーネントを画像に追加します。
「構成」(レンチアイコン)をクリックして、「画像」ダイアログボックスを開きます。
画像ダイアログボックスから「ContextHub」タブに移動します。「追加」をクリックします。
ContextHub 構成を設定していない場合、このオプションはプロジェクトで無効になります。
「プレースホルダー」フィールドに値を入力し、Google スプレッドシートから値を取得する行を選択して ContextHub 変数(この場合、値は Google スプレッドシートの行 2 列 1 から取得されます)に入力します。デフォルト値を 20 として入力します(下の図参照)。完了したら、チェックマークをクリックします。
参照用に、次の図は Google シートから取得される値を示しています。
次の図に示すように、画像ダイアログボックスからテキストオーバーレイタブに戻り、「Current Temperature {Value}」というテキストを追加します。
「プレビュー」をクリックし、出力を表示します。