📦 その他コミュニティ

preview-import

AEM Edge Delivery Services の開発環境で、インポートしたコンテンツの見え方を確認し、元のページと比較して問題点を見つけやすくすることで、コンテンツの品質向上を支援するSkill。

📜 元の英語説明(参考)

Preview and verify imported content in local AEM Edge Delivery Services dev server. Validates rendering, compares with original page, and troubleshoots common issues.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o preview-import.zip https://jpskill.com/download/9687.zip && unzip -o preview-import.zip && rm preview-import.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9687.zip -OutFile "$d\preview-import.zip"; Expand-Archive "$d\preview-import.zip" -DestinationPath $d -Force; ri "$d\preview-import.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して preview-import.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → preview-import フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

プレビューインポート

ローカル開発サーバーでインポートされたコンテンツを開き、検証します。

この Skill を使用する場面

この Skill は、以下の場合に使用します。

HTML ファイルを生成済みである (generate-import-html から)
ブラウザでプレビューし、レンダリングを検証する準備ができている
元のページ構造と比較する必要がある

呼び出し元: page-import skill (ステップ 5)

前提条件

以前の Skill から、以下が必要です。

✅ 正しいパスにある HTML ファイル (generate-import-html から)
✅ 同じディレクトリにある images フォルダ
✅ scrape-webpage からの screenshot.png (比較用)
✅ metadata.json からの documentPath (URL 構築用)

プレビューワークフロー

ステップ 1: 開発サーバーの起動

コマンド:

aem up

これにより、ローカル AEM プロキシサーバーが http://localhost:3000 で起動します。

ステップ 2: ブラウザでのナビゲート

ほとんどのファイルでは、document path を直接使用します:

http://localhost:3000${documentPath}

例:

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

重要: index ファイルの場合は、/ の代わりに /index を使用します:

ファイルが以下の場合: index.plain.html
プレビュー先: http://localhost:3000/index
非推奨: http://localhost:3000/

注: --html-folder フラグ (例: aem up --html-folder drafts) を使用した場合は、そのフォルダを URL の先頭に追加します:

ファイル: drafts/test.plain.html
URL: http://localhost:3000/drafts/test

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

ステップ 3: レンダリングの検証

以下を確認してください:

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

ステップ 4: オリジナルとの比較

並べて比較:

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

トラブルシューティング

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

HTML 構造が期待される形式と一致することを確認します
ブロック名が完全に一致することを確認します (大文字と小文字を区別)
形式のガイダンスについては、../page-import/resources/html-structure.md を確認してください

画像がロードされない:

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

生の HTML が表示される:

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

メタデータがページソースにない:

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

開発サーバーが実行されていない:

aem up でサーバーを起動します
ポートの競合を確認します (デフォルトは 3000)
正しいプロジェクトディレクトリにいることを確認します

ページが見つからない (404):

HTML ファイルが期待されるパスに存在することを確認します
metadata.json からの documentPath が URL と一致することを確認します
index ファイルの場合は、/ ではなく /index を使用します
--html-folder を使用している場合は、URL にフォルダを含めます

出力

この Skill は以下を提供します。

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

すべての検証ポイントに合格した場合、インポートは完了です。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Preview Import

Open and verify imported content in local development server.

When to Use This Skill

Use this skill when:

You have generated HTML file (from generate-import-html)
Ready to preview in browser and verify rendering
Need to compare with original page structure

Invoked by: page-import skill (Step 5)

Prerequisites

From previous skills, you need:

✅ HTML file at correct path (from generate-import-html)
✅ Images folder in same directory
✅ screenshot.png from scrape-webpage (for comparison)
✅ documentPath from metadata.json (for URL construction)

Related Skills

page-import - Orchestrator that invokes this skill
generate-import-html - Provides HTML file to preview
scrape-webpage - Provides screenshot for comparison

Preview Workflow

Step 1: Start Development Server

Command:

aem up

This starts the local AEM proxy server at http://localhost:3000

Step 2: Navigate in Browser

For most files, use the document path directly:

http://localhost:3000${documentPath}

Example:

HTML file: us/en/about.plain.html
URL: http://localhost:3000/us/en/about

IMPORTANT: For index files, use /index instead of /:

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

Note: If you used --html-folder flag (e.g., aem up --html-folder drafts), prepend that folder to the URL:

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

Use paths.documentPath from metadata.json, but for index files ensure the path is /index not /

Step 3: Verify Rendering

Check the following:

✅ Blocks render with correct styling
✅ Layout matches original page structure (compare to screenshot.png)
✅ Images load (or show appropriate placeholders)
✅ No raw HTML visible
✅ Metadata appears in page source (view source, check <meta> tags)
✅ Section styling applied correctly

Step 4: Compare with Original

Side-by-side comparison:

Open ./import-work/screenshot.png alongside browser preview
Check that content structure matches
Verify blocks decorated correctly
Confirm section boundaries align
Validate styling consistency

Troubleshooting

Blocks don't render correctly:

Check HTML structure matches expected format
Verify block names match exactly (case-sensitive)
Review ../page-import/resources/html-structure.md for format guidance

Images not loading:

Verify images folder is in same directory as HTML file
Check image paths are ./images/... format
Ensure images were copied correctly from ./import-work/images/

Raw HTML visible:

Block name might not match existing block in project
Check browser console for JavaScript errors
Verify block exists in blocks/ directory

Metadata not in page source:

Check metadata block is at end of HTML file
View page source and search for <meta> tags in <head>
Verify metadata properties match expected format

Dev server not running:

Start server with aem up
Check for port conflicts (default 3000)
Verify you're in correct project directory

Page not found (404):

Verify HTML file exists at expected path
Check documentPath from metadata.json matches URL
For index files, use /index not /
If using --html-folder, include folder in URL

Output

This skill provides:

✅ Verified preview that matches original page structure
✅ Visual confirmation of correct rendering
✅ Validated block decoration
✅ Confirmed metadata presence

Import complete when all verification points pass.