AEM Screens 用カスタムコンポーネントの開発 developing-a-custom-component-for-aem-screens

AEM 6.5 および最新の Screens 機能パック

AEM Screens Player

ローカル開発環境

CRX パッケージマネージャーで、次の 2 つのパッケージがインストールされていることを確認します。

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

CRX パッケージマネージャーを使用してインストールされた Screens We.Retail Run Ui.Apps および Ui.Content パッケージ。

screens-weretail-run.ui.apps パッケージでは、/apps/weretail-run の下にコードがインストールされます。

このパッケージには、プロジェクトのカスタムコンポーネントをレンダリングするコードが含まれています。このパッケージには、コンポーネントコードのほか、必要な JavaScript または CSS が含まれています。このパッケージには、screens-weretail-run.core-0.0.1-SNAPSHOT.jar も埋め込まれており、この中に、プロジェクトで必要な Java™ コードが含まれています。

CRXDE Lite での ui.apps コードの表現

Hello World コンポーネントは、プレースホルダーにすぎません。チュートリアルの過程で機能が追加されて、コンポーネントに表示されるメッセージを作成者が更新できるようになります。

screens-weretail-run.ui.content パッケージでは、以下のパスにコードがインストールされます。

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

このパッケージには、プロジェクトに必要な初期コンテンツおよび設定構造が含まれています。/conf/we-retail-run には、We.Retail Run プロジェクトのすべての設定が含まれています。/content/dam/we-retail-run には、プロジェクトの初期デジタルアセットが含まれています。/content/screens/we-retail-run には、Screens のコンテンツ構造が含まれています。これらすべてのパスの内容は主に AEM で更新されます。環境（ローカル、開発、ステージング、実稼動）間の一貫性を高めるために、多くの場合、ベースコンテンツ構造がソース管理下に保存されます。

AEM Screens／We.Retail Run プロジェクト ​に移動します。

AEM のスタートメニューで Screens アイコンをクリックします。We.Retail Run プロジェクトが表示されていることを確認します。

CRXDE Lite http://localhost:4502/crx/de/index.jsp（または任意の IDE）で、/apps/weretail-run/components/content/helloworld. に移動します。

helloworld コンポーネントに次のプロパティを追加します。

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

/apps/weretail-run/components/content/helloworld のプロパティ

Hello World コンポーネントは foundation/components/parbase コンポーネントを拡張したものなので、シーケンスチャネル内で適切に使用できます。

/apps/weretail-run/components/content/helloworld の下に helloworld.html. という名前のファイルを作成します。

ファイルに以下のように入力します。

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Screens コンポーネントでは、使用するオーサリングモードに応じて、2 種類のレンダリングが必要になります。

1. 実稼動：プレビューまたはパブリッシュモード（wcmmode=disabled）
2. 編集：編集、デザイン、基礎、開発者など、他のすべてのオーサリングモードに使用されます。

helloworld.html はスイッチとして機能し、アクティブなオーサリングモードを確認し、別の HTL スクリプトにリダイレクトします。編集モード用に edit.html スクリプトを用意し、実稼動モード用に production.html スクリプトを用意するというのが、Screens コンポーネントで一般に使用される規則です。

/apps/weretail-run/components/content/helloworld の下に production.html. という名前のファイルを作成します。

ファイルに以下のように入力します。

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

上記は、Hello World コンポーネントの実稼動用マークアップです。このコンポーネントはシーケンスチャネルで使用されるので、data-duration 属性が含まれています。data-duration 属性は、シーケンスチャネルでシーケンス項目の表示時間を把握するために使用されます。

このコンポーネントでは、div タグと h1 タグ（テキストを含む）をレンダリングします。${properties.message} は HTL スクリプトの一部で、message という名前の JCR プロパティのコンテンツを出力します。後でダイアログボックスが作成され、ユーザーは message プロパティテキストの値を入力できます。

また、コンポーネントでは BEM（ブロック要素修飾子）表記が使用されることにも注意してください。BEM は、再利用可能なコンポーネントを容易に作成できる CSS コーディング規則です。BEM は、AEM のコアコンポーネントで使用される表記です。

/apps/weretail-run/components/content/helloworld の下に edit.html. という名前のファイルを作成します。

ファイルに以下のように入力します。

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

上記は、Hello World コンポーネントの編集済みマークアップです。ダイアログメッセージが既に入力されている場合、最初のブロックにはコンポーネントの編集済みバージョンが表示されます。

ダイアログボックスメッセージがまだ入力されていない場合は、2 番目のブロックがレンダリングされます。その場合、cq-placeholder と data-emptytext は、「Hello World」というラベルをプレースホルダーとしてレンダリングします。複数のロケールでのオーサリングをサポートするために、ラベルの文字列を i18n を使用して国際化することができます。

Hello World コンポーネントに使用する Screens 画像ダイアログをコピーします。

既存のダイアログボックスを出発点にして、それに変更を加えるのが最も簡単です。

