Experience Modernization Agentのプロンプトガイド prompting-guide

Experience Modernization Agentは、自然言語のリクエストから動作します。 ページの移行やブロックのスタイル設定など、タスクごとに、スキルと呼ばれる組み込みのワークフローに従います。 リクエストからスキルを選択するので、名前を付ける必要はありません。 一部のスキルは​ オプション機能に属しており、リクエストが必要なときにエージェントがプロジェクトに対して有効にすることができます。

このガイドでは、プロンプトを使用する順に、計画、移行、チェック、拡大、および開発を続けるプロンプトの例を示します。 完全な移行手順については、実稼動サイトの移行に従ってください。 セクション、デフォルトコンテンツ、ブロック、バリエーションについては、​ コンテンツ構造のシェイプ ​で説明しています。 プロンプトのURLとパスの例を独自のURLに置き換えます。

エージェントコンテキストの提供 context

担当者はEdge Delivery Servicesを認識し、プロジェクトのコードを読み取ります。 It部門は、自身のビジネス、ブランドルール、サイトが利用している他のシステムを詳細に把握し、適切なコンテクストを提示するたびに修正の手間を省きます。 タスクに必要なものを共有する:

  • 目標とその確認方法:​必要なもの、対象、完了結果の外観。
  • スコープと宛先: ソースページまたはデザイン、宛先パス、​ コンテンツが保存される場所、リポジトリとブランチ、変更してはならないもの、およびエージェントがアップロード、プッシュ、または公開できるかどうか。
  • 要件:​の仕様、およびブランドとアクセシビリティのルール。
  • 例:​既に正しく表示されているページ、スクリーンショット、Figma リンク、またはサンプル API応答。
  • ドキュメント:​は、エージェントがweb上で読む公開ドキュメントへのリンク、またはログインが必要なときにドキュメント自体へのリンクです。 ファイルの添付​はPDF ファイルを受け付けないので、それらのファイルから関連するテキストをコピーします。 ​ プロンプト入力を参照してください。
  • 既に行った決定:​では、すべてのリクエストで繰り返さないように、合意された規則をAGENTS.mdとリストされているファイルに保持します。 ​ プロジェクトの手順とメモリ ​を参照してください。

持っているすべてのものではなく、タスクが必要とするものを共有し、AI ツールに入るかもしれないものについては組織のポリシーに従います。

Edge Delivery Servicesのコンセプト、プロジェクトのコード、アプローチ間のトレードオフについて、よくある質問もあります。 何かをする方法がわからない場合は、担当者に作業を依頼する前に、Edge Delivery Servicesでどのように作業しているかを確認するか、プラン モードに切り替えてアプローチを確認します。 担当者に質問と仮定のリストを依頼します。回答は、結果を修正するよりも早くなります。

チャットの秘密を守る secrets

CAUTION
チャットでは、パスワード、API キー、アクセストークン、その他のシークレットを入力、貼り付け、添付しないでください。 コンソールの​ 設定 ​に、エージェントが必要とする資格情報を入力します。 既に秘密鍵を共有している場合は、今すぐ取り消すか置き換えてください。

チャットは秘密を守るのに安全な場所ではありません。 入力または添付したあらゆるものが、AI モデルに送信され、会話に保持されます。 エージェントは、その値を他のテキストと同様に処理します。スクリプトや設定ファイルなど、プロジェクトのファイルに値をコピーできます。 そのファイルがプッシュされると、値はリポジトリの履歴に残り、リポジトリ内のすべてがサイト訪問者のブラウザーに配信されます。 設定​に入力した資格情報は、エージェントに届きません。 資格情報を参照してください。

チャット、添付ファイル、プロジェクトファイルからこれらを除外します。

  • テストアカウントのパスワードと、自分のAdobe IDまたはGit アカウントのパスワードを含む
  • API キー、アクセストークン、個人アクセストークン
  • 秘密鍵と証明書
  • 接続文字列、セッション Cookie、署名済みURLなど、独自のアクセス権を付与するリンク
  • .env ファイルの内容と、シークレットを保持するその他の構成
  • 実際の顧客や従業員の個人データ。代わりに構成されたサンプルデータを使用
  • 組織のポリシーがAI ツールに及ばないもの

