SPA Editor Project

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

目的

  1. Mavenアーキタイプから構築された新しいAEM SPA Editorプロジェクトの構造を理解します。
  2. スタータープロジェクトをAEMのローカルインスタンスにデプロイします。

作成する内容

この章では、AEMプロジェクトアーキタイプに基づいて、新しいAEMプロジェクトがデプロイされます。 AEMプロジェクトは、AngularSPAの非常にシンプルな出発点でブートストラップされます。 この章で使用されるプロジェクトは、WKND SPAの実装の基礎となり、今後の章で構築される予定です。

WKND SPAAngularスタータープロジェクト

クラシックなHello Worldメッセージです。

前提条件

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

プロジェクトの取得

AEM用のMavenマルチモジュールプロジェクトを作成するには、いくつかのオプションがあります。 このチュートリアルでは、チュートリアルコードの基礎として最新のAEMプロジェクトアーキタイプを使用しました。 複数のバージョンのAEMをサポートするために、プロジェクトコードに変更が加えられました。 後方互換性に関する注意を確認してください。

注意

ベストプラクティスは、アーキタイプの最新バージョン​を使用して、実際の実装用の新しいプロジェクトを生成することです。 AEMプロジェクトでは、アーキタイプのaemVersionプロパティを使用して、単一バージョンのAEMをターゲットにする必要があります。

  1. このチュートリアルの開始点をGitからダウンロードします。

    $ git clone git@github.com:adobe/aem-guides-wknd-spa.git
    $ cd aem-guides-wknd-spa
    $ git checkout Angular/create-project-start
    
  2. 次のフォルダーとファイル構造は、ローカルファイルシステム上のMavenアーキタイプによって生成されたAEMプロジェクトを表しています。

    |--- aem-guides-wknd-spa
        |--- all/
        |--- core/
        |--- dispatcher/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.content/
        |--- ui.frontend /
        |--- it.tests/
        |--- pom.xml
        |--- README.md
        |--- .gitignore
        |--- archetype.properties
    
  3. AEMプロジェクトアーキタイプからAEMプロジェクトを生成する際に、次のプロパティを使用しました。

    プロパティ
    aemVersion クラウド
    appTitle WKNDSPAAngular
    appId wknd-spa-angular
    groupId com.adobe.aem.guides
    frontendModule angular
    package com.adobe.aem.guides.wknd.spa.angular
    includeExamples n
    メモ

    frontendModule=angularプロパティに注意してください。 これにより、AEMプロジェクトアーキタイプは、スターターAngularコードベースを使用して、AEM SPA Editorでプロジェクトをブートストラップするようになります。

プロジェクトの構築

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

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

  2. コマンドラインターミナルから、Mavenがインストールされていることを確認します。

    $ mvn --version
    Apache Maven 3.6.2
    Maven home: /Library/apache-maven-3.6.2
    Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
    
  3. aem-guides-wknd-spaディレクトリから次のMavenコマンドを実行して、プロジェクトを構築し、AEMにデプロイします。

    $ mvn -PautoInstallSinglePackage clean install
    

    AEM 6.xを使用する場合:

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

    プロジェクトの複数のモジュールをコンパイルし、AEMにデプロイする必要があります。

    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
    [INFO] 
    [INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
    [INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
    [INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
    [INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
    [INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
    [INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
    [INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
    [INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
    [INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
    [INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    

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

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

  5. wknd-spa-angular.allwknd-spa-angular.ui.appswknd-spa-angular.ui.contentの3つのパッケージが表示されます。

    WKND SPA Packages

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

  6. また、spa.project.corecore.wcm.componentsの複数のパッケージも表示されます。 これらは、アーキタイプによって自動的に含まれる依存関係です。 AEMコアコンポーネントの詳細については、を参照してください。

作成者コンテンツ

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

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

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

  2. us / en / WKND SPA Angular Home Page​ページを開くには、ページを選択し、メニューバーの「編集」ボタンをクリックします。

    サイトコンソール

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

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

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

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

Inspect the Single Page Application

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

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

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

    これにより、クエリパラメーター?wcmmode=disabledを持つ新しいタブが開き、AEMエディターが効果的にオフになります。http://localhost:4502/content/wknd-spa-angular/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-angular/clientlibs/clientlib-angular.min.js"></script>
        ...
    </body>
    ...
    

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

    コンテンツの取得元

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

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

    XHR要求

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

  5. 新しいタブで、http://localhost:4502/content/wknd-spa-angular/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-angular/components/text"
        },
        "text_98796435": {
            "text": "<p>A new text component.</p>\r\n",
            "richText": true,
            ":type": "wknd-spa-angular/components/text"
    },
    ...
    

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

    メモ

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

おめでとうございます。

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

現在は非常にシンプルですが、今後の数章では、さらに機能が追加されます。

次の手順

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

このページ