SPAコンポーネントのAEMコンポーネントへのマッピング

AEM SPA Editor JS SDKを使用して、ReactコンポーネントをAdobe Experience Manager(AEM)コンポーネントにマッピングする方法について説明します。 コンポーネントマッピングを使用すると、AEM SPA Editor内で、従来のAEMオーサリングと同様に、SPAコンポーネントを動的に更新できます。

この章では、AEM JSONモデルAPIについて詳しく説明し、AEMコンポーネントによって公開されたJSONコンテンツをpropとしてReactコンポーネントに自動的に挿入する方法について説明します。

目的

  1. AEMコンポーネントをSPAコンポーネントにマッピングする方法について説明します。
  2. Inspectでは、AEMから渡されたダイナミックプロパティをReactコンポーネントで使用します。
  3. 標準搭載のReact AEMコアコンポーネントの使用方法を説明します。

作成する内容

この章では、指定されたText SPAコンポーネントがAEM Textコンポーネントにどのようにマッピングされているかを調べます。 Image SPAコンポーネントなどのReactコアコンポーネントは、SPAで使用され、AEMでオーサリングされます。 レイアウトコンテナ​および​テンプレートエディター​ポリシーの初期設定済み機能も使用して、外観が少し変化するビューを作成します。

チャプターサンプルの最終オーサリング

前提条件

ローカル開発環境の設定に必要なツールと手順を確認します。 この章は、 SPA🔗の統合の章の続きですが、SPA対応のAEMプロジェクトが必要な場合は、この章の続きに従ってください。

マッピング方法

基本的な概念は、SPAコンポーネントをAEMコンポーネントにマッピングすることです。 AEMコンポーネントを使用して、サーバー側で実行し、JSONモデルAPIの一部としてコンテンツを書き出す。 JSONコンテンツは、ブラウザーでクライアント側を実行するSPAで使用されます。 SPAコンポーネントとAEMコンポーネントの間に1対1のマッピングが作成されます。

AEMコンポーネントとReactコンポーネントのマッピングの概要

AEMコンポーネントとReactコンポーネントのマッピングの概要

Inspect the Text Component

AEMプロジェクトアーキタイプは、AEM テキストコンポーネントにマッピングされるTextコンポーネントを提供します。 これは、AEMから​content​をレンダリングする​content​コンポーネントの例です。

コンポーネントの動作を見てみましょう。

JSONモデルのInspect

  1. SPAのコードを調べる前に、AEMが提供するJSONモデルを理解しておくことが重要です。 コアコンポーネントライブラリに移動し、テキストコンポーネントのページを表示します。 コアコンポーネントライブラリは、すべてのAEMコアコンポーネントの例を提供しています。

  2. 次のいずれかの例の「JSON」タブを選択します。

    テキストJSONモデル

    次の3つのプロパティが表示されます。textrichText、および:type

    :type は、AEMコンポーネントの(また sling:resourceType はパス)をリストする予約済みプロパティです。:typeの値は、AEMコンポーネントをSPAコンポーネントにマッピングするために使用されます。

    textrichText は、SPAコンポーネントに公開される追加のプロパティです。

  3. http://localhost:4502/content/wknd-spa-react/us/en.model.jsonでJSON出力を表示します。 次のようなエントリが見つかるはずです。

    "text": {
        "id": "text-a647cec03a",
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text",
        "dataLayer": {}
       }
    

テキストSPAコンポーネントのInspect

  1. 任意のIDEで、SPAのAEMプロジェクトを開きます。 ui.frontendモジュールを展開し、ui.frontend/src/components/Text/Text.jsの下のText.jsファイルを開きます。

  2. 最初に調べるのは、40行目(class Text)です。

    class Text extends Component {
    
        get richTextContent() {
            return (<div
                    id={extractModelId(this.props.cqPath)}
                    data-rte-editelement
                    dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                    );
        }
    
        get textContent() {
            return <div>{this.props.text}</div>;
        }
    
        render() {
            return this.props.richText ? this.richTextContent : this.textContent;
        }
    }
    

    Text は、標準のReactコンポーネントです。コンポーネントは、this.props.richTextを使用して、レンダリングするコンテンツをリッチテキストにするかプレーンテキストにするかを決定します。 実際に使用される「コンテンツ」はthis.props.textから取得されます。

    XSS攻撃の可能性を回避するために、リッチテキストはDOMPurify経由でエスケープされてから、dangerlySetInnerHTMLを使用してコンテンツをレンダリングします。 この演習の前のJSONモデルからrichTextおよびtextプロパティを呼び出します。

  3. 次に、~29行目のTextEditConfigを見てみましょう。

    const TextEditConfig = {
    emptyLabel: 'Text',
    
        isEmpty: function(props) {
            return !props || !props.text || props.text.trim().length < 1;
        }
    };
    

    上記のコードは、AEMオーサー環境でプレースホルダーをレンダリングするタイミングを決定する役割を果たします。 isEmptyメソッドが​true​を返す場合は、プレースホルダーがレンダリングされます。

  4. 最後に、 ~62行目のMapTo呼び出しを見てみましょう。

    export default MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);
    

    MapTo は、AEM SPA Editor JS SDK(@adobe/aem-react-editable-components)で提供されます。パスwknd-spa-react/components/textは、AEMコンポーネントのsling:resourceTypeを表します。 このパスは、前に確認したJSONモデルで公開された:typeと一致します。 MapTo は、JSONモデルの応答を解析し、正しい値をSPAコンポーネントに渡 props す処理を行います。

    AEMのTextコンポーネント定義はui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/textにあります。