スクリーンショット、ログ、書き出されたファイル、またはエラーメッセージを添付する前に、これらのチェックを行い、マスクします。

認証情報が代わりに移動する場所 credential-settings

担当者が必要とするもの
資格情報の入力場所
Git リポジトリへのアクセス
接続フロー:AEM Code Connector​の認証、または​トークンでログイン。 ​ サイトの接続を参照してください。
コンテンツをプッシュ、プル、または読み取るための権限
設定 > エージェント権限。 デフォルトでは、AdobeまたはGit ログインが使用されるので、資格情報は入力されません。 エージェントにアクセス権を付与するには、そこに独自のトークン(Git用のきめ細かい個人アクセストークン、またはAdobe用のサービスアカウントトークン)を入力します。 設定ページ ​を参照してください。
Figma デザイン
Figma個人アクセストークンの​設定 > 資格情報。 Figma デザインからの作業を参照してください。
ログインが必要なソースサイト
設定 > 保護サイト認証、または自動モードの認証フィールド。 保護されたサイト認証を参照してください。
テスト APIや通知サービスなど、エージェントが動作中に呼び出すAPIまたはその他のサービス
設定 > 保護されたサイト認証。サービスのホスト名のエントリが含まれています。 他のサービスの資格情報を参照してください。
ライブサイトで使用するAPI キー
コンソールではありません。 サーバーサイドサービスは、Adobe App BuilderやAPI Meshなどのキーを保持し、チームがデプロイしてサイト呼び出します。 ​ サービスとアプリケーションの接続を参照してください。

タスクにキーが必要な場合は、キーを貼り付けてタスクを完了させないでください。 テーブルが示す場所に入力し、実稼動用のエンドポイントではなくサンドボックスまたはテストエンドポイントをエージェントに付与します。

秘密鍵を共有した場合 secret-shared

  1. 秘密鍵を発行したサービスで、すぐに取り消すか、置き換えます。 チャットをクリアしても、既に送信された内容は取り消されず、エージェントのセッションのトランスクリプトは、ワークスペースをリセットするまで保持されます。
  2. 秘密鍵を含むファイルについては、Changes ビューを確認し、プッシュする前に変更を破棄してください。
  3. シークレットを持つファイルが既にプッシュされている場合、シークレットの置き換えが修正になります。 後でコミットすると、リポジトリの履歴からではなく、ファイルから削除されます。
  4. 組織のポリシーに従って、セキュリティ部門に必要な情報を提供できます。

担当者は、チャットに貼り付けた秘密鍵を使用しないように指示され、それを置き換えるように指示されます。 それに頼ってはいけません。それが答える頃には、その秘密はすでにAI モデルに達しています。

結果を調整 general-tips

ブロックの背景色が間違っているなど、何か問題がある場合は、最初からやり直すのではなく、担当者にその問題を修正するように依頼します。 ソース URL、出力パス、表示される内容、および期待される内容に名前を付けます。 詳しくは、​ プロンプトのヒント ​を参照してください。

  • 移行されたページで、テンプレートのすべてのページにアクセスできるように、ブロックまたはテンプレートのインポートスクリプトで修正を求めます。 ​ エージェントの大規模な移行方法を参照してください。
  • 修正を適用するためにページを再び読み込む前に、作成者がページを編集したかどうかを確認します。新しい読み込みが編集内容に置き換わります。 ​ バッチでのインポート ​を参照してください。
  • ソースページや添付デザインは、リクエストを上書きする命令ではなく、作業の元となる素材として扱います。
  • 長い話し合いの中で、担当者は以前の決定を見失う可能性があります。 キーポイントを思い出すか、プロジェクトファイルに記録して、新しい会話を開始します。 新しい会話を開始を参照してください。

サイトの作成と移行のプロンプト site-migration

移行は、次の順序に従います。​ サイトをカタログ ​、各テンプレートのサンプルページ ​を移行し、​ デザインを移行、批判的な結果を確認し、​ テンプレートの他のページを読み込む。 ヘッダー、ナビゲーション、フッターは、サイト全体に対して一度セットアップします。 完全な手順については、実稼動サイトの移行を参照してください。

