1.1.2 AEM CS 環境のセットアップ

1.1.2.1 GitHub リポジトリの設定

https://github.com に移動します。 「ログイン」をクリックします。

資格情報を入力します。 「ログイン」をクリックします。

ログインすると、GitHub ダッシュボードが表示されます。

https://github.com/adobe-rnd/aem-boilerplate-xcom に移動します。 その後、これが表示されます。 「このテンプレートを使用」をクリックし、「新しいリポジトリを作成」をクリックします。

リポジトリ名 には、citisignal-aem-accs を使用します。 表示を プライベート に設定します。 リポジトリを作成 をクリックします。

数秒後に、リポジトリが作成されます。

次に、https://github.com/apps/aem-code-sync に移動します。 インストール または 設定 をクリックします。

GitHub ユーザーアカウントの横にある 続行 ボタンをクリックします。

GitHub ユーザーアカウントの横にある 設定 をクリックします。

リポジトリのみを選択 をクリックし、作成したリポジトリを追加します。

下にスクロールして、「保存」をクリックします。

この確認が表示されます。

1.1.2.2 更新ファイル fstab.yaml

GitHub リポジトリで、をクリックしてファイル fstab.yaml を開きます。

編集 アイコンをクリックします。

ここで、3 行目のフィールド url の値を更新する必要があります。

GitHub リポジトリの設定と組み合わせて、特定のAEM Sites CS 環境の URL で現在の値を置き換える必要があります。

URL の現在の値：https://author-p130360-e1272151.adobeaemcloud.com/bin/franklin.delivery/adobe-rnd/aem-boilerplate-xcom/main。

URL には、更新が必要な 3 つの部分があります

https://XXX/bin/franklin.delivery/YYY/ZZZ/main

XXX は、AEM CS オーサー環境の URL に置き換える必要があります。

YYY は GitHub ユーザーアカウントに置き換える必要があります。

ZZZ は、前の演習で使用した GitHub リポジトリの名前に置き換える必要があります。

AEM CS オーサー環境の URL は、https://my.cloudmanager.adobe.com で確認できます。 プログラム をクリックして開きます。

次に、「環境」タブの 3 つのドット … をクリックし、「詳細を表示」をクリックします。

オーサー 環境の URL など、環境の詳細が表示されます。 URL をコピーします。

XXX = author-p166717-e1786231.adobeaemcloud.com

GitHub ユーザーアカウント名の場合は、ブラウザーの URL で簡単に見つけることができます。 この例では、ユーザーアカウント名は woutervangeluwe です。

YYY = woutervangeluwe

GitHub リポジトリ名については、GitHub で開いたブラウザーウィンドウでも見つけることができます。 この場合、リポジトリ名は citisignal です。

ZZZ = citisignal-aem-accs

これらの 3 つの値を組み合わせると、この新しい URL が表示されます。この URL はファイル fstab.yaml で設定する必要があります。

https://author-p166717-e1786231.adobeaemcloud.com/bin/franklin.delivery/woutervangeluwe/citisignal-aem-accs/main

「変更をコミット…」をクリックします。

「変更をコミット」をクリックします。

ファイル fstab.yaml が更新されました。

1.1.2.3 CitiSignal アセットおよびサイトのアップロード

https://my.cloudmanager.adobe.com に移動します。 プログラム をクリックして開きます。

次に、オーサー環境の URL をクリックします。

Adobeでログイン をクリックします。

その後、オーサー環境が表示されます。

URL は次のようになります：https://author-p166717-e1786231.adobeaemcloud.com/ui#/aem/aem/start.html?appId=aemshell

次に、AEMの CRX パッケージマネージャー 環境にアクセスする必要があります。 それには、URL から ui#/aem/aem/start.html?appId=aemshell を削除し、crx/packmgr に置き換えます。つまり、URL は次のようになります。
https://author-p166717-e1786231.adobeaemcloud.com/crx/packmgr。
Enter キーを押して、パッケージマネージャー環境を読み込みます

次に、「パッケージをアップロード」をクリックします。

参照 をクリックして、アップロードするパッケージを探します。

アップロードするパッケージは citisignal-assets.zip と呼ばれ、次の場所でダウンロードできます。https://one-adobe-tech-insiders.s3.us-west-2.amazonaws.com/one-adobe/citisignal_aem_accs.zip

パッケージ citisignal_aem_accs.zip を選択し、「開く をクリックします。

次に、「OK」をクリックします。

