ローカル AEM SDK を使用した AEM ヘッドレスのクイックセットアップ :headding-anchor:setup

AEM ヘッドレスのクイックセットアップでは、WKND Site サンプルプロジェクトのコンテンツと、AEM ヘッドレス GraphQL API を介してコンテンツを使用するサンプルの React アプリ(SPA)を使用して、AEM ヘッドレスを実践できます。このガイドでは、AEM as a Cloud Service SDK を使用します。

前提条件 :headding-anchor:prerequisites

次のツールをローカルにインストールする必要があります。

1. AEM SDK をインストールします。 :headding-anchor:aem-sdk

このセットアップでは、AEM as a Cloud Service SDK を使用して AEM の GraphQL API を調べます。この節では、AEM SDK をインストールしてオーサーモードで実行する方法のクイックガイドを示します。ローカル開発環境のセットアップに関する詳細なガイドについては、こちらを参照してください。

NOTE
AEM as a Cloud Service 環境でチュートリアルを進めることも可能です。クラウド環境を使用する際の追加の注意事項が、このチュートリアルの随所に記載されています。
  1. ソフトウェア配布ポータルAEM as a Cloud Service に移動し、AEM SDK の最新バージョンをダウンロードします。

    ソフトウェア配布ポータル

  2. ダウンロードしたファイルを解凍し、クイックスタート JAR(aem-sdk-quickstart-XXX.jar)を専用フォルダー(~/aem-sdk/author)にコピーします。

  3. この JAR ファイルの名前を aem-author-p4502.jar に変更します。

    author という名前は、クイックスタート JAR がオーサーモードで起動されることを指定しています。p4502 は、クイックスタートがポート 4502 で実行されることを指定しています。

  4. AEM インスタンスをインストールして起動するには、JAR ファイルを含んだフォルダーでコマンドプロンプトを開き、次のコマンドを実行します。

    code language-shell
    $ cd ~/aem-sdk/author
    $ java -jar aem-author-p4502.jar
    
  5. 管理者パスワードを admin と入力します。任意の管理者パスワードを使用できますが、ローカル開発には admin を使用して、再設定しなくてすむようにすることをお勧めします。

  6. AEM サービスのインストールが完了したら、http://localhost:4502 で新しいブラウザーウィンドウが開きます。

  7. ユーザー名 admin と、AEM の初回起動時に選択したパスワード(通常 admin)でログインします。

2. サンプルコンテンツをインストールします。 :headding-anchor:install-sample-content

WKND リファレンスサイト ​のサンプルコンテンツを使用して、チュートリアルの進行を速めます。WKND は架空のライフスタイルブランドであり、AEM トレーニングでよく使用されます。

WKND サイトには、GraphQL エンドポイントの公開に必要な設定が含まれています。実際の実装では、ドキュメントの手順に従って、GraphQL エンドポイントをお客様のプロジェクトに組み込みます。CORS も、WKND サイトの一部としてパッケージ化されています。外部アプリケーションへのアクセスを許可するには、CORS 設定が必要です。CORS について詳しくは、以下を参照してください。

  1. WKND サイト用に最新のコンパイル済み AEM パッケージ(aem-guides-wknd.all-x.x.x.zip)をダウンロードします。

    note note
    NOTE
    classic バージョン​ ではなく、AEM as a Cloud Service と互換性のある標準バージョンをダウンロードします。
  2. AEM スタート ​メニューから、ツールデプロイメントパッケージ ​に移動します。

    パッケージへの移動

  3. パッケージをアップロード」をクリックし、前の手順でダウンロードした WKND パッケージを選択します。「インストール」をクリックして、パッケージをインストールします。

  4. AEM スタート ​メニューから、アセットファイルWKND SharedEnglishAdventures ​に移動します。

    Adventures のフォルダー表示

    これは、WKND ブランドがプロモーションしている様々なアドベンチャーで構成されるすべてのアセットのフォルダーです。これには、画像やビデオなどの従来型のメディアや、コンテンツフラグメント のように AEM に特有のメディアが含まれます。

  5. Downhill Skiing Wyoming フォルダーをクリックし、Downhill Skiing Wyoming コンテンツフラグメントカードをクリックします。

    コンテンツフラグメントカード

  6. Downhill Skiing Wyoming アドベンチャーのコンテンツフラグメントエディターが開きます。

    コンテンツフラグメントエディター

    タイトル」、「説明」、「アクティビティ」などの様々なフィールドでフラグメントが定義されていることがわかります。

    コンテンツフラグメント ​は、AEM でコンテンツを管理する方法の 1 つです。コンテンツフラグメントは、テキスト、リッチテキスト、日付、他のコンテンツフラグメントへの参照などの構造化データ要素で構成された、再利用可能で、プレゼンテーションに依存しないコンテンツです。コンテンツフラグメントについては、後でクイックセットアップで詳しく説明します。

  7. キャンセル」をクリックして、フラグメントを閉じます。他のいくつかのフォルダーに自由に移動して、他のアドベンチャーコンテンツを調べます。