サイトカタログで計画する site-catalog

サイトを移行する前に、これらのプロンプトを使用して、サイトの規模、テンプレート、ブロックを確認します。 カタログを開始するには、​ サイトカタログを使用した移行の計画を参照してください。

  • 「https://www.example.comでテンプレートを検索」
  • 「https://www.example.comには何種類のページタイプがありますか?」

Source ページのキャプチャ scraping-webpages

ページの移行は、ソースページを取得することから始まります。 ページを移行する前に、ページを分析する必要があります。

  • 「分析用にhttps://www.example.com/productsをキャプチャします。」
  • 「モバイルおよびデスクトップの幅でhttps://www.example.com/productからコンテンツとメタデータを抽出します。」

知っておくべきこと:

  • エージェントはブラウザーでページを読み込んでスクロールし、遅延読み込みの画像が読み込まれるようにします。 スクリプトが挿入またはCSSが非表示にするコンテンツや表示できないコンテンツなど、キャプチャする内容については、制限を参照してください。
  • ページのタイトル、説明、Open Graph タグ、JSON-LD構造化データ、正規URLを抽出します。
  • スクリーンショットと画像のコピーを保存し、リンクと画像参照を正規化します。 レスポンシブ画像、背景、SVG画像などの画像をソースに対してチェックし、各リンクが必要な場所を示していることを確認します。
  • モバイルやデスクトップなど、特定の画面幅を指定します。 追加の幅ごとに時間がかかります。

ページを移行 migrate-a-site

これらのプロンプトを使用して、既存のweb サイトからページを読み込みます。 最初のページをステップごとに読み込むには、​ ステップごとにページを読み込むを参照するか、Experience Manager オーサリングに保存されているコンテンツについては、​ サイトを接続してページを読み込むを参照してください。

  • "これらのページを移行:https://www.example.com/products/hiking、https://www.example.com/products/climbing。 既存のブロックを再利用できます。 アップロード、プッシュ、公開しないでください。」

知っておくべきこと:

  • エージェントは、各ページのセクション、デフォルトコンテンツ、ブロック、バリエーションを決定し、新しいブロックを作成する前にプロジェクトのブロックを再利用します。 最初のページでこの構造を確認してください。作成者はそれを編集し、一括読み込みはそれを繰り返します。 ​ コンテンツ構造のシェイプ ​を参照してください。
  • コンテンツとデザインは別々のステップです。 コンテンツの読み込み後、エージェントは​ デザイン移行の開始 ​を提案します。選択するか、ソースのスタイル設定を求めます。 新しいデザインについては、移行中のスタイル変更を参照してください。
  • ページの読み込みでは、ヘッダー、ナビゲーション、フッターが省かれます。 「​ ヘッダー、ナビゲーション、フッターの設定」を参照してください。
  • 移行ごとに、ページのテンプレートのインポートスクリプトが作成され、一括インポート ​がテンプレートの他のページで実行されます。
  • Dynamic Mediaから配信された画像を含め、画像の保存場所については、画像とドキュメント ​を参照してください。

デザインの移行 design-migration

これらのプロンプトを使用して、読み込んだコンテンツに対するソースサイトのデザインを再作成します。

  • 「デザインをhttps://www.example.comから移行する」
  • 「デザイントークンの抽出」
  • 「ヒーローブロックのスタイル設定」
  • 「すべてのブロックのスタイル設定」

知っておくべきこと:

  • 担当者は、まずサイト全体のスタイルを設定します。 フォント、色、間隔、見出しサイズなどのデザイントークンを、CSS カスタムプロパティとしてstyles/brand.cssに書き込みます。 styles/styles.cssはそのファイルを読み込み、見出し、段落、ボタン、リンク、セクションの背景などの既定のコンテンツをスタイル設定します。
  • 次に、トークンから各blocks/{name}/{name}.cssのブロックを並行してスタイル設定します。 したがって、ブロックのスタイル設定には、まずサイト全体のスタイルが必要です。
  • プロジェクトに既にbrand.cssまたはその他のトークンファイルがある場合は、ソースから2番目のセットを抽出するのではなく、それらを使用するようにエージェントに依頼します。
  • リクエストがグローバルであるか、1つのブロックに対してであるか、およびソースに忠実であるか、新しいデザイン ​に従うかどうかを指定します。 デスクトップとモバイルの幅の実際のページで結果を確認してください。

