Claude Skills でWeChat公式アカウントにワンクリック公開

WeChat公式アカウントを運用したことがある方なら、こんな経験があるのではないでしょうか。エディタで丁寧にレイアウトした記事を公式アカウントの管理画面にコピーすると、フォーマットが崩壊する。画像は一枚ずつ再アップロードが必要。コードブロックはプレーンテキストになってしまう。調整済みの余白やフォントサイズもやり直し。技術記事を一本公開するだけで、レイアウト調整だけで30分もかかります。

私はずっと Markdown でブログを書いてきましたが、この問題を解決するために Claude Skills ベースの自動公開ワークフローを構築しました。今では「この記事を公式アカウントに投稿して」と一言伝えるだけで、Claude がレンダリング、レイアウト、画像アップロード、下書き投稿まですべて自動で完了してくれます。

この記事では構築プロセスの全体を記録しています。そのまま再利用できます。

Skills が何かまだよく分からない方は、まず《Claude Skills とは》をご覧ください。Skill の作成・使用方法について詳しく知りたい方は、《Claude Skills 実践ガイド》を参考にしてください。

前提条件

始める前に、以下の条件が揃っていることを確認してください。

条件	説明
Claude Code	Claude Code CLI のインストールが必要です。公式インストールガイド
WeChat公式アカウント	認証済みの公式アカウントが必要で、AppID と AppSecret を取得してください
Node.js	ランタイム環境。Skill スクリプトは `npx -y bun` で実行されます

WeChat API 認証情報の取得方法：mp.weixin.qq.com にログイン → 左側メニュー「設定と開発」→「基本設定」→ 開発者 ID（AppID）と開発者シークレット（AppSecret）をコピーします。

注意：AppSecret はリセット時に一度だけ表示されます。必ず安全に保存してください。また、「基本設定」でサーバー IP をホワイトリストに追加する必要があります。

Skill のインストール

baoyu-post-to-wechat は GitHub でホストされており、Claude Code の Skill インストールコマンドでワンクリックインストールできます。

claude skill install jimliu/baoyu-skills --skill baoyu-post-to-wechat

インストールが完了すると、プロジェクトに以下のファイル構造が生成されます。

your-project/
├── .agents/skills/
│   └── baoyu-post-to-wechat/
│       ├── SKILL.md              # Skill 核心指令
│       ├── scripts/
│       │   ├── wechat-api.ts     # API 发布脚本
│       │   ├── wechat-browser.ts # 浏览器发布脚本
│       │   └── md/               # Markdown 渲染引擎
│       │       ├── render.ts
│       │       └── themes/       # 主题 CSS 文件
│       └── references/           # 详细参考文档
└── skills-lock.json              # Skill 版本锁定

skills-lock.json にはインストール済み Skill のソースとバージョンハッシュが記録されており、チームメンバーが同じバージョンを使用することを保証します。

{
  "version": 1,
  "skills": {
    "baoyu-post-to-wechat": {
      "source": "jimliu/baoyu-skills",
      "sourceType": "github",
      "computedHash": "cb28e409..."
    }
  }
}

設定

設定は API 認証情報とプリファレンス設定の2ステップです。

API 認証情報

.baoyu-skills/.env ファイルを作成し、WeChat公式アカウントの認証情報を入力します。

# 项目级配置（仅当前项目生效）
mkdir -p .baoyu-skills
cat > .baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

ユーザーディレクトリに配置して、すべてのプロジェクトで共有することもできます。

# 用户级配置（所有项目生效）
mkdir -p ~/.baoyu-skills
cat > ~/.baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

認証情報の検索優先順位：環境変数 > プロジェクトレベル .baoyu-skills/.env > ユーザーレベル ~/.baoyu-skills/.env。

セキュリティに関する注意：.baoyu-skills/.env には機密情報が含まれています。必ず .baoyu-skills/ を .gitignore に追加し、誤ってリポジトリにコミットされないようにしてください。

プリファレンス設定（EXTEND.md）

.baoyu-skills/baoyu-post-to-wechat/EXTEND.md でデフォルトのプリファレンスを設定します。私自身の設定は以下の通りです。

# WeChat Publishing Preferences

## Default Settings

- default_theme: yudesk
- default_author: yux