1. ダイアログボックスのコピー元：/libs/screens/core/components/content/image/cq:dialog
2. ダイアログボックスの貼り付け先のパス：/apps/weretail-run/components/content/helloworld

メッセージのタブが含まれるように Hello World ダイアログボックスを更新します。

次の条件に合致するようにダイアログを更新します。最終的なダイアログの JCR ノード構造は、次のような XML コードになります。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

メッセージのテキストフィールドは message という名前のプロパティに保存され、期間の数値フィールドは duration という名前のプロパティに保存されます。/apps/weretail-run/components/content/helloworld/production.html では、これら 2 つのプロパティは ${properties.message} および ${properties.duration} として HTL で参照されます。

Hello World - 完成したダイアログ

Hello World コンポーネントのクライアントサイドライブラリ用のフォルダーを作成します。

/apps/weretail-run/components/content/helloworld の下に、clientlibs という名前のフォルダーを作成します。

clientlibs フォルダーの下に、タイプ cq:ClientLibraryFolder の shared という名前のノードを作成します。

共有クライアントライブラリに次のプロパティを追加します。

• allowProxy | Boolean | true

• categories| String[] | cq.screens.components

/apps/weretail-run/components/content/helloworld/clientlibs/shared のプロパティ

categories プロパティは、クライアントライブラリを識別する文字列です。cq.screens.componentscategory は、編集モードとプレビュー／実稼動モードの両方で使用されます。したがって、sharedclientlib に定義された CSS や JavaScript は、すべてのモードに読み込まれます。

ベストプラクティスとして、実稼動環境の /apps を直接指すパスは、公開しないでください。allowProxy プロパティにより、クライアントライブラリの CSS と JavaScript が /etc.clientlibs というプレフィックスを付けて参照されるようになります。

共有フォルダーの下に css.txt という名前のファイルを作成します。

ファイルに以下のように入力します。

#base=css

styles.less

shared フォルダーの下に css という名前のフォルダーを作成します。css フォルダーの下に、style.less という名前のファイルを追加します。クライアントライブラリの構造は次のようになります。

このチュートリアルでは、CSS を直接記述するのではなく、LESS を使用します。LESS は、CSS 変数、ミックスイン、関数をサポートしている一般的な CSS プリコンパイラーです。AEM のクライアントライブラリは、LESS によるコンパイルをネイティブにサポートしています。Sass などのプリコンパイラーも使用できますが、AEM の外部でコンパイルする必要があります。

/apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less に以下を入力します。

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

shared クライアントライブラリフォルダーをコピー＆ぺーストして、production という名前のクライアントライブラリを作成します。

共有クライアントライブラリをコピーして実稼動用のクライアントライブラリを作成します。

本番用クライアントライブラリの categories プロパティを cq.screens.components.production. に更新します。

これにより、プレビュー／実稼動モードの場合のみ、スタイルが読み込まれるようになります。

/apps/weretail-run/components/content/helloworld/clientlibs/production のプロパティ

/apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less に以下を入力します。

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

上記のスタイルでは、実稼動モードの場合のみ、スクリーンの中央にメッセージが表示されます。

CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs で、/apps/settings/wcm/designs に移動します。

designs フォルダーの下に cq:Page 型の we-retail-run という名前のノードを作成します。

we-retail-run ページの下に、nt:unstructured 型の jcr:content という名前の別のノードを追加します。この jcr:content ノードに次のプロパティを追加します。

/apps/settings/wcm/designs/we-retail-run でのページのデザイン。

AEM のスタートメニューで、Screens／We.Retail実行 ​に移動し、「チャネル」をクリックします。

「作成」ボタンをクリックします。

1. 「エンティティを作成」を選択します。

作成ウィザードで、以下の操作をおこないます。

テンプレートの手順 - 「シーケンスチャネル」を選択します

1. プロパティの手順

• 「基本」タブ／「タイトル」に「Idle Channel」を入力
• 「チャネル」タブ／「チャンネルをオンラインにする」をオン

Idle Channel のページプロパティを開きます。

前の節で作成したデザインページ /apps/settings/wcm/designs/we-retail-run を指すように、デザインフィールドを更新します。

/apps/settings/wcm/designs/we-retail-run を指しているデザイン設定

新しく作成したアイドルチャネルを編集して開けるようにします。

ページモードを​ デザイン ​モードに切り替えます。

1. Parsys の​ レンチ ​アイコンをクリックすると、使用可能なコンポーネントを設定できます。

2. 「Screens」グループと「We.RetailRun - Content」グループをクリックします。

ページモードを​ 編集 ​に切り替えます。これで、Hello World コンポーネントをページに追加し、他のシーケンスチャネルコンポーネントと組み合わせることができるようになりました。

CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par で、/apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par に移動します。components プロパティに group:Screens、group:We.Retail Run - Content が含まれていることがわかります。

/apps/settings/wcm/designs/we-retail-run の下のデザイン設定