ナビゲーションとルーティングの追加
作成対象:
- 初心者
- 開発者
SPA Editor SDK を使用して AEM ページにマッピングすることで、SPA の複数のビューをサポートする方法について説明します。 動的ナビゲーションは、React Router と React Core Components を使用して実装されています。
目的
- SPA エディターを使用する際に利用可能な SPA モデルのルーティングオプションについて説明します。
- React Router を使用して SPA の様々なビューを移動する方法を説明します。
- AEM React コアコンポーネントを使用して、AEM のページ階層に基づく動的ナビゲーションを学ぶ。
作成する内容
この章では、AEM の SPA にナビゲーションを追加します。 ナビゲーションメニューは AEM のページ階層によって起動され、ナビゲーションコアコンポーネントが提供する JSON モデルを活用します。
前提条件
ローカル開発環境の設定に必要なツールや手順を確認します。この章は、コンポーネントのマッピングの続きとなりますが、必要な操作をすべて実行するには、SPA 対応 AEM プロジェクトをローカル AEM インスタンスにデプロイする必要があります。
テンプレートへのナビゲーションの追加
-
ブラウザーを開き、AEM(http://localhost:4502/)にログインします。開始コードベースは、既にデプロイされている必要があります。
-
SPA ページテンプレート(http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html)に移動します。
-
一番外にある「ルートレイアウトコンテナ」を選択し、その ポリシー アイコンをクリックします。オーサリングのためにロック解除された レイアウトコンテナ を選択 しない ように注意してください。
-
SPA 構造 という名前の新しいポリシーを作成します。
許可されたコンポーネント/一般 で レイアウトコンテナ のコンポーネントを選択します。
許可されたコンポーネント/WKND SPA REACT - 構造 で ナビゲーション コンポーネントを選択します。
許可されたコンポーネント/WKND SPA REACT - コンテンツ で、画像 および テキスト のコンポーネントを選択します。合計 4 つのコンポーネントを選択する必要があります。
「完了」をクリックして、変更を保存します。
-
ページを更新し、ロック解除された レイアウトコンテナ の上に ナビゲーション コンポーネントを追加します。
-
ナビゲーション コンポーネントを選択し、その ポリシー アイコンをクリックして、ポリシーを編集します。
-
SPA ナビゲーション の ポリシーのタイトル を使用して新しいポリシーを作成します。
「プロパティ」で、次の手順を実行します。
- 「ナビゲーションルート」を
/content/wknd-spa-react/us/en
に設定します。 - 「ルートレベルを除外」を 1 に設定します。
- 「すべての子ページを収集」チェックボックスをオフにします。
- 「ナビゲーション構造の深度」を 3 に設定します。
これにより、
/content/wknd-spa-react/us/en
の 2 レベル下のナビゲーションが収集されます。 - 「ナビゲーションルート」を
-
変更を保存すると、テンプレートの一部として入力された
Navigation
が表示されます。
子ページの作成
次に、AEM で別のビューとして機能する追加のページを作成します。 また、AEM が提供する JSON モデルの階層構造も調べます。
-
Sites コンソール(http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home)に移動します。「WKND SPA React ホームページ」を選択し、作成/ページ をクリックします。
-
「テンプレート」で「SPA ページ」を選択します。プロパティ で、タイトル に「Page 1」、名前に「page-1」と入力します。
「作成」をクリックし、ダイアログのポップアップで「開く」をクリックして、AEM SPA エディターでページを開きます。
-
新規 テキスト コンポーネントをメインの レイアウトコンテナ に追加します。コンポーネントを編集し、RTE と H2 要素を使用して「Page 1」というテキストを入力します。
画像などのコンテンツを自由に追加できます。
-
AEM Sites コンソールに戻り、上記の手順を繰り返して、Page 1 の兄弟として Page 2 という名前の 2 番目のページを作成します。
-
最後に、3 番目のページである Page 3 を、Page 2 の 子 として作成します。完了すると、サイト階層は次のようになります。
-
ナビゲーションコンポーネントを使用して、SPA の様々な領域に移動できるようになりました。
-
AEM エディターの外部でページを開きます。http://localhost:4502/content/wknd-spa-react/us/en/home.html。ナビゲーション コンポーネントを使用して、アプリの様々なビューに移動します。
-
ブラウザーのデベロッパーツールを使用して、ナビゲート中にネットワークリクエストを調べます。以下のスクリーンショットは、Google Chrome ブラウザーからキャプチャしたものです。
最初のページを読み込んだ後、後続のナビゲーションでページ全体が更新されず、以前訪問したページに戻る際にネットワークトラフィックが最小化されていることを確認します。
階層ページの JSON モデル
次に、SPA のマルチビューエクスペリエンスを推進する JSON モデルを調べます。
-
新規タブで、AEM が提供する JSON モデル API を開きます。http://localhost:4502/content/wknd-spa-react/us/en.model.json。ブラウザー拡張機能を使用して JSON の形式を設定すると役立つ場合があります。
この JSON コンテンツは、SPAが最初に読み込まれる際にリクエストされます。 外側の構造は次のようになります。
{ "language": "en", "title": "en", "templateName": "spa-app-template", "designPath": "/libs/settings/wcm/designs/default", "cssClassNames": "spa page basicpage", ":type": "wknd-spa-react/components/spa", ":items": {}, ":itemsOrder": [], ":hierarchyType": "page", ":path": "/content/wknd-spa-react/us/en", ":children": { "/content/wknd-spa-react/us/en/home": {}, "/content/wknd-spa-react/us/en/home/page-1": {}, "/content/wknd-spa-react/us/en/home/page-2": {}, "/content/wknd-spa-react/us/en/home/page-2/page-3": {} } }
:children
には、作成した各ページのエントリが表示されます。 すべてのページのコンテンツは、この最初の JSON リクエストに含まれます。 ナビゲーションルーティングを使用すると、コンテンツが既にクライアントサイドで使用可能になっているため、SPA の後続のビューが素早く読み込まれます。最初のページの読み込みが遅くなるため、最初の JSON リクエストで SPA の すべて のコンテンツを読み込むのは得策ではありません。次に、ページの階層の深度を収集する方法について説明します。
-
SPA Root テンプレートに移動します。http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app- template/structure.html。
ページプロパティメニュー/ページポリシー をクリックします。
-
SPA Root テンプレートにある「階層構造」タブでは、収集される JSON コンテンツを制御できます。 構造深度 では、root の下にある子ページのサイト階層内での収集深度が決定されます。「構造パターン」フィールドを使用して、正規表現に基づいて追加のページを除外することもできます。
「構造の深度」を 2 に更新します。
「完了」をクリックして、変更をポリシーに保存します。
-
JSON モデルを再度開きます。 http://localhost:4502/content/wknd-spa-react/us/en.model.json
{ "language": "en", "title": "en", "templateName": "spa-app-template", "designPath": "/libs/settings/wcm/designs/default", "cssClassNames": "spa page basicpage", ":type": "wknd-spa-react/components/spa", ":items": {}, ":itemsOrder": [], ":hierarchyType": "page", ":path": "/content/wknd-spa-react/us/en", ":children": { "/content/wknd-spa-react/us/en/home": {}, "/content/wknd-spa-react/us/en/home/page-1": {}, "/content/wknd-spa-react/us/en/home/page-2": {} } }
Page 3 のパス(最初の JSON モデルの
/content/wknd-spa-react/us/en/home/page-2/page-3
)が削除されています。これは、Page 3 が階層のレベル 3 にあり、レベル 2 の最大深度のコンテンツのみを含めるようにポリシーを更新したためです。 -
SPA ホームページ(http://localhost:4502/content/wknd-spa-react/us/en/home.html)を再度開き、ブラウザーのデベロッパーツールを開きます。
ページを更新すると、SPA Root である
/content/wknd-spa-react/us/en.model.json
への XHR リクエストが表示されます。このチュートリアルで前述した SPA ルートテンプレートの階層の深さ設定に基づいて、3 つの子ページのみが含まれます。 これには、Page 3 は含まれません。 -
デベロッパーツールを開いた状態で、
Navigation
コンポーネントを使用して Page 3 に直接移動します。/content/wknd-spa-react/us/en/home/page-2/page-3.model.json
に対して新しい XHR リクエストが行われることを確認します。AEM Model Manager では、Page 3 の JSON コンテンツは使用せず、追加の XHR リクエストを自動的にトリガーします。
-
http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html に直接移動して、ディープリンクを試します。また、ブラウザーの「戻る」ボタンが引き続き機能することを確認します。
React ルーティングの検査
ナビゲーションとルーティングは React Router で実装されています。React Router は、React アプリケーション用のナビゲーションコンポーネントのコレクションです。AEM React コアコアコンポーネントは、React Router の機能を使用して、前の手順で使用した ナビゲーション コンポーネントを実装します。
次に、React Router が SPA とどのように統合されているかを調べ、React Router のリンクコンポーネントを使用して実験します。
-
IDE で、
ui.frontend/src/index.js
にあるファイルindex.js
を開きます。/* index.js */ import { Router } from 'react-router-dom'; ... ... ModelManager.initialize().then(pageModel => { const history = createBrowserHistory(); render( <Router history={history}> <App history={history} cqChildren={pageModel[Constants.CHILDREN_PROP]} cqItems={pageModel[Constants.ITEMS_PROP]} cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]} cqPath={pageModel[Constants.PATH_PROP]} locationPathname={window.location.pathname} /> </Router>, document.getElementById('spa-root') ); });
App
が React Router のRouter
コンポーネントにラップされていることを確認します。ModelManager
は AEM SPA Editor JS SDK で提供され、JSON モデル API に基づいて動的ルートを AEM ページに追加します。 -
ui.frontend/src/components/Page/Page.js
でファイルPage.js
を開きますclass AppPage extends Page { get containerProps() { let attrs = super.containerProps; attrs.className = (attrs.className || '') + ' page ' + (this.props.cssClassNames || ''); return attrs; } } export default MapTo('wknd-spa-react/components/page')( withComponentMappingContext(withRoute(AppPage)) );
Page
SPA コンポーネントは、MapTo
関数を使用して、AEM の ページ を対応する SPA コンポーネントにマップします。withRoute
ユーティリティは、cqPath
プロパティに基づいて、SPA を適切な AEM 子ページに動的にルーティングするのに役立ちます。 -
ui.frontend/src/components/Header/Header.js
でHeader.js
コンポーネントを開きます。 -
Header
を更新して、ホームページへのリンクで<h1>
タグをラップします。//Header.js import React, {Component} from 'react'; + import {Link} from 'react-router-dom'; require('./Header.css'); export default class Header extends Component { render() { return ( <header className="Header"> <div className="Header-container"> + <Link to="/content/wknd-spa-react/us/en/home.html"> <h1>WKND</h1> + </Link> </div> </header> ); }
デフォルトの
<a>
アンカータグを使用する代わりに、React Router が提供する<Link>
を使用します。to=
が有効なルートを指す場合、SPA はそのルートに切り替わり、ページ全体の更新は実行 しません。ここでは、単にホームページへのリンクをハードコードして、Link
の使用法について説明します。 -
ui.frontend/src/App.test.js
でApp.test.js
のテストを更新します。+ import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(<App />, div); + ReactDOM.render(<Router><App /></Router>, div); });
App.js
で参照される静的コンポーネント内で React Router の機能を使用しているため、単体テストを更新する際には考慮が必要です。 -
ターミナルを開き、プロジェクトのルートに移動して、Maven スキルを使用して AEM にプロジェクトをデプロイします。
$ cd aem-guides-wknd-spa.react $ mvn clean install -PautoInstallSinglePackage
-
AEM で SPA のいずれかのページに移動します。http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html
Navigation
コンポーネントを使用して移動する代わりに、Header
内のリンクを使用します。ページ全体の更新がトリガー されず、SPA ルーティングが機能していることを確認します。
-
必要に応じて、標準の
<a>
アンカータグを使用してHeader.js
ファイルで試します。<a href="/content/wknd-spa-react/us/en/home.html"> <h1>WKND</h1> </a>
これは、SPA ルーティングと通常の web ページリンクの違いを説明するのに役立ちます。
おめでとうございます。
これで、SPA Editor SDK で AEM ページにマッピングすることで、SPA の複数のビューをサポートする方法を学びました。 React Router を使用して動的ナビゲーションが実装され、Header
コンポーネントに追加されました。