Claude Code で WordPress ブログ記事投稿を自動化した

1. やったこと
2. 全体の処理フロー
3. WordPress REST API 認証
- 3-1. アプリケーションパスワードの取得
- 3-2. Basic 認証の実装
4. 画像・図の自動生成
- 4-1. TOP 画像（PNG）を PowerShell で生成
- 4-2. 技術図を SVG で生成
5. 記事本文の生成
- 5-1. Gutenberg ブロック形式が必須
- 5-2. SVG のインライン埋め込み
6. 詰まったポイントと解決策
7. スキル化（/blog-app-post）
8. まとめ

1. やったこと

Androidアプリ「Trade Tracker」の紹介記事を書くにあたり、記事生成から WordPress への投稿までを Claude Code と PowerShell で自動化しました。具体的には以下を実装しています。

GitHub リポジトリから DEVLOG.md・コミット履歴を取得して記事のネタを収集
PowerShell の System.Drawing で TOP 画像（PNG）を生成
技術スタック・アーキテクチャ・画面フローなど 5 種類の図を SVG で生成
Qiita 風・教科書調の記事本文を Gutenberg ブロック形式で生成
WordPress REST API で画像アップロード・カテゴリ作成・記事投稿を実行
一連の処理を /blog-app-post カスタムコマンドとしてスキル化

2. 全体の処理フロー

3. WordPress REST API 認証

3-1. アプリケーションパスワードの取得

WordPress REST API への書き込みには認証が必要です。プラグイン不要で使える「アプリケーションパスワード」を利用します。WordPress 5.6 以降は標準機能として搭載されています。

WordPress 管理画面（/wp-admin）にログイン
ユーザー → プロフィール → 「アプリケーションパスワード」セクションへ移動
任意の名前（例：Claude Code）を入力して「新しいアプリケーションパスワードを追加」をクリック
表示された xxxx xxxx xxxx xxxx xxxx xxxx 形式のパスワードをコピーして保存

3-2. Basic 認証の実装

ユーザー名とアプリケーションパスワードを username:password の形式で Base64 エンコードし、Authorization ヘッダーに付与します。

   = "your-username"
   = "xxxx xxxx xxxx xxxx xxxx xxxx"
 = [Convert]::ToBase64String(
    [Text.Encoding]::ASCII.GetBytes(":")
)
 = @{ Authorization = "Basic " }

# 認証テスト
 = Invoke-RestMethod -Uri "https://your-site.com/wp-json/wp/v2/users/me" -Headers 
Write-Host "認証OK: "

4. 画像・図の自動生成

4-1. TOP 画像（PNG）を PowerShell で生成

Python や Node.js がなくても、PowerShell には .NET の System.Drawing が利用できます。これを使って 1200×630px（OGP 推奨サイズ）の PNG 画像を生成します。

Add-Type -AssemblyName System.Drawing

 = 1200;  = 630
 = New-Object System.Drawing.Bitmap(, )
   = [System.Drawing.Graphics]::FromImage()
.SmoothingMode = [System.Drawing.Drawing2D.SmoothingMode]::AntiAlias

# 背景グラデーション
 = New-Object System.Drawing.Drawing2D.LinearGradientBrush(
    [System.Drawing.Point]::new(0,0),
    [System.Drawing.Point]::new(0,),
    [System.Drawing.Color]::FromArgb(255,10,15,40),
    [System.Drawing.Color]::FromArgb(255,5,5,20))
.FillRectangle(, 0, 0, , )
.Dispose()

# タイトルテキスト描画
  = New-Object System.Drawing.Font("Arial", 80, [System.Drawing.FontStyle]::Bold)
 = New-Object System.Drawing.SolidBrush([System.Drawing.Color]::White)
.DrawString("アプリ名", , , 80, 150)

.Dispose()
.Save("top.png", [System.Drawing.Imaging.ImageFormat]::Png)
.Dispose()

4-2. 技術図を SVG で生成

技術スタック図・アーキテクチャ図・画面フロー図・API シーケンス図・DB スキーマ図の 5 種類を SVG ファイルとして生成します。SVG はテキストファイルなので Claude Code の Write ツールで直接作成でき、WordPress の wp:html ブロックとして記事にインライン埋め込みできます。

SVG の共通デザイン仕様は以下の通りです。

項目	仕様
背景色	`#0f1923`（濃紺）
UI層	青系（`#4a90d9`）
ViewModel層	緑系（`#4ac97a`）
Repository層	オレンジ系（`#d9a040`）
DB層	紫系（`#7a7ad9`）
API層	ピンク系（`#c94a7a`）

5. 記事本文の生成

5-1. Gutenberg ブロック形式が必須

WordPress REST API 経由で投稿する際、生の HTML をそのまま送っても Gutenberg エディターでは表示されません。Gutenberg はブロックコメント（ 等）がないと内容を認識できない仕様です。

