wechat-article-formatter

WeChat公式アカウント記事フォーマットツール（Claude 実行ガイド）

目的：Markdown 記事を WeChat 公式アカウントに適した美しい HTML に変換し、ワンクリックで公開できるようにします。

主な価値：効率が15倍向上します（30分 → 2分）。統一感のあるプロフェッショナルなフォーマットを実現します。

---

⚡ 実行フロー（厳守）

ステップ1：入力ファイルを取得する

状況の判断：

状況	対応方法
ユーザーがファイルパスを指定した	そのパスを直接使用します
ユーザーが Markdown の内容を貼り付けた	まず Write ツールを使って .md ファイルに保存します
直前に wechat-tech-writer を使用した	最新の生成済み .md ファイルを自動的に検索します（連携ガイドを参照）
ユーザーが「記事をきれいにして」とだけ言った	ユーザーにファイルパスまたは貼り付ける内容を尋ねます

最新の記事を自動検出する（wechat-tech-writer との連携）：

# 查找当前目录最新的 .md 文件
latest_md=$(ls -t *.md 2>/dev/null | head -1)
if [ -n "$latest_md" ]; then
    echo "检测到最新文章：$latest_md"
fi

---

ステップ2：examples ディレクトリを確認する（美しいテンプレートを優先）

⚠️ 重要なルール：

1. 基本 CSS テーマよりも、examples にある美しいテンプレートを優先して使用します
2. H1 タイトルはレンダリングしないでください：WeChat 公式アカウントには独立したタイトル入力欄があるため、HTML に記事タイトルを含めないでください

確認コマンド：

cd /root/.claude/skills/wechat-article-formatter
ls -lh examples/

利用可能なテンプレート：

テンプレートファイル	スタイルの特徴	適用シーン
VSCode 蓝色科技风.html	導入ブロック、番号付き章タイトル、機能カード、操作手順	技術記事、製品紹介、チュートリアル
红蓝对决·深度测评模板.html	グラデーションタイトル、比較カード、データ表、引用の名言	比較レビュー、詳細分析
极客暗黑风.html	ダーク背景、ギークスタイル	技術の詳細記事、ハッカースタイル
现代极简风.html	シンプルですっきりしたデザイン	汎用記事、シンプルなスタイル

選択ロジック：

文章分析：
├─ 技术/产品介绍类 → VSCode 蓝色科技风 ✅
├─ 对比/评测类 → 红蓝对决模板 ✅
├─ 深度技术文章 → 极客暗黑风
└─ 通用内容 → 现代极简风

実行方法：

1. 選択したテンプレートファイルを読み込みます
2. テンプレートのコンポーネント構成（導入ブロック、カード、手順リストなど）を参考にします
3. Markdown の H1 タイトル（# タイトル）を省き、最初の段落または H2（## 章）から始めます
4. Markdown の内容をテンプレートのコンポーネントに手動で割り当てます
5. HTML の先頭にコメントを追加します：``
6. ⚠️ 重要な手順：コードブロックの形式を変換します
   • scripts/convert-code-blocks.py を使用して、生成した HTML 内のコードブロックを WeChat 互換形式に変換します
   • コマンド：python scripts/convert-code-blocks.py input.html output.html
   • <pre><code> を <div> + <br> +   形式に変換します（WeChat が唯一サポートするコードブロック形式です）
7. 美しい HTML ファイルを生成します

適切なテンプレートがない場合に限り、ステップ3の基本 CSS テーマを使用して変換します。

---

ステップ3：基本テーマを選択する（examples に適切なテンプレートがない場合のみ使用）

判断フロー（自動選択またはユーザーへの確認）：

文章内容分析：
├─ 包含代码块（```）或技术词汇多 → tech（科技风）
├─ 包含数据表格、商业术语 → business（商务风）
└─ 纯文字、通用内容 → minimal（简约风）

テーマ比較表：

テーマ	適用シーン	配色	使用するタイミング
tech	技術記事、AI、プログラミングチュートリアル	青紫のグラデーション	デフォルトの選択肢。wechat-tech-writer で作成した記事
minimal	日々の随筆、読書メモ	白黒グレー	コードを含まないテキストのみの内容
business	ビジネスレポート、データ分析	濃紺と金	表、データ、グラフを含む場合

ユーザーへの確認方法：

检测到文章包含代码块，建议使用 tech 主题。
需要切换主题吗？（tech / minimal / business）

---

ステップ4：変換を実行する

標準変換コマンド：

cd /root/.claude/skills/wechat-article-formatter

python scripts/markdown_to_html.py \
  --input "{文件路径}" \
  --theme {主题名} \
  --output "{输出路径}" \
  --preview

パラメーターの説明：

• --input：Markdown ファイルのパス（必須）
• --theme：tech / minimal / business（デフォルトは tech）
• --output：HTML の出力パス（任意。デフォルトは同名の .html）
• --preview：変換後、自動的にブラウザーでプレビューを開きます（推奨）

例：

# 最常用：使用 tech 主题转换并预览
python scripts/markdown_to_html.py \
  --input "Claude_Sonnet_4介绍.md" \
  --theme tech \
  --preview

---

ステップ5：品質を確認する

変換後、必ず次の項目を確認します：

Read ツールで生成された HTML ファイルの先頭50行を読み込み、確認します。

確認項目	確認方法	よくある問題
タイトルのスタイル	<h1>, <h2> タグの style 属性を確認します	スタイルが失われている → 再変換します
コードのハイライト	<pre><code> に言語指定があるか確認します	ハイライトがない → Markdown で言語が指定されているか確認します
画像パス	<img src=""> のパスを確認します	ローカルパス → WeChat にアップロードする必要があることをユーザーに伝えます
表の形式	<table> にインラインスタイルがあるか確認します	形式が乱れている → 表の列数を減らします

簡易確認コマンド：

# 查看 HTML 文件前 50 行
head -50 output.html

---

ステップ6：プレビューとフィードバック

ユーザーへの確認：

✅ 转换成功！已生成：{输出文件路径}

预览效果：
- 已在浏览器打开预览
- 或访问：file://{绝对路径}

请检查效果，满意吗？
- 满意 → 进入步骤6（发布指导）
- 需要调整 → 可以切换主题或手动修复

ユーザーが満足しない場合：

問題	解決策
「色が好みではない」	テーマを切り替えて再生成します（tech/minimal/business）
「コードブロックがハイライトされない」	Markdown のコードブロックで言語が指定されているか確認します（```python）
「画像が正しく表示されない」	ローカル画像は WeChat エディターにアップロードする必要があると伝えます
「表の幅が広すぎる」	表を簡略化する（4列以下）か、横スクロールを許容するよう提案します