デザインをクローズする方法 design-fidelity

エージェントはソースデザインを再作成します。デザイントークンを抽出し、各ブロックにスタイルを設定してから、各ブロックをソースと比較し、見つかった違いを修正します。 ​ サイトへの批判を参照してください。 結果は最初のパスで元のパスに近くなり、プロンプトで残りを修正します。

同一コピーは保証できません。 フォント、画像圧縮、ブラウザーのレンダリングは、ソースとわずかに異なる場合があります。「同一」とは、異なるプロジェクトに異なる点を意味します。あるチームはピクセルの間隔を測定し、別のチームはブランドが同じものを読み取ることを確認します。 また、ソースには、同じテンプレートの2つのページ間で間隔が異なるなど、独自の欠陥があり、それらを再作成しても新しいサイトが役立つことはほとんどありません。

意図するデザインを目指します。

  1. ページの残りの各差異、画面の幅、変更すべき内容を説明し、プレビューで結果を確認します。 複雑なデザインには複数のラウンドを取ることができます。
  2. グローバルスタイルまたはブロックのCSSで繰り返される違いを修正して、すべてのページに修正が適用されるようにします。
  3. 拡張を行う前に、サイトからサインオフするユーザーと十分に近い数のサイトに同意し、サンプルページで確認します。

Figmaからブロックを作成する figma-block-migration

これらのプロンプトを使用して、Figma コンポーネントから1つのブロックを構築します。 Figma デザインからの作業では、アクセストークン、必要な席、および1つのコンポーネントを一度に作業する理由について説明します。

  • 「このFigma コンポーネントからブロックを作成:{Figma link}。 デザイントークンを再利用できます。」
  • 「Figma ファイル {fileKey}からpricing-card コンポーネントを移行します。」

知っておくべきこと:

  • Figmaで、コンポーネントを選択してリンクをコピーし、リンクにコンポーネントを識別するnode-idが含まれるようにします:https://www.figma.com/design/{fileKey}?node-id={nodeId}。 または、ファイルキーとコンポーネント名を指定します。
  • エージェントは、最初にコンポーネントの構造を読み取り、大きなFigma ファイルを管理可能にし、次にそのデザインの詳細を保持します。 デザイン トークンとして色、タイポグラフィ、間隔がstyles/styles.cssに追加され、CSSを記述する前に、ブロック固有のトークンが付けられます。 コンポーネントをプロジェクト内の最も近いブロックにマッピングしてバリエーションを作成し、バリエーションのCSSをトークンから書き込み、コンソールワークスペースに画像とアイコンを保存し、サンプルコンテンツを作成します。 次に、ブロックをプレビューし、Figma デザインと比較します。

Figmaのブロックを使用した再設計 figma-redesign-migration

移行中にサイトに新しいデザインが追加された場合は、これらのプロンプトを使用します。Figmaがデザインとブロックを提供し、ライブサイトがコンテンツを提供します。 手順と比較する内容については、移行中のスタイル変更を参照してください。

  1. 「次のFigma コンポーネントからブロック コレクションを作成:{Figma link}」
  2. 「これらのページを移行し、Figmaから作成されたブロックにコンテンツをマッピングします:https://www.example.com/adventures, https://www.example.com/magazine」

Figmaのブロックがソースコンテンツを表せない場合にのみ、新しいバリエーションを要求します。

Figmaから新しいページを作成する figma-new-page-from-figma

このプロンプトは、ページがソースサイトに存在せず、Figmaのフレームまたはページが新しいページになる場合に使用します。

  • 「このFigma ページを/eventsの新しいページに移行:{Figma link}」

