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

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

Last update: Tue Apr 28 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • 初心者
  • 開発者
IMPORTANT
SPA エディターは、新しいプロジェクトでは非推奨（廃止予定）になりました。アドビでは既存のプロジェクトに対して引き続きサポートしますが、新しいプロジェクトには使用しないでください。AEM でヘッドレスコンテンツの管理に推奨されるエディターは次のようになりました。

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

  4. ローカル AEM インスタンスの​ Package Manager ​に移動します：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