SPAの複合コンポーネント

複合コンポーネントは、複数のベースコンポーネントを1つのコンポーネントに組み合わせることで、AEMコンポーネントのモジュラー性を活用します。 一般的な複合コンポーネントの使用例は、画像とテキストコンポーネントの組み合わせで構成されるカードコンポーネントです。

AEM Single Page Application (SPA) Editorフレームワーク内で複合コンポーネントが適切に実装されている場合、コンテンツ作成者は、そのようなコンポーネントを他のコンポーネントと同様にドラッグ&ドロップできますが、複合コンポーネントを構成する各コンポーネントを個別に編集できます。

この記事では、AEM SPAエディタでシームレスに機能するように、単一ページアプリケーションに複合コンポーネントを追加する方法を説明します。

ユースケース

この記事では、一般的なカードコンポーネントを使用例として使用します。 カードは、多くのデジタルエクスペリエンスに共通のUI要素で、通常は画像と関連するテキストまたはキャプションで構成されます。 作成者は、カード全体をドラッグ&ドロップできるようにしたいと考えていますが、カードの画像を個別に編集したり、関連するテキストをカスタマイズしたりできます。

前提条件

複合コンポーネントの使用例をサポートする次のモデルでは、次の前提条件が必要です。

SPAへの複合コンポーネントの追加

AEMでのSPAの実装に応じて、複合コンポーネントを実装する場合のモデルは3つあります。

以下の節では、カードコンポーネントを例として使用して各ケースを実装する例を示します。

コンポーネントがAEMプロジェクトに存在しません。

開始を行うには、合成コンポーネントを構成するコンポーネント(画像とテキストのコンポーネントなど)を作成します。

  1. AEMプロジェクトでテキストコンポーネントを作成します。

  2. コンポ追加ーネントのeditConfigノード内のプロジェクトの対応するresourceType

     resourceType: 'wknd-spa/components/text' 
    
  3. withMappableヘルパーを使用して、コンポーネントの編集を有効にします。

    export const AEMText = withMappable(Text, TextEditConfig); 
    

テキストコンポーネントは、次のようになります。

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

同様の方法で画像コンポーネントを作成する場合は、AEMTextコンポーネントと組み合わせて新しいカードコンポーネントにし、画像とテキストのコンポーネントを子として使用できます。

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

この合成コンポーネントは、アプリ内の任意の場所に配置でき、SPAエディターでテキストと画像コンポーネントのプレースホルダーが追加されます。 下のサンプルでは、カードコンポーネントがタイトルの下のホームコンポーネントに追加されています。

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

これにより、エディターにテキストと画像の空のプレースホルダーが表示されます。 エディターを使用してこれらの値を入力すると、itemPathで指定された名前でルートレベルの/content/wknd-spa/homeのように、指定されたページパスに保存されます。

エディター内の複合カードコンポーネント

コンポーネントはAEMプロジェクトに存在しますが、必要なコンテンツは存在しません。

この場合、カードコンポーネントは、タイトルと画像ノードを含むAEMプロジェクトに既に作成されています。 子ノード(テキストと画像)には、対応するリソースタイプが含まれます。

カードコンポーネントのノード構造

その後、SPAに追加して、そのコンテンツを取得できます。

  1. SPAで、これに対応するコンポーネントを作成します。 子コンポーネントがSPAプロジェクト内の対応するAEMリソースタイプにマップされていることを確認します。 この例では、前の例で詳細に説明したと同じAEMTextAEMImageのコンポーネントを使用します。

    import React from 'react';
    import { Container, withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { Text, TextEditConfig } from './AEMText';
    import Image, { ImageEditConfig } from './AEMImage';
    
    export const AEMCard = withMappable(Container, {
      resourceType: 'wknd-spa/components/imagecard'
    });
    
    MapTo('wknd-spa/components/text')(Text, TextEditConfig);
    MapTo('wknd-spa/components/image')(Image, ImageEditConfig);
    
  2. imagecardコンポーネントのコンテンツがないので、ページにカードを追加します。 AEMの既存のコンテナをSPAに含めます。

    • AEMプロジェクトに既にコンテナが存在する場合は、代わりにSPAにこれを含め、AEMからコンテナにコンポーネントを追加します。
    • カードコンポーネントがSPAの対応するリソースタイプにマップされていることを確認します。
    <ResponsiveGrid
     pagePath='/content/wknd-spa/home'
     itemPath='root/responsivegrid' />
    
  3. 作成追加されたwknd-spa/components/imagecardコンポーネントは、ページテンプレート内のコンテナコンポーネントに対して許可されているコンポーネントに対して使用されます。

これで、imagecardコンポーネントをAEMエディタ内のコンテナに直接追加できます。

エディタ内の複合カード

コンポーネントと必要なコンテンツはどちらもAEMプロジェクトに存在します。

コンテンツがAEMに存在する場合は、コンテンツへのパスを指定することで、SPAに直接コンテンツを含めることができます。

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

ノード構造内の複合パス

AEMCardコンポーネントは、前の使用例で定義したと同じです。 AEMプロジェクトの上記の場所で定義されたコンテンツは、SPAに含まれます。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now