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

スクリーン We.Retail 実行 Ui.Apps および Ui.Content crx パッケージマネージャーを通じてインストールされるパッケージ。

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 プロジェクトを実行します。 /content/dam/we-retail-run には、プロジェクトの初期デジタルアセットが含まれています。/content/screens/we-retail-run には、Screens のコンテンツ構造が含まれています。これらすべてのパスの下に含まれるコンテンツは主に AEM で更新されます。環境（ローカル、開発、ステージング、実稼動）間の一貫性を高めるために、多くの場合、ベースコンテンツ構造がソース管理下に保存されます。

AEM Screensに移動します。 We.Retail プロジェクトを実行：

AEM スタートメニューから、「スクリーン」アイコンを選択します。 を確認 We.Retail プロジェクトの実行が表示されます。

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} は、という名前の JCR プロパティのコンテンツを出力する HTL スクリプトの一部です message. ユーザーが値を入力できるダイアログボックスが後で作成されます。 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 フォルダーに、という名前のノードを作成します。 shared タイプの cq:ClientLibraryFolder.

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

• 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 が /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のスタートメニューで、に移動します。 スクリーン > We.Retail実行 > を選択して、 チャネル.

「」を選択します 作成 ボタン

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

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

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

1. プロパティの手順

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

待機中チャネルのページプロパティを開きます。

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

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

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

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

1. 「」を選択します レンチ Parsys にアイコンが表示されるので、許可されたコンポーネントを設定できます。

2. 「」を選択します スクリーン グループと We.Retail実行 – コンテンツ グループ。

ページモードを​ 編集 ​に切り替えます。これで、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 の下のデザイン設定