Experience Modernization Agent の概要 getting-started
Experience Modernization Agent と Experience Modernization Console の使用を開始するための最初の手順を説明します。
Edge Delivery GitHub リポジトリの準備 prepare-repo
-
Experience Modernization Console で使用する Edge Delivery Services リポジトリを選択します。
- これは、既存のEdge Delivery Services プロジェクトでも、boilerplate リポジトリを使用して 開発者向けチュートリアル に従って新しいプロジェクトを作成 ることもできます。
-
AEM コードコネクタ がリポジトリにインストールされていることを確認します。
- これにより、コンソールでコードを検査できます。
-
AEM コード同期 GitHub アプリ がリポジトリにインストールされていることを確認します。
- これにより、Edge Delivery Servicesでコードを同期できます。
- リポジトリがチュートリアルに基づいている場合、この手順は既に完了しています。
Experience Modernization Console を開く open-console
aemcoder.adobe.io. に移動します。- Adobe IDでログインします。
GitHub リポジトリへの接続 connect-repo
最初にログインすると、コンソールでリポジトリの入力を求められます。
- リポジトリを接続 をクリックします。
- これにより、新しいブラウザータブでAEM コードコネクタアプリが開きます。 「AEM コードコネクタを認証」をクリックします。
- コンソールに戻り、サイトのプレビュー URL を指定します。 プレビュー URL を取得するには、サイト内の任意のドキュメントをプレビューするか、ブランチ、サイト名、組織からドキュメントを作成します。 システムは関連する Github プロジェクトを自動的に取得します。場合によっては、Github 座標の提供も求められることがあります。
- 既存のワークスペースを置換 するように求めるプロンプトが表示されたら、「ワークスペースを置換」をクリックします。
これで、GitHub プロジェクトがコンソールに接続され、ホーム画面が表示されます。
プロンプトの開始 start-prompting
コンソールからコードにアクセスできるようになったので、プロンプトを開始する準備が整いました。
-
開始するには、サイトのコンテンツを読み込みます。
- "ページ
https://wknd-trendsetters.siteを移行します。"
- "ページ
-
これにより、サイトのコンテンツが読み込まれます。
- コンソールは、関心の分離を監視し、コンテンツとプレゼンテーションを個別に処理します。
- サイトのコンテンツの最初の読み込みには数分かかる場合があります。
- コンソールには、作業を開始する際に、予定されている手順の概要を含む継続的なフィードバックが表示されます。
-
サイトが読み込まれると、Workspace パネルにページが表示されます。 ページを選択すると、右側のパネルでプレビューできます。
-
これでコンテンツが用意できたので、同じソースからスタイルを読み込むかどうかを確認するプロンプトを表示できます。
- 「
https://wknd-trendsetters.siteから一般的なスタイルをインポートします。」
- 「
-
初期コンテンツの読み込み時と同様に、読み込みに数分かかる場合があります。リクエストが処理され、スタイルが読み込まれると、コンソールからフィードバックが表示されます。 タスクが完了したら、右側のパネルで プレビューを更新 をクリックして、スタイル設定されたコンテンツを表示します。
これで、コンテンツとスタイルの両方がコンソールに読み込まれました。
コンテンツのアップロード upload-content
コンテンツを ドキュメントオーサリング にアップロードするには:
-
コンテンツ ビューにいることを確認し、右上の コンテンツをアップロード ボタンをクリックします。
- デフォルトでは、コンソールに入ると コンテンツ 表示になります。
- ビューは、コンソールの左側のサイドバーでハイライト表示されたアイコンで示されます。
-
コンテンツをアップロード ダイアログが開き、宛先組織とリポジトリが
fstab.yamlから事前入力されます。- 接続したリポジトリに
fstab.yamlが存在しない場合は、組織 と リポジトリ を手動で入力する必要があります。 - ボイラープレートを使用した場合は、
fstab.yamlが表示されます。
- 接続したリポジトリに
-
アップロードするファイルを選択し、「アップロード」をクリックします。
-
コンソールの「アップロード」ボタンがグレー表示され、アップロードプロセスが示されます。
-
完了すると、通知がコンソールの下部に表示されます。
ドキュメントオーサリングでアップロードされたコンテンツにアクセスするには、必要に応じて、アップロード完了時の通知で AEMで表示 をクリックするか、https://da.live/#/{organization}/{repository} に移動します。
読み込まれたコンテンツは、ドキュメントのオーサリングに表示されます。
コード変更のプッシュ push-code-changes
コードに加えた変更に満足したら、それらを GitHub リポジトリにプッシュできます。
- コード ビュー(左側のサイドバーの
</>アイコン)に切り替えて、「Git の変更」タブ(右上のブランチアイコン)に切り替えます。
- 変更されたファイルの一覧で、追跡対象外として表示されるファイルがある場合は、[
+] ボタンをクリックしてファイルをステージングします。 - 右上の「GitHub アクション」ボタンをクリックし、ドロップダウンから「プッシュ」を選択します。
- 変更をプッシュ ダイアログで、変更を新しい PR (デフォルト)または現在のブランチにプッシュすることを選択し、確認 をクリックしてプッシュします。
- 不明な場合は、現在のブランチにプッシュして、物事をシンプルに保つことができます。
- 完了すると、通知がコンソールの下部に表示されます。
GitHub でプッシュされた変更に直接アクセスする場合は、プッシュが完了したら、通知の PR を表示 をクリックします。
コードは GitHub に格納されています。
サイトのプレビュー preview-site
プレビュー環境で変更を表示するには:
-
ドキュメントオーサリングに戻ります。
- コンテンツをアップロードした後に AEMで表示 をクリックすると、開いたブラウザータブで引き続き開いている場合があります。
- または
https://da.live/#/{organization}/{repository}に移動します。
-
以前にAEMにアップロードしたページの 1 つを開きます。
-
紙面アイコン(右上)をクリックし、「プレビュー」を選択します。
おめでとうございます。移行したコンテンツとスタイルは、AEM プレビュー環境に移行されました。
コードを main 以外のブランチにプッシュした場合、ドキュメントオーサリングから開いたプレビューには、スタイルは表示されません。 プレビューの URL を更新してブランチに変更すると、スタイルを確認できます。
その他のリソース additional-resources
次のドキュメントは、Experience Modernization Agent とそのコンソールを引き続き参照する際に役立つ場合があります。
- Experience Modernization Console - コンソールの詳細、表示、オプションおよび機能
- エクスペリエンス最新化エージェントのプロンプト表示ガイド - エージェントにプロンプトを表示する方法とスキルで実行できる操作に関するアイデア
- Edge Delivery Services開発者向けチュートリアル - AEMおよびEdge Delivery Services プロジェクトを初めて使用する場合に役立ちます
- ドキュメントオーサリング - コンテンツ管理用のドキュメントオーサリングを初めて使用する場合に役立ちます。