wechat-article-formatter

Name: wechat-article-formatter
Author: iamzifei

github.com/iamzifeiマーケティング・グロース76230 回インストール11 週間前に更新

wechat-article-formatter について

wechat-article-formatterは、Markdown記事をスタイル付きHTMLに整形し、WeChat公式アカウントの下書きとして公開します。画像をWeChatにアップロードし、公式の下書きAPIを使ってインラインスタイルを保持します。

主な機能

01bm.mdのスタイルでMarkdownを描画
02記事画像をWeChat CDNにアップロード
03画像パスをCDN URLに置換
04公式API経由で下書きを公開
05ダイジェスト抽出と著者情報の特定

活用シーン

01Markdown記事をWeChat向けに整形
02記事画像とカバー素材を準備
03整形済み記事を公式アカウントの下書きに公開

インストール

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

$npx skills add https://github.com/iamzifei/wechat-article-formatter-skill --skill wechat-article-formatter

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

同梱ファイル

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

README.md

README.zh-CN.md

.gitignore

styles/

custom.css

詳細

WeChat 記事フォーマッター＆公開ツール

bm.md のスタイルで Markdown 記事を整形し、公式 API を介して WeChat 公式アカウントの下書きに直接公開します。

概要

Markdown ファイルを読み込みます（通常は記事ディレクトリ内の wechat.md）
media/uploadimg API を介してローカル画像を WeChat CDN にアップロードします
Markdown 内のローカル画像パスを WeChat CDN の URL に置き換えます
カスタム CSS を使用し、bm.md API を介して Markdown をスタイル付き HTML にレンダリングします
公式 draft/add API を介して WeChat の下書きに公開します

重要：サードパーティの公開 API（例：微绿 wechat-publish）は使用しないでください。インライン CSS スタイルが削除されます。必ず WeChat の公式 draft/add API を直接使用してください。

認証情報

~/.env から読み込みます：

変数	用途
`WECHAT_APP_ID`	WeChat 公式アカウントの AppID
`WECHAT_APP_SECRET`	WeChat 公式アカウントの AppSecret

見つからない場合は、ユーザーに入力を求め、~/.env に保存してください。

ワークフロー

ステップ 1：入力を特定する

ユーザーが Markdown ファイルのパスを指定します（例：記事ディレクトリ内の wechat.md）。

記事ディレクトリを特定し、以下を見つけます：

promotion.md → ダイジェスト／要約を抽出
_attachments/ → ローカル画像
会話コンテキストのブランド設定 → 著者名

ステップ 2：WeChat アクセストークンを取得する

params = urlencode({
    'grant_type': 'client_credential',
    'appid': WECHAT_APP_ID,
    'secret': WECHAT_APP_SECRET
})
# GET https://api.weixin.qq.com/cgi-bin/token?{params}

エラー 40164（IP が許可リストに登録されていない）が発生した場合は、mp.weixin.qq.com → 设置与开发 → 基本配置 → IP白名单で IP を追加するようユーザーに案内してください。

ステップ 3：画像を WeChat CDN にアップロードする

重要：すべての画像を同じセッション内でアップロードしてください。以前のセッションで取得した WeChat CDN の URL は期限切れになる場合があります。

本文内の画像には media/uploadimg API を使用します：

# POST https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token={token}
# Content-Type: multipart/form-data
# Body: media=@image_file
# Response: {"url": "http://mmbiz.qpic.cn/..."}

カバー／サムネイル画像には material/add_material API を使用します：

# POST https://api.weixin.qq.com/cgi-bin/material/add_material?access_token={token}&type=image
# Content-Type: multipart/form-data
# Body: media=@cover_image
# Response: {"media_id": "...", "url": "..."}

リモート画像（例：https://i.ibb.co/...）は、先にダウンロードしてから WeChat CDN にアップロードしてください。

アップロード後、レンダリング前に Markdown 内のローカル／リモート画像パスをすべて WeChat CDN の URL に置き換えてください。

