jpskill.com
📦 その他 コミュニティ

generate-import-html

AEM Edge Delivery Services向けに、コンテンツ分析に基づいた構造的なHTMLを生成し、セクション構造の作成、ブロックテーブルの適用、メタデータの処理、画像フォルダの管理などを効率的に行うSkill。

📜 元の英語説明(参考)

Generate structured HTML from authoring analysis for AEM Edge Delivery Services. Creates section structure, applies block tables, handles metadata, and manages images folder.

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

一言でいうと

AEM Edge Delivery Services向けに、コンテンツ分析に基づいた構造的なHTMLを生成し、セクション構造の作成、ブロックテーブルの適用、メタデータの処理、画像フォルダの管理などを効率的に行うSkill。

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

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

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

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o generate-import-html.zip https://jpskill.com/download/9683.zip && unzip -o generate-import-html.zip && rm generate-import-html.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9683.zip -OutFile "$d\generate-import-html.zip"; Expand-Archive "$d\generate-import-html.zip" -DestinationPath $d -Force; ri "$d\generate-import-html.zip"

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して generate-import-html.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → generate-import-html フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

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

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

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

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

Import HTML の生成

オーサリング分析から、ブロック構造を持つプレーンな HTML ファイルを作成します。

この Skill を使用するタイミング

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

  • 完全なオーサリング分析がある場合 (すべてのシーケンスに決定がある)
  • セクションのスタイリング検証が完了している場合 (オーサリング分析から)
  • プレビュー用の HTML ファイルを生成する準備ができている場合

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

前提条件

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

  • ✅ ブロック選択を含むオーサリング分析 (オーサリング分析から)
  • ✅ セクションのスタイリングに関する決定 (オーサリング分析ステップ 3e から)
  • ✅ パスとメタデータを含む metadata.json (scrape-webpage から)
  • ✅ コンテンツを含む cleaned.html (scrape-webpage から)
  • ✅ フェッチされたブロック構造 (オーサリング分析ステップ 3d から)

関連 Skill

  • page-import - この Skill を呼び出すオーケストレーター
  • authoring-analysis - オーサリングの決定とスタイリングの検証を提供
  • scrape-webpage - メタデータ、パス、クリーンな HTML、画像を提供
  • preview-import - この Skill の HTML 出力を使用

⚠️ 重要な要件: コンテンツの完全なインポート

ページからすべてのコンテンツをインポートする必要があります。部分的なインポートは許容されません。

  • ❌ 長さの問題でセクションを切り詰めたり、スキップしたりしないでください
  • ❌ コンテンツを要約したり、省略したりしないでください
  • ❌ "<!-- rest of content -->" のようなプレースホルダーを使用しないでください
  • ❌ ページが「長すぎる」という理由でコンテンツを省略しないでください
  • ✅ 常にオーサリング分析からすべてのセクションをインポートしてください
  • ✅ 常に cleaned.html からすべてのテキスト、画像、構造を含めてください
  • ✅ 長さの問題が発生した場合は、とにかく完全な HTML を生成してください

検証要件: HTML 内のセクション数が identify-page-structure からのセクション数と一致することを確認する必要があります。一致しない場合は、エラーが発生しています。

HTML 生成ワークフロー

構造要件

重要な変更: AEM CLI は、HTML コンテンツを headful 構造 (head, header, footer) で自動的にラップするようになりました。セクションコンテンツのみを生成する必要があります。

生成するもの:

  • ✅ コンテンツを含むセクションの div: <div>...</div> (セクションごとに 1 つ)
  • ✅ ブロック: ネストされた div を持つ <div class="block-name">
  • ✅ デフォルトのコンテンツ (見出し、段落、リンク、画像)
  • ✅ オーサリング分析で検証されたセクションメタデータブロック

生成しないもの:

  • ❌ <html>、<head>、<body> タグ
  • ❌ <header> または <footer> 要素
  • ❌ <main> ラッパー要素
  • ❌ head コンテンツ (meta タグ、title など - これはプロジェクトの head.html から取得されます)

