プロジェクトを作成

AEM SPA Editorと統合されたReactアプリケーションの出発点として、Adobe Experience Manager(AEM)Mavenプロジェクトを生成する方法を説明します。

目的

  1. AEMプロジェクトアーキタイプを使用して、SPA Editorが有効なプロジェクトを生成します。
  2. スタータープロジェクトをAEMのローカルインスタンスにデプロイします。

作成する内容

この章では、AEMプロジェクトアーキタイプに基づいて、新しいAEMプロジェクトが生成されます。 AEMプロジェクトは、React SPAの非常にシンプルな出発点でブートストラップ処理されます。

Mavenプロジェクトとは - Apache Mavenis は、プロジェクトを構築するソフトウェア管理ツールです。すべてのAdobe Experience Manager実 装では、Mavenプロジェクトを使用して、AEM上にカスタムコードを作成、管理およびデプロイします。

Mavenアーキタイプとは - Mavenアーキタ プは、新しいプロジェクトを生成するためのテンプレートまたはパターンです。AEMプロジェクトのアーキタイプを使用すると、カスタム名前空間を持つ新しいプロジェクトを生成し、ベストプラクティスに従うプロジェクト構造を含めて、プロジェクトを大幅に高速化できます。

前提条件

ローカル開発環境の設定に必要なツールと手順を確認します。 author​モードで開始した、Adobe Experience Managerの新しいインスタンスがローカルで実行されていることを確認します。

プロジェクトの作成

メモ

このチュートリアルでは、アーキタイプのバージョン​27​を使用します。 新しいプロジェクトを生成する場合は、常にアーキタイプの​最新の​バージョンを使用することをお勧めします。

  1. コマンドラインターミナルを開き、次のMavenコマンドを入力します。

    mvn -B archetype:generate \
     -D archetypeGroupId=com.adobe.aem \
     -D archetypeArtifactId=aem-project-archetype \
     -D archetypeVersion=27 \
     -D appTitle="WKND SPA React" \
     -D appId="wknd-spa-react" \
     -D artifactId="aem-guides-wknd-spa.react" \
     -D groupId="com.adobe.aem.guides.wkndspa.react" \
     -D frontendModule="react" \
     -D aemVersion="cloud"
    
    メモ

    AEM 6.5.5以降をターゲットにする場合は、 aemVersion="cloud"aemVersion="6.5.5"に置き換えます。 6.4.8以降をターゲットにする場合は、aemVersion="6.4.8"を使用します。

    frontendModule=reactプロパティに注意してください。 これにより、AEM SPA Editorで使用するスターターReactコードベースでプロジェクトをブートストラップするよう、AEMプロジェクトアーキタイプに指示します。 appTitleappIdartifactIdgroupIdなどのプロパティを使用して、プロジェクトと目的を特定します。

    プロジェクトの設定に使用できるプロパティの完全なリストは、にあります。

  2. 次のフォルダーとファイル構造は、ローカルファイルシステム上のMavenアーキタイプによって生成されます。

    |--- aem-guides-wknd-spa.react/
        |--- all/
        |--- analyse/
        |--- core/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.config/
        |--- ui.content/
        |--- ui.frontend/
        |--- ui.tests /
        |--- it.tests/
        |--- dispatcher/
        |--- analyse/
        |--- pom.xml
        |--- README.md
        |--- .gitignore
    

    各フォルダーは個々のMavenモジュールを表します。 このチュートリアルでは、主にui.frontendモジュール(Reactアプリ)を使用します。 個々のモジュールに関する詳細は、AEMプロジェクトアーキタイプのドキュメントを参照してください。

プロジェクトのデプロイとビルド