サポートされている設定項目：

設定項目	デフォルト値	説明
`default_theme`	`default`	レンダリングテーマ（default、grace、simple、yudesk）
`default_publish_method`	`api`	公開方式（api または browser）
`default_author`	空	デフォルトの著者名
`need_open_comment`	`1`	コメントを有効にするかどうか
`only_fans_can_comment`	`0`	フォロワーのみコメント可能にするかどうか

設定の優先順位：CLI パラメータ > 記事 frontmatter > EXTEND.md > Skill デフォルト値。

記事を書く

標準的な Markdown 形式で記事を書くだけで大丈夫です。私のブログでは MDX カスタムコンポーネント（BlogImage、QuoteCard、VideoEmbed など）を使っていますが、Skill が公開時に自動的に標準 Markdown に変換してくれるため、手動での処理は不要です。

変換ルール：

MDX コンポーネント	変換結果	例
`<BlogImage>`	`![alt](src)` + 画像説明	画像 + イタリック caption
`<QuoteCard>`	`> 引用内容 — 著者`	引用ブロック
`<VideoEmbed>`	`> 🎬 動画タイトル + リンク`	引用ブロック + 動画リンク
`<ArticleCard>`	`> 📄 記事タイトル + リンク`	引用ブロック + 記事リンク
`<GlossaryCard>`	`> 📖 用語：定義`	引用ブロック
`<ProfileCard>`	`氏名 — 役割`	太字テキスト

また、ブログ内部リンク（/blog/...、/docs/...）は自動的にプレーンテキストに変換され、import/export 文は削除されます。つまり、ブログの MDX ファイルをそのまま公開に使えるので、2つのコンテンツを維持する必要がありません。

記事の frontmatter

記事の frontmatter で以下のフィールドが公開に使用されます。

---
title: 文章标题
author: 作者名
description: 文章摘要（用于公众号的文章摘要）
coverImage: cover.png  # 封面图（本地路径或 URL）
---

カバー画像を指定しない場合、Skill は以下の順序で検索します：frontmatter の coverImage/featureImage/cover/image → 記事ディレクトリの imgs/cover.png → 記事内の最初の画像。

公開

すべての準備が整ったら、公開は非常に簡単です。

方法1：対話式公開

Claude Code で直接伝えます。

帮我把 content/blog/my-article.mdx 发到公众号

Claude が自動的に意図を認識し、baoyu-post-to-wechat Skill をロードして、プリファレンスの読み込み → ファイルタイプの判定 → HTML レンダリング → 画像アップロード → 下書き投稿の順に実行します。

方法2：コマンドライン公開

スクリプトを直接呼び出すこともできます。

npx -y bun .agents/skills/baoyu-post-to-wechat/scripts/wechat-api.ts article.md --author yux

サポートされているパラメータ：

パラメータ	説明
`--theme <name>`	テーマ：default、grace、simple、yudesk
`--author <name>`	著者名（最大16文字）
`--summary <text>`	記事の要約（最大128文字）
`--cover <path>`	カバー画像のパス
`--dry-run`	レンダリングのみで公開しない、プレビュー用

公開フローの解説

公開を実行すると、裏では以下のステップが実行されます。

Markdown ファイル
    │
    ▼
① MDX 前処理：BlogImage → ![]()、QuoteCard → blockquote ...
    │
    ▼
② Markdown レンダリング：marked エンジン + highlight.js コードハイライト
    │
    ▼
③ テーマ適用：base.css + yudesk.css、CSS 変数の解決
    │
    ▼
④ CSS インライン化：juice が <style> を inline style に変換（WeChat の要件）
    │
    ▼
⑤ 画像アップロード：<img> を走査し、WeChat CDN にアップロード、src を置換
    │
    ▼
⑥ カバー処理：カバー画像をアップロードし、thumb_media_id を取得
    │
    ▼
⑦ 下書き投稿：draft/add API を呼び出し、公式アカウントの下書きボックスに保存

いくつかの重要な技術的詳細：

