mcpField
P
preview-import

preview-import

github.com/adobeテスト・品質3161.6k 回インストール今日更新
リポジトリ

preview-import について

インポートしたコンテンツをローカル開発サーバーで表示し、レンダリング、ブロック、画像、メタデータを元ページのスクリーンショットと照合するスキルです。ページインポート後の確認に使います。

主な機能

  1. 01インポートパスでローカルプレビューを起動
  2. 02ブロック表示とページレイアウトを確認
  3. 03画像とメタデータを検証
  4. 04元のスクリーンショットと比較
  5. 05よくあるプレビュー問題のトラブルシューティング

活用シーン

  1. 01生成したインポート HTML のプレビュー
  2. 02元ページとの構造比較
  3. 03画像やブロック表示の問題調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/adobe/skills --skill preview-import

インストール後、Claude Code で/preview-importを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.releaserc.json
CHANGELOG.md
package.json

詳細

インポートのプレビュー

ローカル開発サーバーでインポートしたコンテンツを開いて確認します。

このスキルを使用するタイミング

次のような場合にこのスキルを使用します。

  • generate-import-htmlでHTMLファイルを生成した
  • ブラウザーでプレビューし、表示を確認する準備ができている
  • 元のページ構造と比較する必要がある

呼び出し元： page-import スキル（ステップ 5）

前提条件

前のスキルで、次のものが必要です。

  • ✅ 正しいパスにあるHTMLファイル（generate-import-htmlで生成）
  • ✅ 同じディレクトリにある画像フォルダー
  • ✅ scrape-webpageで取得した screenshot.png
  • ✅ URLの構築に使用するmetadata.jsonのdocumentPath

関連スキル

  • page-import - このスキルを呼び出すオーケストレーター
  • generate-import-html - プレビューするHTMLファイルを提供
  • scrape-webpage - 比較用のスクリーンショットを提供

プレビューワークフロー

ステップ 1：HTMLフォルダーフラグを指定して開発サーバーを起動する

metadata.jsonからフォルダーを特定します。

  • metadata.jsonのpaths.dirPathを確認します（例：/us）
  • これは、インポートしたHTMLファイルを含むルートフォルダーです

コマンド：

aem up --html-folder {dirPath}

インポートしたコンテンツの場所に応じた例：

HTMLファイルの場所コマンドプレビューURL
us/en.plain.htmlaem up --html-folder ushttp://localhost:3000/us/en
products/widget.plain.htmlaem up --html-folder productshttp://localhost:3000/products/widget
blog/2024/post.plain.htmlaem up --html-folder bloghttp://localhost:3000/blog/2024/post

これが必要な理由：

  • --html-folderを指定しないと、AEM CLIはリモートサーバーにリクエストをプロキシします
  • リモートサーバーにはローカルにインポートしたコンテンツがありません
  • 結果として、404「Page not found」エラーが発生します
ステップ 2：ブラウザーで移動する

ほとんどのファイルでは、ドキュメントパスをそのまま使用します。

http://localhost:3000${documentPath}

例：

  • HTMLファイル：us/en/about.plain.html
  • URL：http://localhost:3000/us/en/about

重要：indexファイルでは、/indexではなく/を使用します。

If file is: index.plain.html
Preview at: http://localhost:3000/
NOT: http://localhost:3000/index

注： --html-folderフラグ（例：aem up --html-folder drafts）を使用した場合は、そのフォルダーをURLの先頭に付けます。

File: drafts/test.plain.html
URL: http://localhost:3000/drafts/test

metadata.jsonのpaths.documentPathを使用します。ただし、indexファイルの場合は、パスが/indexではなく/であることを確認してください。

ステップ 3：表示を確認する

次の点を確認します。

  • ✅ ブロックが正しいスタイルで表示される
  • ✅ レイアウトが元のページ構造と一致している（screenshot.pngと比較）
  • ✅ 画像が読み込まれる（または適切なプレースホルダーが表示される）
  • ✅ 生のHTMLが表示されていない
  • ✅ メタデータがページソースに表示される（ソースを表示し、<meta>タグを確認）
  • ✅ セクションに正しいスタイルが適用されている
ステップ 4：元のページと比較する

並べて比較します。

  1. ブラウザーのプレビューと並べて./import-work/screenshot.pngを開きます
  2. コンテンツ構造が一致していることを確認します
  3. ブロックが正しく装飾されていることを確認します
  4. セクションの境界が揃っていることを確認します
  5. スタイルの一貫性を確認します

トラブルシューティング

ブロックが正しくレンダリングされない場合：

  • HTML の構造が想定される形式と一致しているか確認します
  • ブロック名が正確に一致しているか確認します（大文字と小文字は区別されます）
  • 形式については、../content-driven-development/references/html-structure.md を参照してください

画像が読み込まれない場合：

  • 画像フォルダーが HTML ファイルと同じディレクトリにあるか確認します
  • 画像パスが ./images/... 形式になっているか確認します
  • ./import-work/images/ から画像が正しくコピーされたか確認します

生の HTML が表示される場合：

  • ブロック名がプロジェクト内の既存のブロックと一致していない可能性があります
  • ブラウザーのコンソールで JavaScript エラーを確認します
  • blocks/ ディレクトリにブロックが存在するか確認します

ページソースにメタデータがない場合：

  • メタデータブロックが HTML ファイルの末尾にあるか確認します
  • ページソースを表示し、<head> 内の <meta> タグを検索します
  • メタデータのプロパティが想定される形式と一致しているか確認します

開発サーバーが起動していない場合：

  • aem up でサーバーを起動します
  • ポートの競合がないか確認します（デフォルトは 3000 です）
  • 正しいプロジェクトディレクトリにいるか確認します

ページが見つからない場合（404）：

  • 最も一般的な原因： --html-folder フラグが指定されていません。aem up --html-folder {dirPath} でサーバーを再起動します
  • HTML ファイルが想定されるパスに存在するか確認します
  • metadata.json の documentPath が URL と一致しているか確認します
  • index ファイルの場合は、/index ではなく / を使用します
  • ターミナルの出力に「Serving HTML files from folder: {folder}」と表示されているか確認します

出力

このスキルでは、以下を提供します：

  • ✅ 元のページ構造と一致する、検証済みのプレビュー
  • ✅ 正しくレンダリングされていることの視覚的な確認
  • ✅ ブロックの装飾の検証
  • ✅ メタデータが存在することの確認

すべての検証項目に合格すると、インポートは完了です。

コメント

Markdown 対応