次に、Mavenを使用して、プロジェクトコードをコンパイル、ビルド、AEMのローカルインスタンスにデプロイします。

  1. AEMのインスタンスがポート​4502​上でローカルに実行されていることを確認します。

  2. コマンドラインからaem-guides-wknd-spa.reactプロジェクトディレクトリに移動します。

    $ cd aem-guides-wknd-spa.react
    
  3. 次のコマンドを実行して、プロジェクト全体を構築し、AEMにデプロイします。

    $ mvn clean install -PautoInstallSinglePackage
    

    ビルドには約1分かかり、最後に次のメッセージが表示されます。

    ...
    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
    [INFO]
    [INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
    [INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
    [INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
    [INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
    [INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
    [INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
    [INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
    [INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
    [INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
    [INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
    [INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
    [INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    

    MavenプロファイルautoInstallSinglePackageは、プロジェクトの個々のモジュールをコンパイルし、AEMインスタンスに1つのパッケージをデプロイします。 デフォルトでは、このパッケージは、ポート​4502​でローカルに実行され、資格情報admin:adminを持つAEMインスタンスにデプロイされます。

  4. ローカルのAEMインスタンスで​パッケージマネージャー​に移動します。http://localhost:4502/crx/packmgr/index.jsp.

  5. aem-guides-wknd-spa.reactというプレフィックスが付いた複数のパッケージが表示されます。

    WKND SPA Packages

    AEM Package Manager

    プロジェクトに必要なすべてのカスタムコードは、これらのパッケージにバンドルされ、AEM環境にインストールされます。

作成者コンテンツ

次に、アーキタイプで生成されたスターターSPAを開き、コンテンツの一部を更新します。

  1. サイト​コンソールに移動します。http://localhost:4502/sites.html/content.

    WKND SPAは、国、言語、ホームページを備えた基本的なサイト構造を含んでいます。 この階層は、language_countryisSingleCountryWebsiteのアーキタイプのデフォルト値に基づいています。 これらの値は、プロジェクトの生成時に使用可能なプロパティを更新することで上書きできます。

  2. ページを選択し、メニューバーの「編集」ボタンをクリックして、us > en > WKND SPA Reactホームページ​を開きます。

    サイトコンソール

  3. テキスト​コンポーネントが既にページに追加されています。 このコンポーネントは、AEMの他のコンポーネントと同様に編集できます。

    テキストコンポーネントの更新

  4. 追加の​テキスト​コンポーネントをページに追加します。

    オーサリングエクスペリエンスは、従来のAEM Sitesページと似ています。 現在使用できるコンポーネントの数は限られています。 このチュートリアルでは、さらに詳しく説明します。

Inspect the Single Page Application

次に、ブラウザーの開発者ツールを使用して、これがシングルページアプリケーションであることを確認します。

  1. ページエディター​で、ページ情報​ボタン/公開済みとして表示​をクリックします。

    「公開済みとして表示」ボタン

    これにより、クエリパラメーター?wcmmode=disabledを持つ新しいタブが開き、AEMエディターが効果的にオフになります。http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

  2. ページのソースを表示し、テキストコンテンツ​Hello World​や他のコンテンツが見つからないことに注意してください。 代わりに、次のようなHTMLが表示されます。

    ...
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="spa-root"></div>
        <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
    </body>
    ...
    

    clientlib-react.min.js は、ページに読み込まれ、コンテンツのレンダリングを担当するReact SPAです。

    ただし、コンテンツの送信元は?

  3. 「 」タブに戻ります。http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

  4. ブラウザーの開発者ツールを開き、更新中にページのネットワークトラフィックを調べます。 XHR​リクエストを表示します。

    XHR要求

    http://localhost:4502/content/wknd-spa-react/us/en.model.jsonへのリクエストが必要です。 SPAを駆動するJSON形式のすべてのコンテンツが含まれます。

  5. 新しいタブで、http://localhost:4502/content/wknd-spa-react/us/en.model.jsonを開きます。

    リクエストen.model.jsonは、アプリケーションを駆動するコンテンツモデルを表します。 JSON出力をInspectに送信すると、テキスト​コンポーネントを表すスニペットが表示されます。

    ...
    ":items": {
        "text": {
            "text": "<p>Hello World! Updated content!</p>\r\n",
            "richText": true,
            ":type": "wknd-spa-react/components/text"
        },
        "text_98796435": {
            "text": "<p>A new text component.</p>\r\n",
            "richText": true,
            ":type": "wknd-spa-react/components/text"
        },
    }
    ...
    

    次の章では、このJSONコンテンツがAEMコンポーネントからSPAコンポーネントにマッピングされ、AEM SPA Editorのエクスペリエンスの基盤となる方法を調べます。

    メモ

    JSON出力を自動的にフォーマットするには、ブラウザー拡張機能をインストールすると便利です。

おめでとうございます。

これで、最初のAEM SPA Editorプロジェクトが作成されました。

このSPAは非常に単純だ。 次の数章では、さらに機能が追加されます。

次の手順

SPAの統合 - SPAソースコードをAEMプロジェクトと統合する方法と、SPAを迅速に開発するために使用できるツールについて説明します。

このページ