Experience Modernization Console console-reference
Experience Modernization Console インターフェイスと機能に関するリファレンスガイド
概要 overview
Experience Modernization Consoleは、Edge Delivery ServicesのAI支援によるホスティング環境で、aemcoder.adobe.ioにweb インターフェイスとして公開されます。 GitHub プロジェクトに接続した後は、設定やローカル環境の設定を行うことなく、自然言語の変更を促すプロンプトをすぐに開始できます。
機能 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 プロジェクトのアクションは、設定ページ で実行できます。
プロジェクトビュー project-view
プロジェクトビューは、既存のサイトの移行計画に役立ちます。
- サイトカタログスキル によって特定されたテンプレート、ページ、ブロックを確認および調整する計画
詳しくは、 サイト計画UIを参照してください。
設定ページ 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:readfile_metadata:readlibrary_assets:readlibrary_content:readteam_library_content:readfile_dev_resources:readprojects:read
-
個人アクセストークンの設定について詳しくは、Figma ドキュメント を参照してください。
-
-
保護されたサイト認証では、カスタムヘッダー、HTTP Basic認証、またはベアラー認証を設定して、エージェントが保護されたソース Web サイトにアクセスしてスクレイピングできるようにします。 設定手順については、保護サイト認証を参照してください。
-
サポートは、サポートリクエストを行う際にAdobe サポートチームと共有された情報をまとめます。
- サポートをリクエスト - クリックすると、コンソールを離れることなく、Adobeからサポートのリクエストを開始できます。
-
危険ゾーンには、ワークスペースを元に戻すことができる設定が含まれています。
- ワークスペースをリセット - クリックして、ワークスペースを初期状態にリセットします。 これを取り消すことはできません。
保護されたサイト認証 protected-site-authentication
保護されたサイト認証を使用して、Experience Modernization Agentがカスタムリクエストヘッダー、HTTP Basic認証、またはベアラー認証を必要とするソース web サイトにアクセスできるようにします。 ソース web サイトには、エージェントのホスト環境からアクセスでき、指定した認証方法を受け入れるように設定する必要があります。 この機能は、VPNを介したアクセスやファイアウォールのバイパスを提供しません。
アクセスを設定するには:
-
Experience Modernization Consoleで 設定 を開き、保護されたサイト認証を見つけます。
-
「サイトを追加」をクリックします。
-
staging.example.comなど、サイトホスト名を入力します。 ホスト名のみを入力してください。ホスト名にはhttps://またはURL パスは使用できません。 -
認証タイプを選択し、対応する値を入力します。
table 0-row-2 1-row-2 2-row-2 3-row-2 認証タイプ 入力する値 カスタムヘッダー ソース web サイトで必要とされる ヘッダー名 とヘッダー値。 例えば、ヘッダー名は X-API-Keyである場合があります。基本(ユーザー名とパスワード) HTTP Basic認証用の ユーザー名 とパスワード。 ベアラー認証 ソース web サイトが受け入れたベアラートークン。 -
「保護されたサイト認証」セクションの「保存」をクリックします。
-
エージェントに、通常どおりURLを使用してソース web サイトをスクレイピングまたは移行するように依頼します。
保存すると、資格情報は一致するホスト名へのアウトバウンドリクエストに挿入され、AI モデルと共有されません。 資格情報は、チャットプロンプトではなく、これらの設定でのみ入力します。 ソース web サイトから取得したコンテンツは、リクエストされたタスクにエージェントによって使用されます。
最も権限の少ないスコープ付き資格情報を使用します。ソースコンテンツへの読み取り専用アクセスが可能です。 各ホスト名は1回のみ設定できます。 ソース web サイトで他のホスト上の保護されたコンテンツにアクセスする必要がある場合は、追加のホスト名を個別に設定します。
アクセスを削除するには、エントリの「サイトを削除」をクリックし、「保存」をクリックします。