動的ルートと編集可能なコンポーネント
この章では、2 つの動的な「アドベンチャーの詳細」ルートを有効にして、編集可能なコンポーネント（Bali Surf Camp と Beervana in Portland）をサポートします。
「アドベンチャーの詳細」SPA ルートは、/adventure/:slug として定義されます。slug は、アドベンチャーコンテンツフラグメント上の一意の識別子プロパティです。
SPA URL の AEM ページへのマッピング
前の 2 つの章では、編集可能なコンポーネントのコンテンツを SPA のホームビューから、/content/wknd-app/us/en/ の AEM の対応するリモート SPA ルートページにマッピングしました。
SPA の動的ルートの編集可能なコンポーネントのマッピングの定義は似ていますが、ルートのインスタンスと AEM ページの間で 1 対 1 のマッピングスキームを作成する必要があります。
このチュートリアルでは、パスの最後のセグメントである WKND アドベンチャーコンテンツフラグメントの名前の名前を取得し、/content/wknd-app/us/en/adventure の下のシンプルなパスにマッピングします。
したがって、このマッピングに基づいて、次の場所に 2 つの新しい AEM ページを作成する必要があります。
/content/wknd-app/us/en/home/adventure/bali-surf-camp/content/wknd-app/us/en/home/adventure/beervana-in-portland
リモート SPA のマッピング
リモート SPA から移動する要求のマッピングは、SPA のブートストラップで行われる setupProxy 設定を介して設定されます。
SPA エディターのマッピング
SPA が AEM SPA エディターで開かれたときの SPA 要求のマッピングは、AEM の設定で行われる Sling マッピング設定を使用して設定されます。
AEM でのコンテンツページの作成
まず、中間の adventure ページセグメントを作成します。
-
AEM オーサーにログインします。
-
Sites／WKND アプリ／米国／英語／WKND アプリのホームページ に移動します
- この AEM ページは SPA のルートとしてマッピングされるので、ここから他の SPA ルートの AEM ページ構造の構築を開始します。
-
「作成」をタップし、「ページ」を選択します
-
リモート SPA ページ テンプレートを選択し、「次へ」をタップします
-
ページプロパティの入力
- タイトル：Adventure
- 名前：
adventure- この値は AEM ページの URL を定義するので、SPA のルートセグメントと一致する必要があります。
-
「完了」をタップします
次に、編集可能な領域が必要な各 SPA URL に対応する AEM ページを作成します。
-
サイト管理者の新しい Adventure ページに移動します
-
「作成」をタップし、「ページ」を選択します
-
リモート SPA ページ テンプレートを選択し、「次へ」をタップします
-
ページプロパティの入力
- タイトル：Bali Surf Camp
- 名前：
bali-surf-camp- この値は AEM ページの URL を定義するので、SPA のルートの最後のセグメントと一致する必要があります
-
「完了」をタップします
-
手順 3～6 を繰り返して、Beervana in Portland ページ（以下を含む）を作成します。
- タイトル：Beervana in Portland
- 名前：
beervana-in-portland- この値は AEM ページの URL を定義するので、SPA のルートの最後のセグメントと一致する必要があります
これら 2 つの AEM ページには、一致する SPA ルート用にそれぞれオーサリングされたコンテンツが格納されます。 他の SPA ルートでオーサリングが必要な場合は、AEM のリモート SPA ページのルートページ（/content/wknd-app/us/en/home）の下にある SPA の URL で、新しい AEM ページを作成する必要があります。
WKND アプリの更新
最後の章で作成した <ResponsiveGrid...> コンポーネントを AdventureDetail SPA コンポーネントに配置して、編集可能なコンテナを作成します。
ResponsiveGrid SPA コンポーネントの配置
<ResponsiveGrid...> を AdventureDetail コンポーネントに配置すると、そのルートに編集可能なコンテナが作成されます。これは、複数のルートが AdventureDetail コンポーネントを使用してレンダリングするので、<ResponsiveGrid...>'s pagePath 属性を動的に調整する必要があるためです。 pagePath は、ルートのインスタンスに表示されるアドベンチャーに基づいて、対応する AEM ページを指すように派生する必要があります。
-
react-app-/src/components/AdventureDetail.jsを開いて編集する -
ResponsiveGridコンポーネントを読み込んで、<h2>Itinerary</h2>コンポーネントの上に配置します。 -
<ResponsiveGrid...>コンポーネントに次の属性を設定します。pagePath属性は、上で定義されたマッピングに従ってアドベンチャーページにマップされる現在のslugを追加することに注意します。pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'itemPath = 'root/responsivegrid'
これは、
ResponsiveGridコンポーネントが AEM リソースからコンテンツを取得するように指示するものです。/content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid
AdventureDetail.js を次の行で更新します。
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...
function AdventureDetailRender(props) {
...
// Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
const { slug } = useParams();
return(
...
// Pass the slug in
function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
groupSize, difficulty, price, description, itinerary, references, slug }) {
...
return (
...
<ResponsiveGrid
pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
itemPath="root/responsivegrid"/>
<h2>Itinerary</h2>
...
)
}
)
}
この AdventureDetail.js ファイルは次のようになります。
AEM でのコンテナの作成
<ResponsiveGrid...> が配置され、その pagePath がレンダリングされるアドベンチャーに基づいて動的に設定されている状態で、その中にコンテンツをオーサリングします。
-
AEM オーサーにログインします。
-
Sites／WKND アプリ／米国／英語 に移動
-
WKND アプリのホームページ のページを 編集
- Bali Surf Camp SPAで編集するルートに移動
-
右上のモードセレクターから プレビュー を選択
-
SPA 内の Bali Surf Camp のカードをタップして、そのルートに移動します。
-
モードセレクターから「編集」を選択します。
-
「Itinerary」のすぐ上にある レイアウトコンテナ の編集可能な領域を見つける
-
ページエディターのサイドバー をクリックし、「コンポーネント表示」を選択します。
-
有効なコンポーネントのいくつかを レイアウトコンテナ にドラッグします。
- 画像
- テキスト
- タイトル
プロモーションマーケティング資料を作成します。 次のようになります。
-
AEM ページエディターで変更内容をプレビュー
-
http://localhost:3000 でローカルに動作している WKND アプリを更新し、Bali Surf Camp ルートに移動して、オーサリングした変更を確認します。
AEM ページがマッピングされていないアドベンチャーの詳細ルートに移動する場合、そのルートインスタンスにはオーサリング機能はありません。これらのページでオーサリングを可能にするには、アドベンチャー ページの下に、同じ名前の AEM ページを作成します。
これで完了です。
これで完了です。オーサリング機能が SPA で動的ルートに追加されました。
- AEM React 編集可能コンポーネントの ResponsiveGrid コンポーネントを動的ルートに追加しました。
- SPA（Bali Surf Camp と Beervana in Portland）での 2 つの特定のルートのオーサリングをサポートする AEM ページを作成しました。
- 動的な Bali Surf Camp ルートのコンテンツを作成しました。
AEM SPA エディターを使用して、特定の編集可能な領域を Remote SPA に追加する方法の最初の手順を完了しました。