wechat-theme-extractor

WeChat テーマ抽出ツール

概要

WeChat 公式アカウントの記事からレイアウトとスタイルの特徴を抽出し、markdown-wechat-converter で再利用できるテーマを生成します。このワークフローでは、記事からタイポグラフィ、色、余白、ブロックスタイルを導き出し、生成したテーマを markdown-to-wechat.html に書き込み、結果をプレビューできます。

使用するタイミング

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

• ユーザーから mp.weixin.qq.com の記事 URL が提供された場合
• WeChat 記事からタイポグラフィ、色、余白、ブロックスタイルを抽出したい場合
• markdown-wechat-converter 用の新しいテーマを生成したい場合
• テーマを markdown-to-wechat.html に書き込み、プレビューしたい場合

使用しない場合

次のような場合は、このスキルを使用しないでください。

• URL が WeChat 公式アカウントの記事ではない場合
• ユーザーがテーマ分析をせず、記事本文の抽出だけを希望している場合
• 対象プロジェクトに markdown-wechat-converter または markdown-to-wechat.html が含まれていない場合

手順

1. scripts/extract.py を実行して記事の HTML を取得し、タイトルと js_content を抽出します。
2. .extracted_content.html を読み込み、HTML から直接スタイルの特徴を分析します。
3. markdown-wechat-converter と互換性のあるテーマオブジェクトを生成します。
4. 現在のワークスペースで markdown-to-wechat.html を探し、既存のテーマ定義を壊さないように新しいテーマを挿入します。
5. ファイルを再度開き、テーマの項目が実際に書き込まれていることを確認します。
6. 確認に成功したら、プレビューのためにブラウザーで markdown-to-wechat.html を開きます。

ワークフロー

User provides URL
  -> run extractor script
  -> produce .extracted_content.html
  -> analyze styles
  -> generate theme config
  -> write into markdown-to-wechat.html
  -> verify write result
  -> open preview

スクリプトの実行

python3 scripts/extract.py "https://mp.weixin.qq.com/s/xxxxx"

スクリプトの役割

Python スクリプトが行うのは、次の処理のみです。

• 記事の HTML を取得する
• 記事のタイトルを抽出する
• js_content の本文フラグメントを抽出する
• 結果を .extracted_content.html に保存する

AI が行う処理は次のとおりです。

• スタイルの分析
• テーマの生成
• 設定の挿入
• 書き込み後の確認
• プレビューを開く

markdown-to-wechat.html への挿入ルール

markdown-to-wechat.html を更新する際は、次のルールに従ってください。

1. まず、実際のテーマ定義を見つけます。

   • 編集前に、テーマに関連するオブジェクト、配列、マップ、または const 代入を検索します。
   • ファイル内に存在することを確認せず、変数名が固定されていると想定しないでください。

2. 既存の構造を維持します。

   • ファイルで現在使用されているオブジェクトの書式、引用符のスタイル、インデント、末尾のカンマの規則に合わせます。
   • 関係のないセクションの書式は変更しないでください。

3. やみくもに上書きせず、追加します。

   • 新しいテーマ名が存在しない場合は、既存のテーマコレクションに新しい項目を追加します。
   • 同じテーマ名がすでに存在する場合は、重複させず、その項目だけを更新します。

4. 変更範囲を限定します。

   • テーマ定義ブロックと、テーマを選択可能にするために必要な最小限の登録処理だけを変更します。
   • ファイルの構造上、最小限の接続変更が必要な場合を除き、レンダラーのロジック、イベントハンドラー、無関係な UI コードは変更しないでください。

5. 書き込み後に確認します。

   • 編集したセクションを読み直し、テーマキー、タイトル、主要なスタイルプロパティが存在することを確認します。
   • テーマブロックを安全に特定できない場合は作業を中止し、対象ファイルの構造を手動で確認する必要があることを報告します。

テーマの例

対象ファイルに既存の構造と一致するテーマオブジェクトを生成します。次の例を最小限の参考形として使用してください。

{
  id: "wechat-clean-blue",
  name: "WeChat Clean Blue",
  styles: {
    body: {
      fontFamily: "\"PingFang SC\", \"Helvetica Neue\", sans-serif",
      fontSize: "16px",
      color: "#2b2b2b",
      lineHeight: "1.75",
      backgroundColor: "#ffffff"
    },
    h1: {
      fontSize: "24px",
      fontWeight: "700",
      textAlign: "center",
      color: "#1f3a5f"
    },
    h2: {
      fontSize: "20px",
      fontWeight: "700",
      color: "#1f3a5f",
      borderBottom: "2px solid #9ec1ff"
    },
    blockquote: {
      color: "#4a5568",
      backgroundColor: "#f7fbff",
      borderLeft: "4px solid #7fb3ff",
      padding: "12px 16px"
    }
  }
}

書き込む際は、次の点に従ってください。

• markdown-to-wechat.html で実際に使用されているフィールド名に合わせます。
• 対象ファイルで配列、マップ、または入れ子の登録形式が使われている場合は、この形式に変換します。
• 最低限、テーマキー、表示名、主要なタイポグラフィスタイルを含めます。

出力ファイル

• scripts/.extracted_content.html：先頭にタイトルとソース URL のコメントが付いた、抽出済みの記事本文 HTML

検証チェックリスト

• 記事の HTML を正常に取得した
• .extracted_content.html が存在し、空ではない
• タイトルと js_content を抽出した
• markdown-to-wechat.html に新しいテーマ項目が存在する
• プレビューページが正常に開く