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でログインします。

デモモード demo-mode

コンソールは、初めてサインインしたときにデモモードで起動します。 このモードを使用すると、既存のサイトを探索して、追加のページの移行を試すことができます。 画面の下部にあるバナーは、デモモードであることを示します。

​ デモモード ​

サイトを接続 connect-repo

独自のサイトで作業を開始する準備ができたら、独自のプロジェクトに接続してデモモードを終了できます。

  1. デモモモモードバナーの「サイトを切り替え」をクリックします。
  2. これにより、GitHub資格情報を使用してAEM Code Connector アプリを認証するように求められます。 「AEM Code Connectorの認証」をクリックします。
  3. コンソールに戻り、サイトのプレビューURLを指定します。プレビューURLは、サイト内の任意のドキュメントをプレビューするか、ブランチ、サイト名、組織から作成することで取得できます。関連するGithub プロジェクトが自動的に取得されます。または、承認済みのGitHub プロジェクトを検索してサイトを見つけることもできます。
    GitHub プロジェクトへの接続
  4. サイトが検証されたら、「ワークスペースにチェックアウト」をクリックします。
  5. 既存のワークスペースを置換​するように求められた場合は、ワークスペースを置換​をクリックします。
    既存のワークスペースを置き換える

これで、GitHub プロジェクトとサイトがコンソールに接続されました。

デモモードを終了したが、新しいプロジェクトが接続されていない場合、Experience Modernization エージェントに後日訪問すると、最初にサイトが接続されます。

​ サイト接続

コンソールホーム console-home

aemcoderにアクセスすると、チャットの会話が開始されるまでホームページが表示されます。 ホームページでは、最初のプロンプトを入力するか、提案されたプロンプトのいずれかを選択することで、チャットを始めることができます。

​ コンソール ホーム ​

プロンプトを開始 start-prompting

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

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

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

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

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

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

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

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

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

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

    • デフォルトでは、コンソールに入ると​ コンテンツ ​表示になります。
    • ビューは、コンソールのワークスペース領域で選択したビューピッカー項目で示されます。
  2. コンテンツをアップロード」ダイアログが開き、プロジェクト設定から事前に入力された宛先組織とリポジトリが表示されます。

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

  4. コンソールは、「アップロード」ボタンを無効にすることで、アップロードプロセスを示します。

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

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

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

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

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

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

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

  1. 変更 ビュー(ビューピッカーの分岐アイコン)に切り替えます。
    ​ コードビュー
  2. 変更されたファイルのリストで、一部のファイルがトラッキングされていない状態で表示される場合は、+ ボタンをクリックしてステージングします。
  3. 右上の「プッシュ」ボタンをクリックします。
  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 エージェントとそのコンソールを引き続き検索する場合は、次のドキュメントが役立つ可能性があります。

recommendation-more-help
experience-manager-cloud-service-help-main-toc