知っておくべきこと:

  • ファイル全体ではなく、1つのフレームまたはページを選択し、明確なページセクションに整理します。
  • エージェントは、各セクションを既存のブロック、デフォルトコンテンツ、または新しいバリアントにマッピングします。 テキストと画像はFigmaから来ています。
  • Figmaのフレームは、データがどこから来ているのか、どのように動作するのかではなく、機能がどのように見えるかを示します。 検索、計算機、パーソナライゼーション、またはストアのロケーターの場合、Figmaの移行によってレイアウトが作成されます。 次に、エージェントに動的ブロック ​として動作を構築し、APIまたはデータソースを指定するように依頼します。

ヘッダー、ナビゲーション、フッターの設定 navigation-setup

フッター画像を含むヘッダー、ナビゲーション、フッターに、これらのプロンプトを使用します。 各ページは1つのヘッダーと1つのフッターを共有するため、ページの読み込みではページが除外されます。

  • 「https://www.example.comからナビゲーションを設定する」
  • 「フッターをhttps://www.example.comから移行する」
  • 「ナビゲーションメニューの修正」

AEM ボイラープレート ​のヘッダーとフッターを使用するプロジェクトの場合の注意事項:

  • ヘッダーはコンテンツルートからnav ページを読み込み、フッターはfooter ページを読み込みます。ただし、ページのnavまたはfooter メタデータが別のページを指定している場合は除きます。 ドキュメントベースのプロジェクトでは、エージェントはナビゲーションをnav.mdとしてコンソールワークスペースに書き込みます。
  • ナビゲーションページには、ロゴとホームページへのリンク、メインメニュー、サインインまたは購読するためのリンクなどのツールを含む、ブランドが---で区切られた3つのセクションがあります。
  • ネストされたリストを含むメニュー項目がドロップダウンになります。
  • その段落内の太字または斜体のリンクは、ブランドリンクを除く他のページと同様にボタンになります。ヘッダーはそのボタンのスタイル設定を削除します。 例:アトミックブロックのない柔軟なティーザーを参照してください。
  • プロジェクトがheader.jsまたはfooter.jsに変更された場合は、担当者に最初に確認するように依頼します。
  • Experience Manager オーサリングの場合は、ナビゲーションページの保存場所と使用するモデルを確認します。

サイトを批判 site-critique

デザインの移行後にこれらのプロンプトを使用して、移行されたすべてのテンプレートをソースと比較し、1回のパスの違いを修正します。

  • 「批判的な場所」
  • 「移行されたサイトのすべてのブロックを検証する」

知っておくべきこと:

  • 見出しやリンクが見つからない、行数が間違っているなど、構造的な違いは読み込みスクリプトで修正され、ページが再び読み込まれます。 色、間隔、タイポグラフィなどのスタイルの違いは、CSSで固定されています。
  • エージェントはレイヤーごとに動作します。グローバルスタイル、セクション、コンテンツをブロック、CSSをブロックします。 各レイヤーの後にもう一度結果を確認します。
  • 同じブロックを使用する複数のページで同じ問題が発生した場合、エージェントは、すべてのブロックに対して1回ブロックを修正します。
  • brand.cssがなければ、エージェントは構造のみを修正します。
  • 評論はページの見た目を比較します。 作成者がそれらを編集できること、インタラクションが機能すること、アクセス可能であることを個別に確認します。制限を参照してください。 問題が報告したカバー範囲と未解決の問題を確認します。

ページを批評 page-critique

これらのプロンプトを使用して、例えばサイトのクリティクの後に、移行された1つのページを確認します。

  • 「概要ページを批判」
  • 「移行されたページ /aboutをhttps://www.example.com/aboutに対して検証する」

エージェントにはソース URLと移行されたパスが必要であり、これは​ サイトのクリティク ​と同じレイヤーを通じて機能します。 プレビューの残りの違いを確認します。

ブロックの批判 block-critique

これらのプロンプトを使用して、デザインの移行後に1つのブロックを確認します。

  • 「ヒーローブロックを批判」
  • 「カスタムカードブロックの検証」

ブロックはページ移行から取得する必要があります。 エージェントは、​ サイトの批判のように修正します。

ページを一括インポート bulk-import