Reactコアコンポーネントの使用

AEM WCMコンポーネント — Reactコア実 装および AEM WCMコンポーネント — Spaエディター — Reactコア実装。これらは、すぐに使用できるAEMコンポーネントにマッピングされる、再利用可能なUIコンポーネントのセットです。 ほとんどのプロジェクトでは、これらのコンポーネントを独自の実装の出発点として再利用できます。

  1. プロジェクトコードで、import-components.js (ui.frontend/src/components)にあるファイルを開きます。
    このファイルは、AEMコンポーネントにマッピングされているすべてのSPAコンポーネントを読み込みます。 SPA Editor実装の動的な特性を考慮し、作成可能なAEMコンポーネントに結び付けられているすべてのSPAコンポーネントを明示的に参照する必要があります。 これにより、AEM作成者は、アプリケーション内の任意の場所でコンポーネントを使用するよう選択できます。

  2. 次のimport文には、プロジェクトで書き込まれるSPAコンポーネントが含まれます。

    import './Page/Page';
    import './Text/Text';
    import './Container/Container';
    import './ExperienceFragment/ExperienceFragment';
    
  3. @adobe/aem-core-components-react-spa@adobe/aem-core-components-react-baseの他のimportsが複数あります。 これらはReactコアコンポーネントを読み込み、現在のプロジェクトで使用できるようにします。 前述のTextコンポーネントの例と同様に、 MapToを使用して、これらのコンポーネントがプロジェクト固有のAEMコンポーネントにマッピングされます。

AEM Policiesの更新