ステップ 4：bm.md でレンダリングする

{{SKILL_DIR}}/styles/custom.css からカスタム CSS を読み込みます。

重要：JSON ペイロードを一時ファイルに書き込み、シェルのエスケープ問題を避けるため curl -d @file を使用してください。

payload = json.dumps({
    "markdown": md_content,
    "markdownStyle": "green-simple",
    "codeTheme": "kimbie-light",
    "customCss": css_content,
    "enableFootnoteLinks": True,
    "openLinksInNewWindow": True,
    "platform": "wechat"
}, ensure_ascii=False)

# Write to /tmp/bm-payload.json, then:
# curl -s -X POST https://bm.md/api/markdown/render \
#   -H "Content-Type: application/json" \
#   -d @/tmp/bm-payload.json

ensure_ascii=False は必須です。これがないと、中国語の文字が \uXXXX エスケープシーケンスになります。

ステップ 5：WeChat の下書きに公開する

draft_payload = json.dumps({
    "articles": [{
        "title": title,
        "author": author,                    # e.g. "在悉尼和稀泥"
        "thumb_media_id": thumb_media_id,     # from Step 3 material upload
        "content": html,                      # from Step 4 bm.md render
        "digest": digest,                     # from promotion.md, max ~60 Chinese chars
        "need_open_comment": 1,               # enable comments
        "only_fans_can_comment": 0,           # allow all users to comment
        "original_article_type": 1,           # declare as original content
        "reward_wording": "喜欢这篇文章，请我喝杯咖啡",  # enable tipping
        "creation_source_type": 1             # 个人观点，仅供参考
    }]
}, ensure_ascii=False).encode('utf-8')

# POST https://api.weixin.qq.com/cgi-bin/draft/add?access_token={token}

公開設定のデフォルト値：

フィールド	値	説明
`need_open_comment`	`1`	コメントを有効にする
`only_fans_can_comment`	`0`	すべてのユーザーがコメントできる
`original_article_type`	`1`	オリジナル記事として申告する
`reward_wording`	`"喜欢这篇文章，请我喝杯咖啡"`	投げ銭を有効にする
`creation_source_type`	`1`	個人の見解であり、参考情報です

promotion.md からダイジェストを抽出する方法：

## 文章摘要 セクションを探し、テキストを抽出して約 60 文字に切り詰めます（WeChat の上限は 120 バイトです）。

著者の決定方法（最初に一致したものを使用）：

ユーザーが明示的に指定した名前
ブランド設定の author フィールド
ブランド設定の 品牌名称 フィールド

ステップ 6：結果を報告する

WeChat Publishing Complete!

Title: {title}
Author: {author}
Digest: {digest}
Original: ✓ declared
Tipping: ✓ enabled
Comments: ✓ open to all
Images: {N} uploaded to WeChat CDN
media_id: {media_id}

→ Preview at: https://mp.weixin.qq.com (内容管理 → 草稿箱)

WeChat 用 Markdown コンテンツの順序

WeChat 用の Markdown を作成するときは、要素を次の順序で配置します：

1. 关注引导文字 (e.g. 👆 「关注」加「星标」...)
2. 封面图 (cover image)
3. --- 分隔线
4. 正文内容 (article body with inline images)
5. --- 分隔线
6. 作者介绍 (about author section)
7. --- 分隔线
8. 推广区块 (promo blockquote with image)
9. --- 分隔线
10. 互动引导 (engagement CTA)

H1 タイトルは Markdown から削除してください。WeChat は title フィールドのタイトルを独自に表示します。

よくある問題