要素	Gutenbergブロック形式
段落	`<!-- wp:paragraph --><p>...</p><!-- /wp:paragraph -->`
見出しH2	`<!-- wp:heading {"level":2} --><h2>...</h2><!-- /wp:heading -->`
リスト	`<!-- wp:list --><ul>...</ul><!-- /wp:list -->`
コード	`<!-- wp:code --><pre class="wp-block-code">...</pre><!-- /wp:code -->`
テーブル	`<!-- wp:table --><figure>...</figure><!-- /wp:table -->`
SVG・任意HTML	`<!-- wp:html -->...<!-- /wp:html -->`

5-2. SVG のインライン埋め込み

SVG を画像としてアップロードするには WordPress 側でプラグインが必要ですが、wp:html ブロックとしてインライン埋め込みすればプラグインなしで表示できます。

<!-- wp:html -->
<svg xmlns="http://www.w3.org/2000/svg" width="760" height="420">
  ...
</svg>
<!-- /wp:html -->

6. 詰まったポイントと解決策

6-1. PowerShell の ConvertTo-Json でコンテンツが消える

PowerShell 5.1 の ConvertTo-Json は SVG や大きな HTML 文字列を含むオブジェクトを正しくシリアライズできない場合があります。JSON として送信したデータが WordPress 側で空になっていました。

解決策： System.Web.Extensions の JavaScriptSerializer と HttpWebRequest を組み合わせ、UTF-8 バイトを直接ストリームに書き込む方式に変更しました。

Add-Type -AssemblyName System.Web.Extensions
 = New-Object System.Web.Script.Serialization.JavaScriptSerializer
.MaxJsonLength = 200000000

   = .Serialize()
 = [System.Text.Encoding]::UTF8.GetBytes()

 = [System.Net.HttpWebRequest]::Create("https://your-site.com/wp-json/wp/v2/posts")
.Method = "POST"
.Headers.Add("Authorization", "Basic ")
.ContentType = "application/json; charset=utf-8"
.ContentLength = .Length
 = .GetRequestStream()
.Write(, 0, .Length)
.Close()

6-2. ファイルの文字化け（Shift-JIS 問題）

PowerShell 5.1 は Get-Content のデフォルトエンコードがシステム依存（日本語環境では Shift-JIS）です。UTF-8 で書かれた SVG や HTML を読み込むと日本語が文字化けします。

解決策： ファイルの読み書きをすべて StreamReader / StreamWriter で行い、エンコードを明示的に UTF-8 BOMなし に統一しました。

# 読み込み（UTF-8 BOMなし）
 = New-Object System.IO.StreamReader(, [System.Text.Encoding]::UTF8)
 = .ReadToEnd(); .Close()

# 書き込み（UTF-8 BOMなし）
 = New-Object System.IO.StreamWriter(, False,
    (New-Object System.Text.UTF8Encoding(False)))
.Write(); .Close()

6-3. カテゴリ名の文字化け

Invoke-RestMethod に ConvertTo-Json で変換した日本語 JSON を渡すと、WordPress 側でカテゴリ名が「?????」になりました。これも同じエンコード問題です。

解決策： カテゴリ作成・更新も HttpWebRequest + UTF-8 バイト直送に統一しました。既に文字化けしたカテゴリは DELETE ではなく PATCH（X-HTTP-Method-Override ヘッダー使用）で名前を上書き修正しました。

7. スキル化（/blog-app-post）

今回の手順を Claude Code のカスタムスラッシュコマンドとして保存しました。~/.claude/commands/blog-app-post.md にコマンドの処理手順を記述することで、次回以降は以下のコマンド一発で同じ処理が実行できます。

# 別のアプリの記事を投稿する場合
/blog-app-post WifiDrop
/blog-app-post FamiLog

スキルは以下の処理を順番に実行します。

メモリから WordPress 認証情報を読み込み、確認表示して y/n を取得
GitHub から DEVLOG.md・コミット履歴を取得
TOP 画像（PNG）と SVG 図 5 種類を自動生成
Qiita 風・10 セクション構成の記事本文を生成
WordPress へ画像アップロード・カテゴリ確認・記事投稿（下書き）
管理画面 URL を出力

8. まとめ

課題	解決策
ConvertTo-Json でコンテンツが消える	JavaScriptSerializer + HttpWebRequest に変更
日本語の文字化け	StreamReader / StreamWriter で UTF-8 BOMなし統一
Gutenberg に表示されない	すべての要素をブロックマーカーで囲む
SVG を WordPress に埋め込む	wp:html ブロックとしてインライン埋め込み
毎回同じ手順を繰り返す	/blog-app-post スキルとして保存・再利用

Claude Code を使えば、アイデアを伝えるだけで画像生成・記事執筆・API 投稿まで一貫して自動化できます。同じパターンのアプリが複数ある場合はスキル化しておくと、次回以降のコストをほぼゼロにできます。