ポリシーは、AEMテンプレートの機能で、開発者とパワーユーザーは、使用可能なコンポーネントを詳細に制御できます。 ReactコアコンポーネントはSPAコードに含まれていますが、アプリケーションで使用する前に、ポリシーを使用して有効にする必要があります。

  1. AEM Start画面で、Tools > Templates > WKND SPA React​に移動します。

  2. SPA Page​テンプレートを選択して開き、編集します。

  3. レイアウトコンテナ​を選択し、ポリシー​アイコンをクリックしてポリシーを編集します。

    レイアウトコンテナポリシー

  4. 許可されているコンポーネント > WKND SPA React - Content >で、画像ティーザー​および​タイトル​を確認します。

    使用可能な更新済みコンポーネント

    Default Components > Add mapping​を選択し、Image - WKND SPA React - Content​コンポーネントを選択します。

    デフォルトコンポーネントの設定

    MIMEタイプ​をimage/*と入力します。

    完了」をクリックして、ポリシーの更新を保存します。

  5. レイアウトコンテナ​で、テキスト​コンポーネントの​ポリシー​アイコンをクリックします。

    WKND SPA Text​という名前の新しいポリシーを作成します。 「プラグイン / 書式 」で、すべてのボックスをオンにして追加の書式設定オプションを有効にします。

    RTEフォーマットの有効化

    プラグイン > 段落スタイル​で、「段落スタイル​を有効にする」チェックボックスをオンにします。

    段落スタイルを有効にする

    完了」をクリックして、ポリシーの更新を保存します。

作成者コンテンツ

  1. ホームページ http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.htmlに移動します。

  2. これで、ページ上の追加のコンポーネント​画像ティーザータイトル​を使用できるようになります。

    追加のコンポーネント

  3. また、Textコンポーネントを編集し、フルスクリーン​モードで段落スタイルを追加することもできます。

    全画面表示のリッチテキスト編集

  4. また、アセットファインダー​から画像をドラッグ&ドロップすることもできます。

    画像のドラッグ&ドロップ

  5. タイトル​および​ティーザー​コンポーネントを使用したエクスペリエンス。

  6. AEM Assetsを使用して独自の画像を追加するか、標準のWKNDリファレンスサイトの完成したコードベースをインストールします。 WKND参照サイトには、WKND SPAで再利用できる多くの画像が含まれています。 パッケージは、AEM Package Managerを使用してインストールできます。

    パッケージマネージャーによるwknd.allのインストール

Inspect the Layout Container

レイアウトコンテナ​のサポートは、AEM SPA Editor SDKによって自動的に提供されます。 レイアウトコンテナ​は、名前で示されているように、 コンテナ​コンポーネントです。 コンテナコンポーネントは、他の​コンポーネントを表すJSON構造を受け入れ、動的にインスタンス化するコンポーネントです。

ここでは、レイアウトコンテナをさらに詳しく調べます。

  1. ブラウザーで、http://localhost:4502/content/wknd-spa-react/us/en.model.jsonに移動します。

    JSONモデルAPI — レスポンシブグリッド

    レイアウトコンテナ​コンポーネントはwcm/foundation/components/responsivegridsling:resourceTypeを持ち、TextコンポーネントとImageコンポーネントと同様に、:typeプロパティを使用してSPAエディターで認識されます。

    レイアウトモードを使用してコンポーネントのサイズを変更する場合と同じ機能をSPA Editorで使用できます。

  2. http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.htmlに戻ります。 画像​コンポーネントを追加し、レイアウト​オプションを使用してサイズ変更を試みます。

    レイアウトモードを使用した画像のサイズ変更

  3. JSONモデルhttp://localhost:4502/content/wknd-spa-react/us/en.model.jsonを再度開き、JSONの一部としてcolumnClassNamesを観察します。

    列クラス名

    クラス名aem-GridColumn--default--4は、12列のグリッドに基づいて、幅が4列であるコンポーネントを示します。 レスポンシブグリッドの詳細については、を参照してください。

  4. IDEに戻り、ui.appsモジュール内にui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-gridに定義されたクライアント側ライブラリがあります。 less/grid.less ファイルを開きます。

    このファイルは、レイアウトコンテナ​で使用されるブレークポイント(defaulttabletphone)を決定します。 このファイルは、プロジェクト仕様に応じてカスタマイズすることを目的としています。 現在、ブレークポイントは1200px768pxに設定されています。

  5. Textコンポーネントのレスポンシブ機能と更新されたリッチテキストポリシーを使用して、次のようなビューを作成できます。

    チャプターサンプルの最終オーサリング

おめでとうございます。

これで、SPAコンポーネントをAEMコンポーネントにマッピングする方法と、Reactコアコンポーネントを使用した方法を学びました。 また、レイアウトコンテナ​のレスポンシブ機能を調べることもできます。

次の手順

ナビゲーションとルーティング - SPAエディターSDKを使用してAEMページにマッピングすることで、SPAの複数のビューをサポートする方法を説明します。動的なナビゲーションは、React RouterとReactコアコンポーネントを使用して実装されます。

(ボーナス)ソース管理に対する設定の保持

多くの場合、特にAEMプロジェクトの開始時に、テンプレートや関連するコンテンツポリシーなどの設定をソース管理に保持すると役立ちます。 これにより、すべての開発者が同じコンテンツと設定のセットに対して作業を行い、環境間の一貫性をさらに高めることができます。 プロジェクトがある程度の成熟度に達すると、テンプレート管理の手法を特別なパワーユーザーのグループに引き継ぐことができます。

次の手順は、Visual Studio Code IDEとVSCode AEM Syncを使用して実行しますが、AEMのローカルインスタンスから​pull<a3/または import に設定した任意のツールとIDEを使用して実行できます。

  1. Visual Studio Code IDEで、Marketplace拡張機能を使用して​VSCode AEM Sync​がインストールされていることを確認します。

    VSCode AEM Sync

  2. プロジェクトエクスプローラーで、 ui.content​モジュールを展開し、 /conf/wknd-spa-react/settings/wcm/templatesに移動します。

  3. フォルダーを右 クリック templates し、「 AEM Serverからインポ ート」を選択します

    VSCodeインポートテンプレート

  4. コンテンツを読み込む手順を繰り返しますが、/conf/wknd-spa-react/settings/wcm/templates/policiesにある​policies​フォルダーを選択します。

  5. ui.content/src/main/content/META-INF/vault/filter.xmlにあるfilter.xmlファイルをInspectします。

    <!--ui.content filter.xml-->
    <?xml version="1.0" encoding="UTF-8"?>
     <workspaceFilter version="1.0">
         <filter root="/conf/wknd-spa-react" mode="merge"/>
         <filter root="/content/wknd-spa-react" mode="merge"/>
         <filter root="/content/dam/wknd-spa-react" mode="merge"/>
         <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
     </workspaceFilter>
    

    filter.xmlファイルは、パッケージと共にインストールされるノードのパスを識別します。 各フィルターのmode="merge"は、既存のコンテンツは変更されず、新しいコンテンツのみが追加されることを示しています。 コンテンツ作成者はこれらのパスを更新する可能性があるので、コードデプロイメントではコンテンツを上書き​しない​ことが重要です。 フィルタ要素の使用について詳しくは、FileVaultのドキュメントを参照してください。

    ui.content/src/main/content/META-INF/vault/filter.xmlui.apps/src/main/content/META-INF/vault/filter.xmlを比較して、各モジュールで管理される異なるノードを理解します。

(ボーナス)カスタム画像コンポーネントの作成

SPA画像コンポーネントは、Reactコアコンポーネントによって既に提供されています。 ただし、追加のプラクティスが必要な場合は、AEMの画像コンポーネントにマッピングする独自のReact実装を作成します。 Imageコンポーネントは、content​コンポーネントの別の例です。

Inspect the JSON

SPAコードを調べる前に、AEMから提供されたJSONモデルを調べます。

  1. コアコンポーネントライブラリの画像の例に移動します。

    画像コアコンポーネントのJSON

    srcaltおよびtitleのプロパティは、SPA Imageコンポーネントの設定に使用されます。

    メモ

    開発者がアダプティブな遅延読み込みコンポーネントを作成できる、その他の画像プロパティ(lazyEnabledwidths)が公開されています。 このチュートリアルで作成されるコンポーネントはシンプルで、これらの高度なプロパティは​使用​しません。

画像コンポーネントの実装

  1. 次に、ui.frontend/src/componentsの下にImageという名前の新しいフォルダーを作成します。

  2. Imageフォルダーの下に、Image.jsという名前の新しいファイルを作成します。

    Image.jsファイル

  3. 次のimport文をImage.jsに追加します。

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/aem-react-editable-components';
    
  4. 次に、ImageEditConfigを追加して、AEMでプレースホルダーを表示するタイミングを指定します。

    export const ImageEditConfig = {
    
        emptyLabel: 'Image',
    
        isEmpty: function(props) {
            return !props || !props.src || props.src.trim().length < 1;
        }
    };
    

    srcプロパティが設定されていない場合、プレースホルダーが表示されます。

  5. 次に、Imageクラスを実装します。

     export default class Image extends Component {
    
        get content() {
            return <img     className="Image-src"
                            src={this.props.src}
                            alt={this.props.alt}
                            title={this.props.title ? this.props.title : this.props.alt} />;
        }
    
        render() {
            if(ImageEditConfig.isEmpty(this.props)) {
                return null;
            }
    
            return (
                    <div className="Image">
                        {this.content}
                    </div>
            );
        }
    }
    

    上記のコードは、JSONモデルによって渡されたprop srcaltおよびtitleに基づいて<img>をレンダリングします。

  6. MapToコードを追加して、ReactコンポーネントをAEMコンポーネントにマッピングします。

    MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);
    

    文字列wknd-spa-react/components/imageは、次の場所にあるui.appsのAEMコンポーネントの場所に対応しています。ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

  7. Image.cssという名前の新しいファイルを同じディレクトリに作成し、次のコードを追加します。

    .Image-src {
        margin: 1rem 0;
        width: 100%;
        border: 0;
    }
    
  8. Image.js内で、importステートメントの下の先頭にファイルへの参照を追加します。

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/aem-react-editable-components';
    
    require('./Image.css');
    
  9. ファイルui.frontend/src/components/import-components.jsを開き、新しいImageコンポーネントへの参照を追加します。

    import './Page/Page';
    import './Text/Text';
    import './Container/Container';
    import './ExperienceFragment/ExperienceFragment';
    import './Image/Image'; //add reference to Image component
    
  10. import-components.jsで、Reactコアコンポーネントの画像をコメントアウトします。

    //MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});
    

    これにより、カスタムの画像コンポーネントが確実に代わりに使用されます。

  11. プロジェクトのルートから、Mavenを使用してSPAコードをAEMにデプロイします。

    $ cd aem-guides-wknd-spa.react
    $ mvn clean install -PautoInstallSinglePackage
    
  12. AEMでSPAをInspectします。 ページ上の画像コンポーネントは、引き続き機能します。 Inspectレンダリング出力を見ると、Reactコアコンポーネントではなく、カスタム画像コンポーネントのマークアップが表示されます。

    カスタム画像コンポーネントのマークアップ

    <div class="Image">
        <img class="Image-src" src="/content/image-src.jpg">
    </div>
    

    Reactコアコンポーネントの画像マークアップ

    <div class="cmp-image cq-dd-image">
        <img src="/content/image-src.jpg" class="cmp-image__image">
    </div>
    

    これは、独自のコンポーネントの拡張と実装の良い紹介です。

このページ