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