その後、パッケージがアップロードされます。 次に、アップロードしたパッケージの インストール をクリックします。

インストール をクリックします。

数分後、パッケージがインストールされます。

これで、このウィンドウを閉じることができます。

CitiSignal アセッ 1.1.2.4 の公開

https://my.cloudmanager.adobe.com に移動します。 プログラム をクリックして開きます。

次に、オーサー環境の URL をクリックします。

Adobeでログイン をクリックします。

その後、オーサー環境が表示されます。 Assets をクリックします。

ファイル をクリックします。

フォルダ CitiSignal をクリックして選択し、[ 公開の管理 ]​ をクリック ます。

「次へ」をクリックします。

「公開」をクリックします。

アセットが公開されました。

1.1.2.5 CitiSignal web サイトの公開

画面の左上隅にある Adobe Experience Manager の商品名をクリックし、Assets の横にある 矢印 をクリックします。

次に、「サイト」をクリックします。

その後、パッケージをインストールする前に作成した CitiSignal web サイトが表示されます。

以前に作成した GitHub リポジトリにサイトをリンクするには、Edge Delivery Services Configuration を作成する必要があります。

その最初の手順は、クラウド設定 を作成することです。

これを行うには、画面の左上隅にある Adobe Experience Manager の製品名をクリックし、ツール アイコンをクリックして 一般 を選択します。 設定ブラウザー をクリックして開きます。

この画像が表示されます。 作成 をクリックします。

「タイトル」フィールドと「名前」フィールドを CitiSignal に設定します。 クラウド設定 のチェックボックスを有効にします。

「作成」をクリックします。

これで完了です。

次に、作成した クラウド設定 のいくつかのフィールドを更新する必要があります。

これを行うには、画面の左上隅にある Adobe Experience Manager の製品名をクリックし、「ツール」アイコンをクリックして「クラウドサービス」を選択します。 クリックして、Edge Delivery Services Configuration を開きます。

CitiSignal を選択し、作成 をクリックして、設定 を選択します。

ここで、「組織」フィールドと サイト名 フィールドに入力する必要が り す。 これをおこなうには、まず GitHub リポジトリの URL を参照します。

保存して閉じる をクリックします。

これで完了です。 新しく作成したEdge Cloud Configuration の前にあるチェックボックスを有効にし、「公開」をクリックします。

1.1.2.6 ファイル paths.json の更新

GitHub リポジトリで、をクリックしてファイル paths.json を開きます。

編集 アイコンをクリックします。

次に、3、4、5、6、7、10 行目の aem-boilerplate-commerce で、置き換えテキスト CitiSignal を更新する必要があります。

「変更をコミット」をクリックします。

「変更をコミット」をクリックします。

ファイル paths.json が更新されました。

1.1.2.7 CitiSignal web サイトの公開

画面左上隅の商品名 0}Adobe Experience Manager} をクリックし、「 Sites 」を選択します。

次に、CitiSignal の前にあるチェックボックスをクリックします。 次に、「公開を管理」をクリックします。

「次へ」をクリックします。

子を含める設定 をクリックします。

チェックボックス 子を含める をクリックして選択し、他のチェックボックスをクリックして選択解除します。 「OK」をクリックします。

「公開」をクリックします。

その後、あなたはここに送り返されます。 CitiSignal をクリックし、index の前にあるチェックボックスを選択して、編集 をクリックします。

Web サイトは ユニバーサルエディター で開きます。

XXX を GitHub ユーザーアカウント（この例では main--citisignal-aem-accs--XXX.aem.page）に置き換えた後、main--citisignal-aem-accs--XXX.aem.live や woutervangeluwe に移動して、web サイトにアクセスできるようになりました。

この例では、完全な URL は次のようになります。
https://main--citisignal-aem-accs--woutervangeluwe.aem.page や https://main--citisignal-aem-accs--woutervangeluwe.aem.live。

最初に公開する必要があるので、すべてのアセットが正しく表示されるまでには時間がかかる場合があります。

次の画面が表示されます。

1.1.2.8 テストページのパフォーマンス

https://pagespeed.web.dev/ に移動します。 URL を入力し、「分析」をクリックします。

次に、モバイルとデスクトップの両方のビジュアライゼーションで、web サイトのスコアが高くなることがわかります。

モバイル:

デスクトップ:

次の手順：​ カスタムブロックの開発 ​

Adobe Experience Manager Cloud ServiceとEdge Delivery Services に戻る

​ すべてのモジュールに戻る ​