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 Code Connectorがリポジトリにインストールされていることを確認します。

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

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

Experience Modernization Consoleを開きます open-console

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

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

コンソールでは、初めてログインしたときにリポジトリの入力を求めるメッセージが表示されます。

コンソールの最初のサインイン画面

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

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

コンソール ホーム

プロンプトを開始 start-prompting

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

  1. サイトのコンテンツを読み込むことができます。

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

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

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

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

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

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

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

コンテンツをDocument Authoringにアップロードするには:

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

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

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

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

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

Document Authoringでアップロードされたコンテンツにアクセスするには、アップロード完了時に通知の​ AEMで表示 ​をクリックするか、https://da.live/#/{organization}/{repository}に移動します。

ドキュメント作成中のコンテンツ

読み込んだコンテンツがドキュメントのオーサリングに追加されました。

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

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

  1. コード ビュー(</> アイコン、左側のサイドバー)に切り替え、次に​Git Changes タブ(右上のブランチアイコン)に切り替えます。
    コードビュー
  2. 変更されたファイルのリストで、一部のファイルがトラッキングされていない状態で表示される場合は、+ ボタンをクリックしてステージングします。
  3. 右上の「GitHub actions」ボタンをクリックし、ドロップダウンから「プッシュ」を選択します。
  4. 変更をプッシュ ダイアログで、変更を新しいPR (デフォルト)または現在のブランチにプッシュすることを選択し、確認​をクリックしてプッシュします。
    • 少しでも疑問を感じたら、現在のブランチにプッシュして、問題をスムーズに進めることができます。
  5. 完了すると、コンソールの下部に通知が表示されます。
    PR を表示

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

GitHub の コード

コードはGitHubにあります。

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

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

  1. ドキュメント作成に戻ります。

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

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

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

公開されたプレビューコンテンツ

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

トラブルシューティング troubleshooting

・IP アドレスの許可リストに加える allowlist-ip-addresses

サイトがファイアウォールやアクセス制限の内側にある場合は、バックエンドサービスがサイトをスクレイピングできるように、次のIP アドレスを許可リストに加えるできます。

  • 34.228.136.112
  • 54.90.51.39
  • 3.224.194.242

その他のリソース additional-resources

Experience Modernization Agentとそのコンソールを引き続き検索する場合は、次のドキュメントが役立つ可能性があります。

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