構造形式:

<div>
  <!-- Section 1 content -->
</div>
<div>
  <!-- Section 2 content with section-metadata if needed -->
  <div class="section-metadata">
    <div>
      <div>Style</div>
      <div>grey</div>
    </div>
  </div>
  <!-- Section 2 blocks/content -->
</div>
<div>
  <!-- Section 3 content -->
</div>

詳細なブロック構造パターン: ../page-import/resources/html-structure.md を参照してください。

セクションメタデータの適用

オーサリング分析ステップ 3e から検証済みの決定を適用します。

section-metadata あり (セクションがコンテナのスタイリングを提供):

<div>
  <div class="section-metadata">
    <div>
      <div>Style</div>
      <div>dark</div>
    </div>
  </div>
  <div class="tabs">
    <!-- Tabs block content -->
  </div>
</div>

section-metadata なし (背景はブロック固有):

<div>
  <div class="hero">
    <!-- Hero block content with its own dark background -->
  </div>
</div>

重要:

  • 表示されている本文コンテンツセクションのみを移行します (header、navigation、footer はスキップ - 自動生成)
  • identify-page-structure から一貫したスタイル名を使用します
  • オーサリング分析ステップ 3e から検証済みの決定を適用します - 背景がブロック固有の単一ブロックセクションでは section-metadata をスキップします
  • スタイリングが必要な各セクションの先頭に section-metadata div を配置します
  • メタデータ div はプラットフォームによって処理され、削除されます
  • 各セクションは個別のトップレベル <div> 要素です

ページメタデータブロック

ユーザーが明示的にメタデータをスキップするように要求しない限り、scrape-webpage から抽出されたメタデータを使用してメタデータブロックを生成します。

プロセス:

1. metadata.json から抽出されたメタデータを確認します

2. 各プロパティを標準形式にマッピングします:

Title:

  • ソースの title (または og:title) をページの最初の H1 と比較します
  • 最初の H1 と一致する場合 → 省略 (プラットフォームはデフォルトで H1 を使用)
  • 異なる場合 → title プロパティとして含める

Description:

  • ソースの description (または og:description) を最初の段落と比較します
  • 最初の段落と一致する場合 → 省略を検討 (プラットフォームはデフォルトで最初の段落を使用)
  • 異なる場合、またはより記述的な場合 → description プロパティとして含める
  • チェック: 150-160 文字が理想的

Image:

  • ソースの og:image を確認します
  • 最初のコンテンツ画像と一致する場合 → 省略を検討 (プラットフォームはデフォルトで最初の画像を使用)
  • カスタムのソーシャル画像の場合 → image プロパティとして含める
  • 絶対 URL または正しい相対パスであることを確認します
  • チェック: 1200x630 ピクセルが推奨

Canonical:

  • 同じページ URL を指している場合 → 省略 (プラットフォームが自動生成)
  • 異なるページを指している場合 → canonical プロパティとして含める

Tags:

  • article:tag または keywords → カンマ区切りの tags プロパティにマッピング

スキップするプロパティ (プラットフォームが自動的に入力):

  • og:url、og:title、og:description、twitter:title、twitter:description、twitter:image
  • viewport、charset、X-UA-Compatible (head.html に属する)

3. メタデータブロックの HTML を生成します:

<div>
  <div class="metadata">
    <div>
      <div>title</div>
      <div>[Your mapped title]</div>
    </div>
    <div>
      <div>description</div>
      <div>[Your mapped description]</div>
    </div>
    <!-- Only include image if custom -->
    <!-- Only include canonical if differs from page URL -->
    <!-- Only include tags if present -->
  </div>
</div>

メタデータブロックを、HTML ファイルの最後のセクション div として追加します。

詳細なガイダンス: resources/metadata-extraction.md および resources/metadata-mapping.md を参照してください。

画像 Fo

(原文がここで切り詰められています)

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

