Experience Modernization Console console-reference

Experience Modernization Console インターフェイスと機能に関するリファレンスガイド

NOTE
Experience Modernization Consoleの使用に関心がある場合は、アクセスをリクエストして、スムーズなオンボーディングエクスペリエンスを実現できます。

概要 overview

Experience Modernization Consoleは、Edge Delivery ServicesのAI支援によるホスティング環境で、aemcoder.adobe.ioにweb インターフェイスとして公開されます。 GitHub プロジェクトに接続した後は、設定やローカル環境の設定を行うことなく、自然言語の変更を促すプロンプトをすぐに開始できます。

TIP
コンソールをすぐに使用する場合は、Experience Modernization Agentの使用を開始するドキュメント ​を参照してください。

機能 capabilities

コンソールの中心機能:

  • エージェントとそのスキルを備えたインタラクティブチャットパネル
  • AEMのライブプレビューで、変更内容をすぐに視覚的にフィードバック
  • コンテンツファイルブラウザーとマークダウンビューア
  • Document Authoringとのコンテンツの同期
  • コードブラウザーと差分ビューアーによる変更のレビュー
  • GitHubとの統合:変更からプルリクエストを作成

開発者は、何を出荷するかを完全に制御できます。 コンソールを通じて行われたすべての変更は、デプロイメントの前にレビューと承認が必要であり、ガバナンス、ブランドの一貫性、セキュリティが確保されます。

ナビゲーション navigation

aemcoder.adobe.io、でコンソールにログインすると、コンソールの​ ホームページ ​にアクセスできます。 チャットを開始すると、その後Experience Modernization エージェントを訪問すると、​ チャットページ ​に直接移動します。

​ コンソールのホーム画面

メニューバー menu-bar

上部のメニューバーには次の機能があります。

  • 左側の​Adobe Experience Manager タイトル。クリックするとホームページにリンクされます
  • サポートを依頼 ボタンを使用すると、発生した問題の詳細を送信できます
  • 右側の​アカウント ボタンで、ダークモードに切り替えてコンソールからログアウトできます

ホームページ home-page

ホーム ページは、コンソールを使用するための出発点です。

  • 上部には、コンソールのリクエストを行うための​ プロンプト入力があります。
  • プロンプトパネルの下には、プロジェクトの開始を促すプロンプトが表示されます。
  • チャット開始 ボタンをクリックすると、​ チャットページ ​に移動します。
  • ​ プロジェクト設定 ページにアクセスするための​設定 ボタン

プロンプト入力 prompt-input

プロンプト入力では、AIを操作するための制御を提供します。

  • 計画/実行モード (電球と魔法の杖アイコン):計画モードと実行モードをそれぞれ切り替えます

    • プランモード: AIがリクエストを分析し、変更を加えずにアプローチの概要を作成します。これは、コミットする前に戦略を把握するのに役立ちます。
    • 実行モード: AIが計画を実行し、実際のファイル変更を行います。
  • ファイルの添付 (ペーパークリップアイコン):追加のコンテキスト(リファレンスデザイン、スクリーンショット、スペックなど)を求めるプロンプトにファイルをアップロードして添付します

  • プロンプトキュー (時計アイコン):現在のプロンプトが完了すると、追加のプロンプトを自動的に実行するようにキューに追加できます。

チャットページ chat-page

チャット ページ ​は、Experience Modernization エージェントと対話するためのメイン インターフェイスです。 このページは、サイズ変更可能な​ チャットパネル ​​ ワークスペースパネル ​に分割されています。

チャットパネル chat-panel

チャットパネルを使用すると、Experience Modernization エージェントとの会話を表示して続行できます。 チャットパネルには、チャットメッセージの履歴と、コンソールの追加リクエストを行うための​ プロンプト入力が含まれています。

チャットパネルヘッダーには、​ ホーム ​および設定 ビューとチャットアクションに移動するためのリンクが含まれています。

  • チャットアクション

    • チャットをクリア:会話がリセットされ、AIのコンテキストウィンドウがクリアされます。 このオプションは、前の会話とは関係のない新しいタスクを開始する場合に使用します。
    • チャットをダウンロード:会話の履歴をマークダウンファイルとしてダウンロードします。

Workspace パネル workspace-panel

ワークスペースパネルには、サイトのすべてのコンテンツとコードが表示されます。 パネルの上部にあるヘッダーには、フォーカスする特定のビューを選択するためのピッカーが含まれています。 ワークスペースヘッダーで使用できるアクションは、現在選択されているビューに基づいて変更されます。

コンテンツビュー content-view

コンテンツビュー​には、選択したページコンテンツを表示するための複数のモードが含まれています。 折りたたみ可能なファイルブラウザーには、サイトで使用可能なすべてのページコンテンツが表示されます。

  • プレビュー (虫眼鏡アイコンが付いたドキュメント)を使用して、レンダリングされたHTML コンテンツを表示
  • ドキュメントビュー (ドキュメントアイコン)を使用して、基になるドキュメントオーサリングコンテンツ構造をそれぞれ表示します
  • 生のプレーン htmlを表示するには、HTML ビュー (コードアイコン)を使用します
  • Markdown ビュー(AEM オーサリング) (段落アイコン)を使用して、基になるMarkdown コンテンツ構造を表示します
  • JCR XML ビュー(AEM オーサリング) (データアイコン)を使用すると、結果のJCR XML コンテンツ構造を表示できます

​ コンテンツ表示

コンテンツビューでは、次のアクションを使用できます。

  • プレビューパネルのレンダリングを更新するには、更新 アイコンを使用します。
  • レスポンシブモード​を使用して、レンダリングされたHTML コンテンツをデスクトップ、タブレット、またはモバイルビューで表示
  • インスペクトモード (選択アイコン)を使用して、ページの要素をプロンプトに追加し、コンテキストを追加します
  • 新しいウィンドウ (アイコンで開く)を使用して、プレビューURLを新しいタブで開く(完全なデスクトップ プレビューの場合)
  • 削除​は、選択したページをワークスペースから削除します。 プレビュー済みのコンテンツや公開されたコンテンツは削除されません。
  • エラー ボタン (AEM オーサリング)をクリックすると、モーダルウィンドウが開き、選択したページのエラーが表示されます。
  • コンテンツをアップロード ボタンをクリックすると、モーダルウィンドウが開き、AEMにファイルをアップロードできます。

​ コンテンツをアップロード ​

コードビュー code-view

コードビュー​には、プロジェクトファイルを参照し、コード変更を管理するためのツールが用意されています。 このビューには、コードファイルまたは変更を差分として表示するためのファイルブラウザーと、選択したファイルまたは変更を表示するためのプレビュー領域が含まれています。

  • ファイル​を使用して、現在のワークスペース内のコードファイルを参照する
  • 変更点​を使用して、プロジェクトでの作業によって作成されたファイル変更の差分を表示する

​ コードビュー

ファイルアクション file-actions

  • チャットに追加​は、選択したファイル(またはファイルから選択した行)をチャットパネルに追加してコンテキストを得ます。
  • ダウンロード​選択したファイルをローカルファイルシステムにダウンロードします

変更アクション changes-actions

  • 変更したファイルをステージングする (+ アイコン)を追加
  • Discard (矢印アイコン)を使用して、変更されたファイルを破棄します
  • 削除 (ゴミ箱アイコン)を使用して、ステージングされていないファイルを削除します
  • 更新 (更新アイコン)を使用して変更のリストを更新する
  • ブランチを切り替え:同じリポジトリ内のブランチを切り替えます
  • 同期: リモート オリジンから最新の変更を取得します
  • プッシュ: ワークスペースの変更をGitHubにプッシュするためのモーダルを開きます

変更をプッシュする場合、プッシュに含めるには、最初にステージングされた変更が必要です。 プッシュ時に、新しいPRを作成するか、現在のブランチに直接プッシュするかを選択できます

変更をプッシュ ​

追加のGitHub プロジェクトのアクションは、設定ページ ​で実行できます。

設定ページ settings-page

設定 ページ ​では、コンソールの基本的な設定を管理でき、次のセクションに分かれています。

設定ビュー

任意のセクションの任意の値に変更を加えた場合は、保存​をクリックして、これらの変更を個々のセクションに保存します。 戻るアイコンをクリックして、以前のビューに戻ります。

  • プロジェクト​を使用すると、GitHub接続の管理やライブラリ URLのカスタマイズなど、プロジェクト設定を表示および編集できます。

    • 接続/再接続: GitHub認証を開始します
    • リポジトリを切り替え: ワークスペースを別のリポジトリに置き換えます。 未着手の作業は失われます。
    • ログアウト:GitHubから切断します
    • ライブラリ URL – このURLは、使用可能なブロック、そのバリエーション、およびコンテンツの例を定義するlibrary.json ファイルを指します。
    • サイトベース URL – 移行するweb サイトのオリジン URL
  • エージェント権限 - エージェントが構成オプションにアクセスできるようにします

    • LLMに代わってadmin.hlx.pageへのアクセスを許可 – 有効にすると、AI アシスタントはIMS資格情報を使用してAdobe Experience Managerからサイト設定とメタデータを取得できます。
    • カスタム IMS トークン - デフォルトのセッション トークンの代わりに使用するカスタム IMS トークンを指定できます。
  • 資格情報​を使用すると、Figmaの個人アクセストークンを指定して、​ コンソールがプロジェクトのデザインブロックにアクセスできるようにできます。

    • トークンには、次の読み取り専用スコープが必要です。

      • file_content:read
      • file_metadata:read
      • library_assets:read
      • library_content:read
      • team_library_content:read
      • file_dev_resources:read
      • projects:read
    • 個人アクセストークンの設定について詳しくは、Figma ドキュメント ​を参照してください。

  • サポート​は、サポートリクエストを行う際にAdobe サポートチームと共有された情報をまとめます。

    • サポートをリクエスト - クリックすると、コンソールを離れることなく、Adobeからサポートのリクエストを開始できます。
  • 危険ゾーン​には、ワークスペースを元に戻すことができる設定が含まれています。

    • ワークスペースをリセット - クリックして、ワークスペースを初期状態にリセットします。 これを取り消すことはできません。
recommendation-more-help
experience-manager-cloud-service-help-main-toc