CSS インライン化：WeChat公式アカウントは <style> タグや外部スタイルシートをサポートしていないため、すべての CSS を要素の style 属性にインライン化する必要があります。Skill は juice ライブラリを使って自動的に処理し、同時に CSS 変数（例：var(--md-primary-color) → #0F4C81）や calc() 式を実際の値に置き換えます。
画像アップロード：WeChat は記事内のすべての画像を WeChat CDN に保存することを要求しています。Skill は HTML 内のすべての <img> タグを走査し、ローカル画像や外部 URL の画像を WeChat 素材ライブラリにアップロードしてから、WeChat CDN の URL で元の src を置き換えます。
ブランド要素：公開時にブランドのヘッダー画像とフッター画像が自動的に追加され、公式アカウント記事のビジュアルの統一性が保たれます。

応用編：カスタムテーマ

Skill には4つのテーマが組み込まれています：default（クラシック）、grace（エレガント）、simple（シンプル）、yudesk（テックブログ）。独自のテーマを作成したい場合は、themes/ ディレクトリに CSS ファイルを追加するだけです。

私が使っている yudesk テーマを例にすると、そのデザインコンセプトは「シンプル、プロフェッショナル、コードフレンドリー」です。

/* yudesk 主题核心样式 */

/* 标题：居中、深色 */
h1, h2 { text-align: center; color: #1a1a1a; font-weight: bold; }

/* 段落：适当字距，灰色文字 */
p { letter-spacing: 0.05em; color: #555; }

/* 引用块：左侧主色边线 */
blockquote { border-left: 3px solid var(--md-primary-color); background: var(--blockquote-background); }

/* 代码块：GitHub 风格，浅灰背景 */
pre.code__pre { background: #f6f8fa !important; border: 1px solid #e1e4e8; border-radius: 4px; }

/* 行内代码：主色调 */
code { color: var(--md-primary-color); background: rgba(15, 76, 129, 0.08); }

カスタムテーマの作成手順：

.agents/skills/baoyu-post-to-wechat/scripts/md/themes/ の下に my-theme.css を新規作成します
yudesk.css を参考にスタイルを記述します（h1〜h6、p、blockquote、pre、code、table などの要素をオーバーライド）
EXTEND.md で default_theme: my-theme を設定するか、公開時に --theme my-theme を指定します

テーマ CSS では CSS 変数 var(--md-primary-color)、var(--md-font-size) などが使用でき、レンダリングエンジンが CSS インライン化の段階で自動的に実際の値に置き換えます。

var(--md-primary-color) → #0F4C81
hsl(var(--foreground))  → #3f3f3f
calc(16px * 1.3)        → 21px

このステップは自動的に行われるため、手動での処理は不要です。

全体フローのまとめ

執筆から公開までの完全なフロー：

ステップ	操作	説明
1. 記事を書く	Markdown/MDX でコンテンツを作成	ブログの MDX コンポーネントを使用可能、自動変換されます
2. Skill をインストール	`claude skill install jimliu/baoyu-skills`	初回のみ必要
3. 認証情報を設定	`.baoyu-skills/.env` を記入	初回のみ必要
4. プリファレンスを設定	EXTEND.md を編集	任意、デフォルトテーマ/著者を設定
5. 公開	「公式アカウントに投稿して」または `npx -y bun ... wechat-api.ts`	ワンクリックで完了
6. 確認	mp.weixin.qq.com にログイン → コンテンツ管理 → 下書きボックス	プレビュー後に公開をクリック

記事は公開後、公式アカウントの下書きボックスに保存されます（直接公開はされません）。管理画面でプレビュー・編集してから正式に公開できます。

《Claude Skills とは》— Skills のコアコンセプトとプログレッシブディスクロージャーアーキテクチャを理解する
《Claude Skills 実践ガイド》— Skills の有効化、インストール、作成のベストプラクティスを学ぶ
《Claude Subagent 完全ガイド》— Skills と Subagents の連携使用を了解する

Claude Skills でWeChat公式アカウントにワンクリック公開

前提条件

Skill のインストール

設定

API 認証情報

プリファレンス設定（EXTEND.md）

記事を書く

記事の frontmatter

公開

方法1：対話式公開

方法2：コマンドライン公開

公開フローの解説

応用編：カスタムテーマ

トラブルシューティング

コードブロックのモバイル端末での改行

要約が長すぎて切り捨てられる

カバー画像は必須

CSS 変数の互換性

全体フローのまとめ

関連記事

コメント