編集可能なコンテナコンポーネント

固定コン ポーネントは、SPAコンテンツを柔軟にオーサリングできますが、このアプローチは厳格で、編集可能コンテンツの正確な構成を定義する開発者が必要です。作成者が例外的なエクスペリエンスを作成できるように、SPA EditorではSPAでのコンテナコンポーネントの使用をサポートしています。 コンテナコンポーネントを使用すると、作成者は、従来のAEM Sitesオーサリングと同様に、許可されたコンポーネントをコンテナにドラッグ&ドロップしたり、コンポーネントをオーサリングしたりできます。

編集可能なコンテナコンポーネント

この章では、SPAで直接AEM Reactコアコンポーネントを使用して、作成者がリッチコンテンツエクスペリエンスを作成およびレイアウトできる、編集可能なコンテナをホームビューに追加します。

WKNDアプリの更新

コンテナコンポーネントをホームビューに追加するには:

  • AEM React編集可能コンポーネントのResponsiveGridコンポーネントの読み込み
  • コンテナコンポーネントで使用するAEM Reactコアコンポーネント(テキストおよび画像)を読み込んで登録します。

ResponsiveGridコンテナコンポーネントでの読み込み

編集可能な領域をホームビューに配置するには、次の操作を行う必要があります。

  1. @adobe/aem-react-editable-componentsからResponsiveGridコンポーネントを読み込みます。
  2. withMappableを使用して登録し、開発者がSPAに配置できるようにします。
  3. また、他のコンテナコンポーネントで再利用できるように、MapToに登録し、コンテナを効果的にネストします。

次の手順を実行します。

  1. IDEでSPAプロジェクトを開きます

  2. src/components/aem/AEMResponsiveGrid.jsにReactコンポーネントを作成する

  3. 次のコードをAEMResponsiveGrid.jsに追加します。

    // Import the withMappable API provided bu the AEM SPA Editor JS SDK
    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    
    // Import the base ResponsiveGrid component
    import { ResponsiveGrid } from "@adobe/aem-react-editable-components";
    
    // The sling:resourceType for which this Core Component is registered with in AEM
    const RESOURCE_TYPE = "wcm/foundation/components/responsivegrid";
    
    // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
    const EditConfig = {
        emptyLabel: "Layout Container",  // The component placeholder in AEM SPA Editor
        isEmpty: function(props) { 
            return props.cqItemsOrder == null || props.cqItemsOrder.length === 0;
        },                              // The function to determine if this component has been authored
        resourceType: RESOURCE_TYPE     // The sling:resourceType this SPA component is mapped to
    };
    
    // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
    MapTo(RESOURCE_TYPE)(ResponsiveGrid, EditConfig);
    
    // withMappable allows the component to be hardcoded into the SPA; <AEMResponsiveGrid .../>
    const AEMResponsiveGrid = withMappable(ResponsiveGrid, EditConfig);
    
    export default AEMResponsiveGrid;
    

このコードは、AEMTitle.jsでAEM Reachコアコンポーネントのタイトルコンポーネント🔗を読み込んだのと似ています。

AEMResponsiveGrid.jsファイルは次のようになります。

AEMResponsiveGrid.js

AEMResponsiveGrid SPAコンポーネントの使用

AEM ResponsiveGridコンポーネントがに登録され、SPA内で使用できるようになったので、ホームビューに配置できます。

  1. react-app/src/App.jsを開いて編集します

  2. AEMResponsiveGridコンポーネントを読み込み、<AEMTitle ...>コンポーネントの上に配置します。

  3. <AEMResponsiveGrid...>コンポーネントに次の属性を設定します

    • pagePath = '/content/wknd-app/us/en/home'
    • itemPath = 'root/responsivegrid'

    これは、このAEMResponsiveGridコンポーネントに対し、AEMリソースからコンテンツを取得するように指示します。

    • /content/wknd-app/us/en/home/jcr:content/root/responsivegrid

    itemPathは、 Remote SPA Page AEMテンプレートで定義されたresponsivegridノードにマッピングされ、 Remote SPA Page AEMテンプレートから作成された新しいAEMページに自動的に作成されます。

    App.jsを更新して、<AEMResponsiveGrid...>コンポーネントを追加します。

    ...
    import AEMResponsiveGrid from './components/aem/AEMResponsiveGrid';
    ...
    
    function Home() {
    return (
        <div className="Home">
            <AEMResponsiveGrid
                pagePath='/content/wknd-app/us/en/home' 
                itemPath='root/responsivegrid'/>
    
            <AEMTitle
                pagePath='/content/wknd-app/us/en/home' 
                itemPath='title'/>
            <Adventures />
        </div>
    );
    }
    

