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

ソフトウェア配布ポータル／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 ファイルを含んだフォルダーでコマンドプロンプトを開き、次のコマンドを実行します。

$ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar

管理者パスワードを admin と入力します。任意の管理者パスワードを使用できますが、ローカル開発には admin を使用して、再設定しなくてすむようにすることをお勧めします。

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

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

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

AEM スタート ​メニューから、ツール／デプロイメント／パッケージ ​に移動します。

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

AEM スタート ​メニューから、アセット／ファイル／WKND Shared／English／Adventures ​に移動します。

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

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

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

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

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

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

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

$ 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 行がコメント解除されており、ファイルで次の変数が宣言されていることを確認します。

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 オーサーに接続することは、開発時によく行われる手法です。変更を公開する必要がないので、コンテンツを迅速に繰り返し使用できるからです。

React アプリをインストールして起動します。

$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

新しいブラウザーウィンドウに、http://localhost:3000 でアプリが自動的に開きます。

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

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

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

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

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

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

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

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

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

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

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