---

ステップ7：公開方法を案内する

ユーザーに提示する完全な案内：

📋 发布到微信公众号步骤：

1. 打开微信公众号编辑器
2. ✅ 在标题栏填写文章标题：{从 Markdown 提取的标题}
3. 打开生成的 HTML 文件：{文件路径}
4. 在浏览器中按 Ctrl+A（全选）→ Ctrl+C（复制）
5. 粘贴到编辑器正文区（Ctrl+V）
6. 处理图片：
   - 删除无法显示的本地图片引用
   - 重新上传图片到微信编辑器
6. 最后检查：标题层级、段落间距、代码块
7. 使用微信编辑器的"预览"功能在手机查看
8. 确认无误后发布

⚠️ 注意事项：
- 样式已内联，可直接粘贴
- 本地图片需重新上传
- 粘贴后微信编辑器可能微调部分样式（正常）

详细发布指南：references/publishing-guide.md

---

🔄 wechat-tech-writer との連携

状況：wechat-tech-writer で記事を生成した直後

識別の目安：

• ユーザーが直前に「XXX についての記事を書いて」と言った
• 現在のディレクトリに新しく生成された .md ファイルがある

自動化フロー：

# 1. 查找最新文章
latest_article=$(ls -t *.md 2>/dev/null | head -1)

# 2. 确认是否是目标文章
echo "检测到最新文章：$latest_article"
echo "是否要转换这篇文章？(y/n)"

# 3. 自动选择 tech 主题（wechat-tech-writer 主要生成技术文章）
python scripts/markdown_to_html.py \
  --input "$latest_article" \
  --theme tech \
  --preview

スムーズに引き継ぐときの文言：

检测到你刚用 wechat-tech-writer 生成了文章：{文件名}
现在为你美化格式，使用 tech 主题...

---

❌ エラー対応表

エラーメッセージ	原因	Claude が行うこと
FileNotFoundError: Input file not found	ファイルパスが正しくない	正しいファイルパスをユーザーに尋ねます
Unknown theme: xxx	テーマ名が正しくない	使用可能なテーマを案内します：tech/minimal/business
Theme CSS file not found	テーマファイルが見つからない	デフォルトの tech テーマを使って再試行します
変換は成功したが、コードがハイライトされない	Markdown で言語が指定されていない	コードブロックを修正するようユーザーに伝えます（```python）
画像が表示できない	ローカルパスまたは無効な外部リンク	WeChat エディターで再アップロードするようユーザーに伝えます
表の形式が乱れている	表の幅が広すぎる	表を簡略化するか、画像に変換するよう提案します

---

📚 クイックリファレンス

最もよく使う3つのコマンド

1. 標準変換（最もよく使う）：

python scripts/markdown_to_html.py --input article.md --theme tech --preview

2. 一括変換（複数の記事）：

python scripts/batch_convert.py --input articles/ --theme minimal --workers 8

3. リアルタイムプレビュー（書きながら確認）：

python scripts/preview_generator.py --input article.md --theme business

よくある質問への簡単な回答

Q: WeChat に貼り付けるとスタイルが失われるのはなぜですか？ A: 「貼り付け」を使用し、「貼り付けてスタイルを合わせる」は使わないでください。または、エディターを空にしてから再度貼り付けてください。

Q: コードブロックがハイライトされないのはなぜですか？ A: Markdown で言語を指定してください：```python（``` だけではありません）。

Q: テーマの色をカスタマイズするにはどうすればよいですか？ A: templates/tech-theme.css をコピー → 色の変数を変更 → --theme my-theme を使用します。

---

📖 ドキュメント一覧

このドキュメント（SKILL.md）：Claude 実行ガイド（簡易版）

その他のドキュメント（ユーザーマニュアル）：

• QUICKSTART.md - 3分で始めるクイックスタート（新規）
• README.md - 機能とパラメーターの詳細
• EXAMPLES.md - 詳しい使用例3つ
• references/publishing-guide.md - 公開手順の詳細
• references/theme-customization.md - テーマのカスタマイズガイド
• references/wechat-constraints.md - WeChat プラットフォームの制限事項

ドキュメントの使い方：

• Claude は主に SKILL.md（このドキュメント）と QUICKSTART.md を参照します
• 詳しい情報が必要な場合は、references/ ディレクトリを参照します
• ユーザーは主に README.md と EXAMPLES.md を参照します

✅ 执行检查清单（每次执行完毕后确认）

• 已获取输入文件（路径或内容）
• 已选择合适主题（自动判断或询问用户）
• 已执行转换命令
• 已检查生成的 HTML 文件（标题、代码、图片）
• 已询问用户预览效果是否满意
• 已提供完整的发布指导
• 已处理可能出现的错误

---

记住：这个 skill 的核心是自动化 + 专业化，让用户 2 分钟完成原本 30 分钟的工作！