Apps.jsファイルは次のようになります。

App.js

編集可能なコンポーネントの作成

柔軟なオーサリングエクスペリエンスコンテナの効果を最大限に引き出すには、SPA Editorを使用します。 編集可能なタイトルコンポーネントは既に作成されていますが、作成者が新しく追加されたコンテナコンポーネントでテキストおよび画像AEM WCMコアコンポーネントを使用できるように、さらに少し作成します。

テキストコンポーネント

  1. IDEでSPAプロジェクトを開きます

  2. src/components/aem/AEMText.jsにReactコンポーネントを作成する

  3. 次のコードをAEMText.jsに追加します。

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { TextV2, TextV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    const RESOURCE_TYPE = "wknd-app/components/text";
    
    const EditConfig = {    
        emptyLabel: "Text",
        isEmpty: TextV2IsEmptyFn,
        resourceType: RESOURCE_TYPE
    };
    
    MapTo(RESOURCE_TYPE)(TextV2, EditConfig);
    
    const AEMText = withMappable(TextV2, EditConfig);
    
    export default AEMText;
    

AEMText.jsファイルは次のようになります。

AEMText.js

画像コンポーネント

  1. IDEでSPAプロジェクトを開きます

  2. src/components/aem/AEMImage.jsにReactコンポーネントを作成する

  3. 次のコードをAEMImage.jsに追加します。

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { ImageV2, ImageV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    const RESOURCE_TYPE = "wknd-app/components/image";
    
    const EditConfig = {    
        emptyLabel: "Image",
        isEmpty: ImageV2IsEmptyFn,
        resourceType: RESOURCE_TYPE
    };
    
    MapTo(RESOURCE_TYPE)(ImageV2, EditConfig);
    
    const AEMImage = withMappable(ImageV2, EditConfig);
    
    export default AEMImage;
    
  4. AEMImage.scssのカスタムスタイルを提供するSCSSファイルsrc/components/aem/AEMImage.scssを作成します。 これらのスタイルは、AEM ReactコアコンポーネントのBEM表記のCSSクラスをターゲットにしています。

  5. 次のSCSSをAEMImage.scssに追加します。

    .cmp-image__image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
     }
    
  6. AEMImage.jsAEMImage.scssを読み込む

    ...
    import './AEMImage.scss';
    ...
    

AEMImage.jsAEMImage.scssは次のようになります。

AEMImage.jsとAEMImage.scss

編集可能なコンポーネントの読み込み

新しく作成されたAEMTextAEMImage SPAコンポーネントは、SPAで参照され、AEMから返されるJSONに基づいて動的にインスタンス化されます。 これらのコンポーネントをSPAで確実に使用できるようにするには、App.jsにそれらのコンポーネントのimport文を作成します

  1. IDEでSPAプロジェクトを開きます

  2. ファイルsrc/App.jsを開きます。

  3. AEMTextAEMImageのimport文を追加します

    ...
    import AEMText from './components/aem/AEMText';
    import AEMImage from './components/aem/AEMImage';
    ...
    

結果は次のようになります。

Apps.js

これらのインポートが​追加​されない場合、AEMTextおよびAEMImageコードはSPAによって呼び出されないので、指定されたリソースタイプに対してコンポーネントが登録されません。

AEMでのコンテナの設定

AEMコンテナコンポーネントは、ポリシーを使用して、許可されるコンポーネントを指定します。 SPA Editorを使用する場合、SPAコンポーネントがマッピングされたAEM WCMコアコンポーネントのみがSPAでレンダリング可能なので、これは重要な設定です。 SPA実装を提供したコンポーネントのみが許可されていることを確認します。

  • AEMTitle マッピング済み wknd-app/components/title
  • AEMText マッピング済み wknd-app/components/text
  • AEMImage マッピング済み wknd-app/components/image

リモートSPAページテンプレートのreponsivegridコンテナを構成するには:

  1. AEMオーサーにログインします。

  2. ツール/一般/テンプレート/WKNDアプリ​に移動します。

  3. レポートのSPAページ​を編集します

    レスポンシブグリッドポリシー

  4. 右上のモード切り替えボタンで「構造」を選択します。

  5. レイアウトコンテナ​をタップして選択します。

  6. ポップアップバーの​ポリシー​アイコンをタップします

    レスポンシブグリッドポリシー

  7. 右側の「許可されているコンポーネント」タブで、「WKND APP - CONTENT」を展開します。

  8. 次の項目のみが選択されていることを確認します。

    • 画像
    • テキスト
    • タイトル

    リモートSPAページ

  9. 完了​をタップします。

AEMでのコンテナのオーサリング

SPAを更新して<AEMResponsiveGrid...>を埋め込み、3つのAEM React Coreコンポーネント(AEMTitleAEMTextAEMImage)をラッパーし、AEMを適切なテンプレートポリシーで更新すると、コンテナコンポーネントでコンテンツのオーサリングを開始できます。

  1. AEMオーサーにログインします。

  2. サイト/WKNDアプリ​に移動します。

  3. ホーム」をタップし、上部のアクションバーから「編集」を選択します

    • 「Hello World」テキストコンポーネントが表示されます。これは、AEMプロジェクトのアーキタイプからプロジェクトを生成する際に、自動的に追加されたものです
  4. ページエディターの右上にあるモードセレクターから「編集」を選択します。

  5. タイトルの下にある​レイアウトコンテナ​編集可能領域を見つけます

  6. ページエディターのサイドバー​を開き、コンポーネントビュー​を選択します。

  7. 次のコンポーネントを​レイアウトコンテナ​にドラッグします。

    • 画像
    • タイトル
  8. コンポーネントをドラッグして、次の順序に並べ替えます。

    1. タイトル
    2. 画像
    3. テキスト
  9. ____ Authorthe ____ Titlecomponent

    1. タイトルコンポーネントをタップし、レンチ​アイコンをタップして、タイトルコンポーネントを​編集​します。
    2. 次のテキストを追加します。
      • タイトル:夏が来るので、それを最大限に活かそう!
      • 型:H1
    3. 完了​をタップします。
  10. ____ Imagecomponentを作成 ____ する

    1. 画像コンポーネントの(アセットビューに切り替えた後の)サイドバーから画像をドラッグします
    2. 画像コンポーネントをタップし、レンチ​アイコンをタップして編集します
    3. 画像は装飾画像 」チェックボックスをオンにします。
    4. 完了​をタップします。
  11. ____ Textcomponentを作成 ____ する

    1. テキストコンポーネントをタップし、レンチ​アイコンをタップして、テキストコンポーネントを編集します。
    2. 次のテキストを追加します。
      • 今、1週間の冒険で15%、2週間以上の冒険で20%オフにできます。チェックアウト時に、キャンペーンコードSUMMERISCOMINGを追加して、割引を受け取ります。
    3. 完了​をタップします。
  12. コンポーネントがオーサリングされ、垂直にスタックされます。

    作成したコンポーネント

    コンポーネントのサイズとレイアウトを調整するには、 AEMレイアウトモードを使用します。

  13. 右上のモードセレクターを使用して、レイアウトモード​に切り替えます。

  14. ____ 画像コンポーネントとテキストコンポーネントを並べて表示するようにサイズ変更する

    • ____ Imagecomponentは8列幅にす る必要があります
    • ____ テキストコンポーネントは幅 が3列である必要があります

    レイアウトコンポーネント

  15. ____ AEMページエディターでの変更のプレビュー

  16. http://localhost:3000上でローカルで実行されているWKNDアプリを更新し、作成した変更を確認します。

    SPAのコンテナコンポーネント

おめでとうございます。

作成者がWKNDアプリに編集可能なコンポーネントを追加できるコンテナコンポーネントを追加しました。 次の方法がわかりました。

  • SPAでAEM React編集可能コンポーネントのResponsiveGridコンポーネントを使用します。
  • コンテナコンポーネントを使用して、SPAで使用するAEM Reactコアコンポーネント(テキストおよび画像)を登録します。
  • リモートSPAページテンプレートの設定で、SPAが有効なコアコンポーネントを許可する
  • コンテナコンポーネントへの編集可能なコンポーネントの追加
  • SPA Editorでのオーサーコンポーネントとレイアウトコンポーネント

次の手順

次の手順では、同じ方法を使用して、SPAのアドベンチャー詳細ルート🔗に編集可能なコンポーネントを追加します。

このページ