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

最新の 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.Content および Ui.Apps パッケージ

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

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

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

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

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 のプロパティ

helloworld コンポーネントは 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 (that is, on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, that is, edit, design, scaffolding, and so on. */-->
<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 (ms)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

メッセージの textfield は message というプロパティに保存され、期間の numberfield は 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／JS は、すべてのモードに読み込まれます。

実稼動環境では、直接 /apps にパスを公開しないことをお勧めします。allowProxy プロパティにより、クライアントライブラリの CSS と JS が of/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 Run に移動し、「チャネル」を選択します。

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

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.Retail Run - 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 の下のデザイン設定