Experience Modernization Agent の概要 getting-started

Experience Modernization Agent と Experience Modernization Console の使用を開始するための最初の手順を説明します。

NOTE
Experience Modernization Console の使用に関心がある場合は、アカウントマネージャーを通じてアクセスをリクエストし、スムーズなオンボーディングエクスペリエンスを確保できます。

Edge Delivery GitHub リポジトリの準備 prepare-repo

NOTE
AEM Sitesとユニバーサルエディタープロジェクトを使用する場合 AEM Sites/ユニバーサルエディターの概要 ​ の設定手順に従います。
  1. Experience Modernization Console で使用する Edge Delivery Services リポジトリを選択します。

  2. AEM コードコネクタ ​ がリポジトリにインストールされていることを確認します。

    • これにより、コンソールでコードを検査できます。
  3. AEM コード同期 GitHub アプリ ​ がリポジトリにインストールされていることを確認します。

    • これにより、Edge Delivery Servicesでコードを同期できます。
    • リポジトリがチュートリアルに基づいている場合、この手順は既に完了しています。

Experience Modernization Console を開く open-console

  1. aemcoder.adobe.io. に移動します。
  2. Adobe IDでログインします。

GitHub リポジトリへの接続 connect-repo

最初にログインすると、コンソールでリポジトリの入力を求められます。

コンソールの最初のログイン画面

  1. リポジトリを接続 をクリックします。
  2. これにより、新しいブラウザータブでAEM コードコネクタアプリが開きます。 「AEM コードコネクタを認証」をクリックします。
  3. コンソールに戻り、サイトのプレビュー URL を指定します。 プレビュー URL を取得するには、サイト内の任意のドキュメントをプレビューするか、ブランチ、サイト名、組織からドキュメントを作成します。 システムは関連する Github プロジェクトを自動的に取得します。場合によっては、Github 座標の提供も求められることがあります。
    GitHub プロジェクトへの接続
  4. 既存のワークスペースを置換 するように求めるプロンプトが表示されたら、「ワークスペースを置換」をクリックします。
    既存のワークスペースを置換

これで、GitHub プロジェクトがコンソールに接続され、ホーム画面が表示されます。

コンソールホーム

プロンプトの開始 start-prompting

コンソールからコードにアクセスできるようになったので、プロンプトを開始する準備が整いました。

  1. 開始するには、サイトのコンテンツを読み込みます。

    • "ページ https://wknd-trendsetters.site を移行します。"
  2. これにより、サイトのコンテンツが読み込まれます。

    • コンソールは、関心の分離を監視し、コンテンツとプレゼンテーションを個別に処理します。
    • サイトのコンテンツの最初の読み込みには数分かかる場合があります。
    • コンソールには、作業を開始する際に、予定されている手順の概要を含む継続的なフィードバックが表示されます。
      コンテンツのインポート
  3. サイトが読み込まれると、Workspace パネルにページが表示されます。 ページを選択すると、右側のパネルでプレビューできます。
    読み込まれたコンテンツ

  4. これでコンテンツが用意できたので、同じソースからスタイルを読み込むかどうかを確認するプロンプトを表示できます。

    • https://wknd-trendsetters.site から一般的なスタイルをインポートします。」
  5. 初期コンテンツの読み込み時と同様に、読み込みに数分かかる場合があります。リクエストが処理され、スタイルが読み込まれると、コンソールからフィードバックが表示されます。 タスクが完了したら、右側のパネルで プレビューを更新 をクリックして、スタイル設定されたコンテンツを表示します。
    読み込まれたスタイル

これで、コンテンツとスタイルの両方がコンソールに読み込まれました。

TIP
エージェントにプロンプトを表示する方法とそのスキルで実行できる操作について詳しくは、​ プロンプトのガイドを参照 ​ してください。

コンテンツのアップロード upload-content

TIP
AEM Sitesとユニバーサルエディタープロジェクトで作業している場合、AEMへのコンテンツのアップロードの動作は若干異なります。 具体的なアップロード手順については、Experience Modernization Agent for AEM Sites/ユニバーサルエディタープロジェクトの基本を学ぶ ​ を参照してください。

コンテンツを ​ ドキュメントオーサリング ​ にアップロードするには:

  1. コンテンツ ビューにいることを確認し、右上の コンテンツをアップロード ボタンをクリックします。

    • デフォルトでは、コンソールに入ると コンテンツ 表示になります。
    • ビューは、コンソールの左側のサイドバーでハイライト表示されたアイコンで示されます。
  2. コンテンツをアップロード ダイアログが開き、宛先組織とリポジトリが fstab.yaml から事前入力されます。

    • 接続したリポジトリに fstab.yaml が存在しない場合は、組織リポジトリ を手動で入力する必要があります。
    • ボイラープレートを使用した場合は、fstab.yaml が表示されます。
  3. アップロードするファイルを選択し、「アップロード」をクリックします。
    コンテンツをアップロードダイアログ

  4. コンソールの「アップロード」ボタンがグレー表示され、アップロードプロセスが示されます。
    アップロード中

  5. 完了すると、通知がコンソールの下部に表示されます。
    AEMで表示

ドキュメントオーサリングでアップロードされたコンテンツにアクセスするには、必要に応じて、アップロード完了時の通知で AEMで表示 をクリックするか、https://da.live/#/{organization}/{repository} に移動します。

ドキュメントオーサリングのコンテンツ

読み込まれたコンテンツは、ドキュメントのオーサリングに表示されます。

コード変更のプッシュ push-code-changes

コードに加えた変更に満足したら、それらを GitHub リポジトリにプッシュできます。

  1. コード ビュー(左側のサイドバーの </> アイコン)に切り替えて、「Git の変更」タブ(右上のブランチアイコン)に切り替えます。
    コードビュー
  2. 変更されたファイルの一覧で、追跡対象外として表示されるファイルがある場合は、[+] ボタンをクリックしてファイルをステージングします。
  3. 右上の「GitHub アクション」ボタンをクリックし、ドロップダウンから「プッシュ」を選択します。
  4. 変更をプッシュ ダイアログで、変更を新しい PR (デフォルト)または現在のブランチにプッシュすることを選択し、確認 をクリックしてプッシュします。
    • 不明な場合は、現在のブランチにプッシュして、物事をシンプルに保つことができます。
  5. 完了すると、通知がコンソールの下部に表示されます。
    PR を表示

GitHub でプッシュされた変更に直接アクセスする場合は、プッシュが完了したら、通知の PR を表示 をクリックします。

GitHub のコード

コードは GitHub に格納されています。

サイトのプレビュー preview-site

プレビュー環境で変更を表示するには:

  1. ドキュメントオーサリングに戻ります。

    • コンテンツをアップロードした後に AEMで表示 をクリックすると、開いたブラウザータブで引き続き開いている場合があります。
    • または https://da.live/#/{organization}/{repository} に移動します。
  2. 以前にAEMにアップロードしたページの 1 つを開きます。

  3. 紙面アイコン(右上)をクリックし、「プレビュー」を選択します。
    プレビューに公開

おめでとうございます。移行したコンテンツとスタイルは、AEM プレビュー環境に移行されました。

公開済みプレビューコンテンツ

コードを main 以外のブランチにプッシュした場合、ドキュメントオーサリングから開いたプレビューには、スタイルは表示されません。 プレビューの URL を更新してブランチに変更すると、スタイルを確認できます。

その他のリソース additional-resources

次のドキュメントは、Experience Modernization Agent とそのコンソールを引き続き参照する際に役立つ場合があります。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab