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,でコンソールにログインすると、コンソールのホーム画面に表示されます。

コンソールのホーム画面

メニューバー menu-bar

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

  • 左側のパネルの詳細を展開および折りたたむには、左側の「メニューを開く」ボタン
  • 右側の​アカウント ボタンで、ダークモードに切り替えてコンソールからログアウトできます

左サイドバー sidebar

左側のサイドバーでは、コンソールの重要なビューにすばやくアクセスできます。

ホームビュー home-view

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

  • 上部には、コンソールのリクエストを行うための​ プロンプト入力があります。
  • プロンプトパネルの下には、プロジェクトの開始を促すプロンプトが表示されます。

プロンプト入力 prompt-input

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

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

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

コンテンツ表示 content-view

コンテンツビュー​には、コンテンツの閲覧とプレビューのためのツールが用意されています。 デフォルトでは、ビューは左から右の3つのパネルに分割されます。

  • コンソールとプロジェクトを操作するためのプロンプト パネル
  • コンテンツファイルの概要を表示するファイルブラウザー(このパネルに山形アイコンを表示するトグル)
  • ファイルブラウザーで選択したコンテンツを表示するためのプレビューパネル

コンテンツ表示

チャットパネル chat-panel

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

  • チャットアクション

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

プレビューパネル preview-panel

プレビューパネルには、最大4つのモードがあります。

  • プレビュー (虫眼鏡アイコンが付いたドキュメント)を使用して、レンダリングされたHTML コンテンツを表示

    • レスポンシブビュー:レンダリングされたHTML コンテンツをデスクトップ、タブレット、またはモバイルビューで表示する
    • デザインモード (ペイントブラシアイコン)を使用して、ページの要素をプロンプトに追加し、コンテキストを追加します
  • ドキュメントビュー (ドキュメントアイコン)を使用して、基になるドキュメントオーサリングコンテンツ構造をそれぞれ表示します

  • Markdown ビュー(AEM オーサリング) (コードアイコン)を使用して、基になるMarkdown コンテンツ構造を表示します

  • JCR XML ビュー(AEM オーサリング) (データアイコン)を使用すると、結果のJCR XML コンテンツ構造を表示できます

プレビューパネルを更新するには、プレビューを更新 アイコンをクリックします。

削除 ボタンは、選択したページをワークスペースから削除します。 プレビュー済みのコンテンツや公開されたコンテンツは削除されません。

エラー」ボタン(AEM オーサリング)をクリックすると、モーダルウィンドウが開き、選択したページのエラーが表示されます。

コンテンツをアップロード」ボタンをクリックすると、モーダルウィンドウが開き、AEMにファイルをアップロードできます。

  • プロジェクトに​ ファイルがある場合、 ​組織​および リポジトリ fstab.yaml フィールドに事前入力が行われます
  • ファイル選択は編集可能なターゲットパスを提供します
  • JCR (ユニバーサルエディター用)へのアップロードはサポートされていません

コンテンツのアップロード

コードビュー code-view

コードビュー​には、コードの参照とコード変更の管理のためのツールが用意されています。 ビューは、左から右の3つのパネルに分割されます。

  • コンソールとプロジェクトを操作するためのチャットパネル
  • コードファイルまたは差分としての変更の概要を表示するファイルブラウザー
  • コードファイルまたはファイルブラウザーで選択した変更を表示するためのプレビューパネル

コードビュー

プレビューパネルには、次の2つのモードがあります。

  • Workspace ファイル​を使用して、現在のワークスペース内のコードファイルを参照する

    • チャットに追加」ボタンを使用して、ファイルをチャットパネルに追加してコンテキストを得ることができます。
  • Git Changes​を使用して、プロジェクトでの作業によって作成されたファイル変更の差分を表示する

    • + アイコンをクリックして、変更したファイルをステージングします
    • 矢印アイコンをクリックして、変更したファイルを破棄します

情報 アイコンには、現在接続されているGitHub アカウントとプロジェクトが一覧表示されます。

GitHub アクション メニュー(右上)には、リポジトリ操作が表示されます。

  • 接続/再接続: GitHub OAuthを開始します
  • リポジトリを切り替え: ワークスペースを別のリポジトリに置き換えます。 未着手の作業は失われます。
  • ブランチを切り替え:同じリポジトリ内のブランチを切り替えます
  • 同期: リモート オリジンから最新の変更を取得します
  • プッシュ: ワークスペースの変更をGitHubにプッシュするためのモーダルを開きます
  • ログアウト:GitHubから切断します

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

変更をプッシュ

設定ビュー settings-view

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

設定ビュー

任意のセクションの任意の値に変更を加えた場合は、保存​をクリックして、これらの変更を個々のセクションに保存します。

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

    • ライブラリ 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
fbcff2a9-b6fe-4574-b04a-21e75df764ab