ドキュメントAEMAEM チュートリアルAEM ヘッドレスチュートリアル

SPA エディタープロジェクト create-project

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 開発者

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

目的

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

作成する内容

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

WKND SPA Angular スタータープロジェクト

従来の Hello World メッセージ。

前提条件

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

プロジェクトの取得

AEM 用の Maven マルチモジュールプロジェクトを作成するには、いくつかの選択肢があります。このチュートリアルでは、最新の AEM プロジェクトアーキタイプをチュートリアルコードのベースとして使用しました。複数のバージョンの AEM をサポートするために、プロジェクトコードが変更されました。下位互換性に関するメモを確認してください。

CAUTION
アーキタイプの​ 最新 ​バージョンを使用して、実際の実装用の新しいプロジェクトを生成することをお勧めします。AEM プロジェクトでは、アーキタイプの aemVersion プロパティを使用して、単一バージョンの AEM をターゲットにしてください。

  1. このチュートリアルの出発点となるものを Git からダウンロードします。

    code language-shell 
    $ 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 プロジェクトを表しています。

    code language-plain 
    |--- 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 プロジェクトを生成する際には、次のプロパティが使用されました。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2
    プロパティ 値
    aemVersion cloud
    appTitle WKND SPA Angular
    appId wknd-spa-angular
    groupId com.adobe.aem.guides
    frontendModule angular
    package com.adobe.aem.guides.wknd.spa.angular
    includeExamples n
    note note
    NOTE
    frontendModule=angular プロパティに注目します。これは、AEM SPA エディターで使用されるスターター Angular コードベースでプロジェクトをブートストラップするように AEM プロジェクトアーキタイプに指示しています。

プロジェクトのビルド

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

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

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

    code language-shell 
    $ 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 にデプロイします。

    code language-shell 
    $ mvn -PautoInstallSinglePackage clean install

    AEM 6.x を使用している場合：

    code language-shell 
    $ mvn clean install -PautoInstallSinglePackage -Pclassic

    プロジェクトの複数のモジュールをコンパイルし、AEM にデプロイしてください。

    code language-plain 
    [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 インスタンスにデプロイします。デフォルトでは、このパッケージは、admin:admin の資格情報でポート 4502 でローカルに実行されている AEM インスタンスにデプロイされます。

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

  5. wknd-spa-angular.all、wknd-spa-angular.ui.apps および wknd-spa-angular.ui.content の 3 つのパッケージが表示されます。

    WKND SPA パッケージ

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

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

作成者コンテンツ

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

  1. Sites コンソール（http://localhost:4502/sites.html/content）に移動します。

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

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

    サイトコンソール

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

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

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

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

単一ページアプリケーションの検査

次に、ブラウザーのデベロッパーツールを使用して、これが単一ページアプリケーションであることを確認します。

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

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

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

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

    code language-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 は、ページに読み込まれてコンテンツのレンダリングを担当する Angular SPA です。

    コンテンツのソース

  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 出力を調べると、テキスト ​コンポーネントを表すスニペットが見つかります。

    code language-json 
    ...
":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 エディターエクスペリエンスの基礎として使用する方法を調べます。

    note note
    NOTE
    JSON 出力を自動的にフォーマットするブラウザー拡張機能をインストールすると役立つ場合があります。

おめでとうございます。 congratulations

最初の AEM SPA エディタープロジェクトを作成できました。

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

次の手順 next-steps

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

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4