Generate Import HTML

Create plain HTML file with block structure from authoring analysis.

When to Use This Skill

Use this skill when:

  • You have complete authoring analysis (all sequences have decisions)
  • You have section styling validation (from authoring-analysis)
  • Ready to generate the HTML file for preview

Invoked by: page-import skill (Step 4)

Prerequisites

From previous skills, you need:

  • ✅ Authoring analysis with block selections (from authoring-analysis)
  • ✅ Section styling decisions (from authoring-analysis Step 3e)
  • ✅ metadata.json with paths and metadata (from scrape-webpage)
  • ✅ cleaned.html with content (from scrape-webpage)
  • ✅ Block structures fetched (from authoring-analysis Step 3d)

Related Skills

  • page-import - Orchestrator that invokes this skill
  • authoring-analysis - Provides authoring decisions and styling validation
  • scrape-webpage - Provides metadata, paths, cleaned HTML, images
  • preview-import - Uses this skill's HTML output

⚠️ CRITICAL REQUIREMENT: Complete Content Import

YOU MUST IMPORT ALL CONTENT FROM THE PAGE. PARTIAL IMPORT IS UNACCEPTABLE.

  • ❌ NEVER truncate or skip sections due to length concerns
  • ❌ NEVER summarize or abbreviate content
  • ❌ NEVER use placeholders like "<!-- rest of content -->"
  • ❌ NEVER omit content because the page is "too long"
  • ✅ ALWAYS import every section from authoring analysis
  • ✅ ALWAYS include all text, images, and structure from cleaned.html
  • ✅ If you encounter length issues, generate the FULL HTML anyway

Validation requirement: You MUST verify that the number of sections in your HTML matches the number of sections from identify-page-structure. If they don't match, you have made an error.

HTML Generation Workflow

Structure Requirements

IMPORTANT CHANGE: The AEM CLI now automatically wraps HTML content with headful structure (head, header, footer). You MUST generate ONLY the section content.

What to generate:

  • ✅ Section divs with content: <div>...</div> (one per section)
  • ✅ Blocks as <div class="block-name"> with nested divs
  • ✅ Default content (headings, paragraphs, links, images)
  • ✅ Section metadata blocks where validated in authoring-analysis