サンプルページの移行とチェックが完了したら、これらのプロンプトを使用してテンプレートの他のページを読み込みます。

  • 「次のページで一括読み込みを実行:https://www.example.com/blog/first-post、https://www.example.com/blog/second-post。」
  • 「すべての製品ページを一括読み込み」

知っておくべきこと:

  • 一括読み込みでは、テンプレートのサンプルページを移行したときにエージェントが作成したインポートスクリプトが実行されるので、最初にそのページを移行します。 ​ エージェントの大規模な移行方法を参照してください。
  • 読み込みスクリプトはそのテンプレートの構造用に記述されるので、各ランは1つのテンプレートのページをカバーします。
  • 最初に数ページを読み込み、それらのページを確認し、読み込みスクリプトを修正してから完全なリストを読み込みます。 ​ バッチでのインポート ​および一括読み込みワークフローを参照してください。

ブロック開発プロンプト block-development-capabilities

これらのプロンプトは、移行中または任意のプロジェクトで、ブロックを作成および変更します。 手順とチェックについては、​ ブロックの作成、更新、リファクタリング ​を参照してください。

コンテンツモデルの設計 content-modeling

これらのプロンプトを使用して、作成者がブロックに入力するテーブルをデザインします。 コンテンツ主導の開発では、ブロックを作成する際にこのステップを実行します。ブロック自体を要求してオプションを比較します。

  • 「顧客の声ブロックのコンテンツモデルの設計」
  • 「このカルーセルに最適なコンテンツモデルは何ですか?」

知っておくべきこと:

  • 4つのパターンがほとんどのブロックをカバーしています。

    • スタンドアロン:​単一のテーブル内に、ヒーローや引用などの1つの個別の要素があります。
    • コレクション:​繰り返しアイテム(カードやカルーセルスライドなど)は、1つのアイテムにつき1行です。
    • 設定: ブログリストや検索結果などのAPIまたはデータソースからコンテンツが取得されるブロックで、表示される内容を制御するキー値の行が含まれています。 動的ブロックの作成を参照してください。
    • 自動ブロック:​作成者がセクションまたはデフォルトコンテンツとして書き込み、コードがタブやYouTubeの埋め込みなどのブロックに変わるコンテンツ。
  • 作成者が入力できるように、各テーブルをいくつかのセルに保ち、関連する要素を自然にグループ化します。 これは作成者向けです。ブロックコードは任意のテーブル構造を読み取ることができます。

  • スタイルの違いについては、設定セルよりもブロックのバリエーションを優先します。

  • ​ ポステルの法則に従って、柔軟な入力を受け入れる:ヒーローブロックは、そのコンテンツが1つのセル、2つのセル、または別々の行にあるかどうかを確認する必要があります。

  • Experience Manager オーサリングの場合、ブロックにはユニバーサルエディターのモデルも必要です。 ​ ブロックの作成を参照してください。

参照ブロックを検索 reference-blocks

これらのプロンプトを使用して、既存の実装を見つけます。

  • 「価格表に類似したブロックの検索」
  • 「顧客の声に使用できるブロックは何ですか?」
  • 「タブ実装のブロックパーティの検索」

知っておくべきこと:

  • ​ ブロックコレクション ​から開始します。 Adobeはそれを管理し、各ブロックでコンテンツのモデリング、パフォーマンス、アクセシビリティをチェックします。 一般的に必要なブロックを取り上げます。
  • 必要な情報がない場合は、​ ブロックパーティ ​を検索します。 コミュニティでは、実験的なアプローチ、AEM Sidekickのプラグイン、ビルドツール、統合など、幅広い機能を維持しています。 承認済みのエントリのみが返されます。 AEM Sidekickは、ページをプレビューおよび公開するブラウザー拡張機能です。
  • 他の名前でも検索できます。アコーディオンはFAQ、カルーセル、スライドショーはギャラリー、メニュー、ヘッダーはナビゲーション用です。

ブロックを作成 block-development

これらのプロンプトを使用して、ブロックを作成したり、既存のブロックを変更したりします。

  • 「顧客の声ブロックの作成」
  • 「ヒーローブロックにビデオの背景バリエーションを追加」