問題	解決策
中国語が `\uXXXX` と表示される	すべての `json.dumps()` 呼び出しで `ensure_ascii=False` を使用する
画像が表示されない	同じセッション内でアップロードし、古い CDN URL を再利用しない
スタイルが削除される（プレーンテキストになる）	サードパーティ API ではなく、WeChat 公式の `draft/add` API を使用する
`40164` IP 許可リストエラー	mp.weixin.qq.com → 基本配置 → IP白名单で現在の IP を追加する
`45004` ダイジェストが長すぎる	ダイジェストを 60 文字以内にする
`40007` 無効な media_id	先に `material/add_material` でカバーをアップロードし、`thumb_media_id` を取得する
`> [!NOTE]` のレンダリングが正しくない	GitHub アラートを通常の `>` 引用に変換してから WeChat で使用する

bm.md API リファレンス

レンダリング：POST https://bm.md/api/markdown/render

パラメーター	型	デフォルト	説明
`markdown`	string	required	Markdown コンテンツ
`markdownStyle`	string	`ayu-light`	スタイル ID（`green-simple` を使用）
`codeTheme`	string	`kimbie-light`	コードのハイライトテーマ
`customCss`	string	`""`	`#bm-md` にスコープされたカスタム CSS
`enableFootnoteLinks`	boolean	`true`	リンクを脚注に変換
`openLinksInNewWindow`	boolean	`true`	リンクを新しいウィンドウで開く
`platform`	string	`html`	対象：`html`、`wechat`、`zhihu`、`juejin`

利用可能なスタイル：ayu-light、bauhaus、blueprint、botanical、green-simple、maximalism、neo-brutalism、newsprint、organic、playful-geometric、professional、retro、sketch、terminal

スタイル機能

カスタム CSS（styles/custom.css）には、次の内容が含まれています。

Optima／Microsoft YaHei フォント
緑のアクセントカラー（rgb(53, 179, 120)）
H2 見出し：黒い背景に白いテキスト
太字テキスト：緑色
引用：緑色の左ボーダー
行ごとに色を交互にしたレスポンシブテーブル
暗い背景のコードブロック

依存関係

WeChat 公式アカウント API の認証情報（~/.env）
bm.md レンダリングサービス（認証不要）
{{SKILL_DIR}}/styles/custom.css のカスタム CSS

はじめての方へ（ユーザーが何を入力すればよいかわからない場合はこちら）

起動条件：/公众号排版新手、「これはどう使うの？」「初めて使います」「何ができますか？」「一通り案内して」、また、ユーザーがスキル名だけを入力し、タスクを指定していない場合。

このモードの鉄則：決めつけず、要求しない。ユーザーは何も用意していないかもしれません。いきなりファイルや API key、具体的な要望を尋ねないでください。次の4つの手順で進めます。

一、まず、これは何かを説明する（3文以内）

一言で言うと、Markdown を、公式アカウントですぐに使えるレイアウトに整えます。公式アカウントのエディターは Markdown を認識しないため、手作業で書式を整えるには時間がかかります。このスキルならレイアウトを整えられ、テーマの変更もできます。

二、番号付きの選択肢を提示し、Enter キーを押すだけで続けられるようにする

自由回答形式の質問（「何をしたいですか？」など、新しいユーザーの負担になるもの）は避けます。3つの選択肢と、デフォルトを1つ提示します。

想先看哪个？（直接回车 = 1）
  1. 先看看排出来长什么样（示例）
  2. 排我的这篇 Markdown
  3. 有哪些主题可以选

三、実際にデモを行い、説明しながら進める

選択したらすぐに、サンプルデータを使って実演します。ユーザーに何かを用意してもらう必要はありません。各手順の後に「💡 いま起きたこと」を1行追加し、その手順の意味を一言で説明します。

四、卒業

デモの後は、はい／いいえで答えられる質問を1つだけします。「自分の記事でも実際に試してみますか？」「はい」と答えたら通常のフローに進み、「いいえ」と答えたら、いつでも /公众号排版新手 と入力すれば再開できることを伝えます。

Markdown 対応

ログインしてコメント

基本情報

作者: iamzifei
リポジトリ: iamzifei/wechat-article-formatter-skill
カテゴリ: マーケティング・グロース
インストール数: 230
GitHub スター: 76

問題を報告