What NOT to generate:

  • ❌ NO <html>, <head>, or <body> tags
  • ❌ NO <header> or <footer> elements
  • ❌ NO <main> wrapper element
  • ❌ NO head content (meta tags, title, etc. - this comes from project's head.html)

Structure format:

<div>
  <!-- Section 1 content -->
</div>
<div>
  <!-- Section 2 content with section-metadata if needed -->
  <div class="section-metadata">
    <div>
      <div>Style</div>
      <div>grey</div>
    </div>
  </div>
  <!-- Section 2 blocks/content -->
</div>
<div>
  <!-- Section 3 content -->
</div>

For detailed block structure patterns: See ../page-import/resources/html-structure.md

Section Metadata Application

Apply validated decisions from authoring-analysis Step 3e:

WITH section-metadata (section provides container styling):

<div>
  <div class="section-metadata">
    <div>
      <div>Style</div>
      <div>dark</div>
    </div>
  </div>
  <div class="tabs">
    <!-- Tabs block content -->
  </div>
</div>

WITHOUT section-metadata (background is block-specific):

<div>
  <div class="hero">
    <!-- Hero block content with its own dark background -->
  </div>
</div>

Important:

  • Only migrate visible body content sections (skip header, navigation, footer - auto-generated)
  • Use consistent style names from identify-page-structure
  • Apply validated decisions from authoring-analysis Step 3e - Skip section-metadata for single-block sections where background is block-specific
  • Place section-metadata div at the start of each section that needs styling
  • The metadata div will be processed and removed by the platform
  • Each section is a separate top-level <div> element

Page Metadata Block

Unless user explicitly requested to skip metadata, use the metadata extracted from scrape-webpage to generate a metadata block.

Process:

1. Review extracted metadata from metadata.json

2. Map each property to standard format:

Title:

  • Compare source title (or og:title) with first H1 on page
  • If matches first H1 → Omit (platform defaults to H1)
  • If differs → Include as title property

Description:

  • Compare source description (or og:description) with first paragraph
  • If matches first paragraph → Consider omitting (platform defaults to first paragraph)
  • If differs OR more descriptive → Include as description property
  • Check: 150-160 characters ideal

Image:

  • Check source og:image
  • If matches first content image → Consider omitting (platform defaults to first image)
  • If custom social image → Include as image property
  • Ensure absolute URL or correct relative path
  • Check: 1200x630 pixels recommended

Canonical:

  • If points to same page URL → Omit (platform auto-generates)
  • If points to different page → Include as canonical property

Tags:

  • Map article:tag or keywords → comma-separated tags property

Properties to SKIP (platform auto-populates):

  • og:url, og:title, og:description, twitter:title, twitter:description, twitter:image
  • viewport, charset, X-UA-Compatible (belong in head.html)

3. Generate metadata block HTML:

<div>
  <div class="metadata">
    <div>
      <div>title</div>
      <div>[Your mapped title]</div>
    </div>
    <div>
      <div>description</div>
      <div>[Your mapped description]</div>
    </div>
    <!-- Only include image if custom -->
    <!-- Only include canonical if differs from page URL -->
    <!-- Only include tags if present -->
  </div>
</div>

Append metadata block as the last section div at the end of the HTML file.

Detailed guidance: See resources/metadata-extraction.md and resources/metadata-mapping.md

Images Folder Management (CRITICAL)

The images are currently in ./import-work/images/ and the HTML references them as ./images/.... You MUST handle the images folder correctly:

Step 1: Determine the correct images folder location

Based on paths.htmlFilePath from metadata.json:

  • HTML file: us/en/about.plain.html → Images should be at: us/en/images/
  • HTML file: products/widget.plain.html → Images should be at: products/images/
  • HTML file: index.plain.html → Images should be at: images/

Rule: Images folder goes in the same directory as the HTML file.

Step 2: Copy the images folder

# Example: If HTML is at us/en/about.plain.html
mkdir -p us/en/images
cp -r ./import-work/images/* us/en/images/

Step 3: Verify image paths in HTML are correct

The HTML should already reference images as ./images/... which is correct for files in the same directory. No path changes needed in the HTML.

Example:

HTML location: us/en/about.plain.html
Images location: us/en/images/
Image reference in HTML: <img src="./images/abc123.jpg">
Result: ✅ Correct - browser resolves to us/en/images/abc123.jpg

Save HTML File

Save to: Use paths.htmlFilePath from metadata.json (e.g., us/en/about.plain.html)

Read the metadata.json file from scrape-webpage to get the correct file path.

Validation Checklist (MANDATORY)

Before proceeding to preview-import skill, verify:

  • ✅ Section count: HTML has the same number of top-level <div> sections as identified in identify-page-structure
  • ✅ All sequences: Every content sequence from authoring-analysis appears in the HTML
  • ✅ No truncation: No "..." or "<!-- more content -->" or similar placeholders
  • ✅ Complete text: All headings, paragraphs, and text from cleaned.html are present
  • ✅ All images: Every image reference from the scraped page is included
  • ✅ HTML file saved: HTML file written to disk at the correct path
  • ✅ Images folder copied: Images folder exists in the same directory as the HTML file
  • ✅ Images accessible: Verify that at least one image file exists in the copied images folder

If any validation check fails, STOP and fix before proceeding.

Output

This skill provides:

  • ✅ HTML file at correct path (e.g., us/en/about.plain.html)
  • ✅ Images folder in same directory (e.g., us/en/images/)
  • ✅ Complete content import (all sections)
  • ✅ Proper block structure
  • ✅ Section metadata applied per validation
  • ✅ Page metadata block included

Next step: Pass HTML file path to preview-import skill