ローカル 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 をインストールしてオーサーモードで実行する方法のクイックガイドを示します。ローカル開発環境のセットアップに関する詳細なガイドについては、こちらを参照してください。
-
ソフトウェア配布ポータル/AEM as a Cloud Service に移動し、AEM SDK の最新バージョンをダウンロードします。
-
ダウンロードしたファイルを解凍し、クイックスタート JAR(
aem-sdk-quickstart-XXX.jar
)を専用フォルダー(~/aem-sdk/author
)にコピーします。 -
この JAR ファイルの名前を
aem-author-p4502.jar
に変更します。author
という名前は、クイックスタート JAR がオーサーモードで起動されることを指定しています。p4502
は、クイックスタートがポート 4502 で実行されることを指定しています。 -
AEM インスタンスをインストールして起動するには、JAR ファイルを含んだフォルダーでコマンドプロンプトを開き、次のコマンドを実行します。
code language-shell $ cd ~/aem-sdk/author $ java -jar aem-author-p4502.jar
-
管理者パスワードを
admin
と入力します。任意の管理者パスワードを使用できますが、ローカル開発にはadmin
を使用して、再設定しなくてすむようにすることをお勧めします。 -
AEM サービスのインストールが完了したら、http://localhost:4502 で新しいブラウザーウィンドウが開きます。
-
ユーザー名
admin
と、AEM の初回起動時に選択したパスワード(通常admin
)でログインします。
2. サンプルコンテンツをインストールします。 :headding-anchor:install-sample-content
WKND リファレンスサイト のサンプルコンテンツを使用して、チュートリアルの進行を速めます。WKND は架空のライフスタイルブランドであり、AEM トレーニングでよく使用されます。
WKND サイトには、GraphQL エンドポイントの公開に必要な設定が含まれています。実際の実装では、ドキュメントの手順に従って、GraphQL エンドポイントをお客様のプロジェクトに組み込みます。CORS も、WKND サイトの一部としてパッケージ化されています。外部アプリケーションへのアクセスを許可するには、CORS 設定が必要です。CORS について詳しくは、以下を参照してください。
-
WKND サイト用に最新のコンパイル済み AEM パッケージ(aem-guides-wknd.all-x.x.x.zip)をダウンロードします。
note note NOTE classic
バージョン ではなく、AEM as a Cloud Service と互換性のある標準バージョンをダウンロードします。 -
AEM スタート メニューから、ツール/デプロイメント/パッケージ に移動します。
-
「パッケージをアップロード」をクリックし、前の手順でダウンロードした WKND パッケージを選択します。「インストール」をクリックして、パッケージをインストールします。
-
AEM スタート メニューから、アセット/ファイル/WKND Shared/English/Adventures に移動します。
これは、WKND ブランドがプロモーションしている様々なアドベンチャーで構成されるすべてのアセットのフォルダーです。これには、画像やビデオなどの従来型のメディアや、コンテンツフラグメント のように AEM に特有のメディアが含まれます。
-
Downhill Skiing Wyoming フォルダーをクリックし、Downhill Skiing Wyoming コンテンツフラグメントカードをクリックします。
-
Downhill Skiing Wyoming アドベンチャーのコンテンツフラグメントエディターが開きます。
「タイトル」、「説明」、「アクティビティ」などの様々なフィールドでフラグメントが定義されていることがわかります。
コンテンツフラグメント は、AEM でコンテンツを管理する方法の 1 つです。コンテンツフラグメントは、テキスト、リッチテキスト、日付、他のコンテンツフラグメントへの参照などの構造化データ要素で構成された、再利用可能で、プレゼンテーションに依存しないコンテンツです。コンテンツフラグメントについては、後でクイックセットアップで詳しく説明します。
-
「キャンセル」をクリックして、フラグメントを閉じます。他のいくつかのフォルダーに自由に移動して、他のアドベンチャーコンテンツを調べます。
3. WKND React アプリのダウンロードと実行 :headding-anchor:sample-app
このチュートリアルの目的の 1 つは、GraphQL API を使用して外部アプリケーションから AEM コンテンツを使用する方法を示すことです。このチュートリアルでは、サンプル React アプリを使用します。この React アプリは、AEM の GraphQL API との統合に焦点を当てるため、意図的に単純なものになっています。
-
新しいコマンドプロンプトを開き、GitHub からサンプル React アプリのクローンを作成します。
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git $ cd aem-guides-wknd-graphql/react-app
-
任意の IDE で
aem-guides-wknd-graphql/react-app
内の React アプリを開きます。 -
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 パブリッシュ 環境に接続します。詳しくは、実稼動デプロイメント の節を参照してください。 -
React アプリをインストールして起動します。
code language-shell $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start
-
新しいブラウザーウィンドウに、http://localhost:3000 でアプリが自動的に開きます。
AEM 内のアドベンチャーコンテンツのリストが表示されます。
-
アドベンチャー画像の 1 つをクリックすると、アドベンチャーの詳細が表示されます。アドベンチャーの詳細を返すように、AEM に対してリクエストが実行されます。
-
ブラウザーの開発者ツールを使用して、ネットワーク リクエストを調べます。XHR リクエストを表示し、
/graphql/execute.json/...
に対する複数の GET リクエストを確認します。このパスプレフィックスにより、AEM の永続クエリのエンドポイントが呼び出され、プレフィックスの後に続く名前とエンコード済みパラメーターを使用して、実行する永続クエリが選択されます。
4. AEM でのコンテンツの編集
React アプリを実行している状態で、AEM のコンテンツを更新し、変更がアプリに反映されることを確認します。
-
http://localhost:4502 の AEM に移動します。
-
Assets/ファイル/WKND 共有/英語/アドベンチャー/バリ島サーフキャンプ に移動します。
-
Bali Surf Camp のコンテンツフラグメントをクリックして、コンテンツフラグメントエディターを開きます。
-
アドベンチャーの タイトル と 説明 を変更します。
-
「保存」をクリックして、変更を保存します。
-
http://localhost:3000 で React アプリを更新して、変更を確認します。
5. GraphiQL の探索 :headding-anchor:graphiql
-
ツール/全般/GraphQL クエリエディター に移動して、GraphiQL を開きます。
-
左側で既存の永続クエリを選択し、クエリを実行して結果を確認します。
note note NOTE GraphiQL ツールとGraphQL API については、チュートリアルの後半で詳しく説明します。
おめでとうございます。 :headding-anchor:congratulations
これで、外部アプリケーションが GraphQL で AEM コンテンツを使用できるようになりました。React アプリのコードを自由に調べ、既存のコンテンツフラグメントの変更を引き続き試してください。