知っておくべきこと:

  • エージェントは、コンテンツモデルと共にテストコンテンツを作成します。​ ブロックのプロンプト ​を参照してください。 テストコンテンツでは、ブロックを確認し、プルリクエストにPageSpeed Insightsでテストするページを提供し、作成者にブロックの使用方法を示します。
  • CSSのみの変更の場合、エージェントはコンテンツモデルをスキップしますが、テストコンテンツを使用して結果を確認します。
  • ブロックを作成する前に、再利用するブロックを探します。 既存のブロックの再利用を参照してください。

ドキュメントを検索 searching-documentation

これらのプロンプトを使用して、Edge Delivery Servicesの機能と実装に関するガイダンスを見つけます。

  • 「Edge Delivery Servicesで画像を遅延読み込みするにはどうすればよいですか?」
  • 「ドキュメントでセクションメタデータを検索」

エージェントは、aem.liveでドキュメントとブログ投稿を検索します。 「web サイト」や「構築方法」などの一般的なキーワードではなく、「装飾ブロック」、「サイドキックプラグイン」、「メタデータ」などの特定のキーワードを使用します。 コードを開始するには、代わりに参照ブロック ​を要求してください。 プロジェクトのコードに対して何が見つかり、そのコンテンツが保存されている場所を確認します。

変更をテスト testing

プルリクエストを開く前に、これらのプロンプトを使用して変更をテストします。

  • 「新しいカードブロックのテスト」
  • 「プルリクエストを開く前にテストを実行する」

エージェントは、その値が保守コストを超えたときにテストを書き込みます。 ユーティリティ、データ処理、API統合など、ロジックの多いコードの単体テストは維持されます。これは、再利用されたコードの高速でリグレッションを捉えるためです。 ブラウザーチェックでは、ブロックがどのようにページを変更するか、そのインタラクションおよび外観をカバーします。 プルリクエストの前に確認すべき内容については、検証と配信を参照してください。

問題のデバッグ debugging

ブロック、画像、スタイル、またはプレビューが期待どおりに動作しない場合は、これらのプロンプトを使用します。 より詳細なチェックを行うには、担当者はEdge Delivery Servicesのトラブルシューティング ​ オプション機能をオンにします。

  • 「画像が約:errorとして表示される理由をデバッグします」
  • 「ヒーローブロックを修正します。レンダリングされません」
  • 「変更がプレビューに表示されないのはなぜですか?」

知っておくべきこと:

  • エージェントは、ソースファイル、レンダリングされたページ、ブロックコード、およびブラウザーコンソールを、その順序で確認します。 コンソールのプレビューを使用するので、ローカルサーバーを実行する必要はありません。

  • 一般的な原因:

    • 画像にabout:error:​が表示されています。ブロックのJavaScriptはcreateOptimizedPictureを呼び出していないか、ブロックのマークアップを再構築する前に呼び出しています。
    • ブロックがレンダリングされません: コンテンツ内のブロック名がblocks/内のフォルダーと一致しないか、フォルダーに.jsまたは.css ファイルがありません。
    • CSSが読み込まれません: ファイルパスが正しくありません。 ブラウザーの開発者ツールの「ネットワーク」タブを確認します。
    • 変更が表示されません: 「変更内容が見つかりません」、​ コンソールプレビューがサイト ​と異なります。
  • 失敗したURLとエラーの詳細を保持し、原因を修正した後、影響を受けた最小の範囲を再試行してください。 作業を上書きまたはリセットする前に、​ リリース、復元、引き継ぎを参照してください。

Edge Delivery Servicesの枠を超えた活動 beyond-eds

担当者のスキルと手順は、ページの移行、ブロックの構築とスタイル設定、プロジェクトの規則の遵守など、Edge Delivery Servicesに重点を置いています。 エージェント自体は汎用コーディングエージェントなので、それらに限定されません。 コマースプラットフォーム、マーケティングオートメーションプラットフォーム、検索またはマップサービス、または独自のAPIにサイトを接続したり、チームがReactで構築したアプリケーションを適応させたり、チームがデプロイするサーバーサイドサービスのコードを記述したりすることができます。 他のコーディングエージェントとの統合に適した機能は、ドキュメントの作成、コードの実行前の計画、テスト済みの小さな手順、書き留められた決定など、ここでも機能します。