NOTE
Cloud Service 環境を使用している場合は、WKND リファレンスサイトのようなコードベースを Cloud Service 環境にデプロイする方法についてのドキュメントを参照してください。

3. WKND React アプリのダウンロードと実行 :headding-anchor:sample-app

このチュートリアルの目的の 1 つは、GraphQL API を使用して外部アプリケーションから AEM コンテンツを使用する方法を示すことです。このチュートリアルでは、サンプル React アプリを使用します。この React アプリは、AEM の GraphQL API との統合に焦点を当てるため、意図的に単純なものになっています。

  1. 新しいコマンドプロンプトを開き、GitHub からサンプル React アプリのクローンを作成します。

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    $ cd aem-guides-wknd-graphql/react-app
    
  2. 任意の IDE で aem-guides-wknd-graphql/react-app 内の React アプリを開きます。

  3. IDE で、ファイル .env.development/.env.development)を開きます。REACT_APP_AUTHORIZATION 行がコメント解除されており、ファイルで次の変数が宣言されていることを確認します。

    code language-plain
    REACT_APP_HOST_URI=http://localhost:4502
    REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
    # Use Authorization when connecting to an AEM Author environment
    REACT_APP_AUTHORIZATION=admin:admin
    

    REACT_APP_HOST_URI がローカルの AEM SDK を指していることを確認します。便宜上、このクイックスタートでは React アプリを AEM オーサー ​に接続します。オーサー ​サービスには認証が必要なので、アプリは admin ユーザーを使用して接続を確立します。アプリを AEM オーサーに接続することは、開発時によく行われる手法です。変更を公開する必要がないので、コンテンツを迅速に繰り返し使用できるからです。

    note note
    NOTE
    実稼働シナリオでは、アプリは AEM パブリッシュ ​環境に接続します。詳しくは、実稼動デプロイメント ​の節を参照してください。
  4. React アプリをインストールして起動します。

    code language-shell
    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  5. 新しいブラウザーウィンドウに、http://localhost:3000 でアプリが自動的に開きます。

    React スターターアプリ

    AEM 内のアドベンチャーコンテンツのリストが表示されます。

  6. アドベンチャー画像の 1 つをクリックすると、アドベンチャーの詳細が表示されます。アドベンチャーの詳細を返すように、AEM に対してリクエストが実行されます。

    アドベンチャーの詳細表示

  7. ブラウザーの開発者ツールを使用して、ネットワーク ​リクエストを調べます。XHR リクエストを表示し、/graphql/execute.json/... に対する複数の GET リクエストを確認します。このパスプレフィックスにより、AEM の永続クエリのエンドポイントが呼び出され、プレフィックスの後に続く名前とエンコード済みパラメーターを使用して、実行する永続クエリが選択されます。

    GraphQL エンドポイント XHR リクエスト

4. AEM でのコンテンツの編集

React アプリを実行している状態で、AEM のコンテンツを更新し、変更がアプリに反映されることを確認します。

  1. http://localhost:4502 の AEM に移動します。

  2. AssetsファイルWKND 共有英語アドベンチャーバリ島サーフキャンプ ​に移動します。

    Bali Surf Camp フォルダー

  3. Bali Surf Camp のコンテンツフラグメントをクリックして、コンテンツフラグメントエディターを開きます。

  4. アドベンチャーの​ タイトル ​と​ 説明 ​を変更します。

    コンテンツフラグメントの変更

  5. 保存」をクリックして、変更を保存します。

  6. http://localhost:3000 で React アプリを更新して、変更を確認します。

    更新された Bali Surf Camp アドベンチャー

5. GraphiQL の探索 :headding-anchor:graphiql

  1. ツール全般GraphQL クエリエディター ​に移動して、GraphiQL を開きます。

  2. 左側で既存の永続クエリを選択し、クエリを実行して結果を確認します。

    note note
    NOTE
    GraphiQL ツールとGraphQL API については、チュートリアルの後半で詳しく説明します。

おめでとうございます。 :headding-anchor:congratulations

これで、外部アプリケーションが GraphQL で AEM コンテンツを使用できるようになりました。React アプリのコードを自由に調べ、既存のコンテンツフラグメントの変更を引き続き試してください。

次の手順

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