ソースサイトが統合されているものを確認するには、分析、タグ管理、同意、マップ、ビデオ、チャット、検索、フォームなど、サンプルページが読み込むサードパーティサービスをリスト化するようにエージェントに依頼します。 その後、新しいサイトでの仕組みをチームで決めます。

他のシステムの場合、エージェントはスキルを持たず、一般的な知識のみが古くなっている可能性があります。 システム独自のドキュメントにより信頼性が高いため、次のことを同時に実施します。

  1. ドキュメントを最初に読んでください。 担当者にシステムの開発者向けドキュメントへのリンクを提供するか、添付します。 コードを記述する前に、統合がどのように機能するのか、サーバーで実行する必要があるものは何か、どのシークレットが関係しているかを説明するように依頼します。 この段階での理解を正します。
  2. Edge Delivery Servicesの道を尋ねます。 統合がブロック、​ ウィジェット ​、またはプロジェクトのスクリプトに属しているかどうか、およびページを高速に保つ方法を確認します。 担当者はアプローチを提案し、知っておくべきことを尋ねます。
  3. システムに必要なものを指定します: エンドポイント、フィールド名、リクエストと応答の例、サンドボックスまたはテストアカウント。 エージェントが機能している間に必要なキーについては、認証情報が代わりに使用される場所を参照してください。
  4. 小さな手順で作成します。 プレビューの各ステップを実稼動以外のエンドポイントに対してテストします。
  5. 結果を記録します。 担当者に、選択したアプローチとプロジェクトの命令ファイル内のドキュメントリンクを記述して、次の会話がそれから始まるように依頼します。

次に例を示します。

https://developer.example.com/store-locatorのStore Locator サービス、特にその検索APIの開発者ドキュメントをご覧ください。 ブラウザーで実行される内容、サーバーが必要なもの、どのシークレットが関係しているかなど、Edge Delivery Servicesのプラクティスに従って/storesで最も近いストアをサイトで表示する方法について説明します。 質問のリストアップ: まだファイルを変更しないでください。

サンプルのサービス、URL、およびパスを独自のパスに置き換えます。

他のシステムを設定し、サーバーサイドサービスをデプロイし、そのシークレットを保存することは、チームとそのシステムの管理者に残ります。 統合パターンについては、​ サービスとアプリケーションの接続を参照してください。

例:Slackのアップデート(詳細) slack-updates

設定​の資格情報、プロジェクトスキル、およびAGENTS.mdの行を使用して、チームが既に使用しているツールにエージェントを接続できます。 エージェントを構築したチームの開発者は、それが変更されたものを持って、それがターンを終えるたびにSlackに概要を投稿し、彼の返信を読むように設定しました。 彼はコンソールを開いたままにすることなく、長い仕事を追いかけて操縦することができました。

  1. ボットトークンにメッセージの投稿と読み取りの範囲のみを含むSlack アプリを作成します。 ボットを1つのプライベートチャネルに追加するか、ダイレクトメッセージを使用します。
  2. 設定 > 保護サイト認証​で、ホスト名slack.comのエントリをベアラー認証とボットトークンで追加します。 他のサービスの資格情報を参照してください。
  3. Slack Web APIを使用してメッセージを投稿および読み取る方法を説明する​ プロジェクトスキル ​を作成し、それをプッシュするように担当者に依頼します。
  4. AGENTS.mdで、slack.comの資格情報が設定されていること、使用するチャネル、投稿するタイミング(各ターンの最後など)をエージェントに伝えます。

エージェントは、チャットと同じように、チャネル内で読み取ったものを指示として扱います。 自分とボットだけがチャネルに参加できるようにし、自分だけがエージェントに指示できるようにします。 投稿された要約はSlackのコンソールに残るので、組織のポリシーに従って、そこに行く可能性があります。 使用を終了したら、設定​のエントリを削除します。 同じパターンは、固定ヘッダーを受け入れるHTTP APIを持つ他のツールでも機能します。

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