🎉 皆様こんにちは！
今回は、AIで生成した記事をWordPressに自動投稿するツール「WP AutoPoster」を開発した際に、REST APIまわりで大ハマりした体験談をお届けします！特にアプリケーションパスワード周辺で躓いたポイントを詳しく解説していきますので、同じような機能を実装しようとしている方の参考になれば幸いです。
💡 WP AutoPosterとは？
WP AutoPosterは、AIが生成したコンテンツを自動的にWordPressへ投稿するツールです。開発の動機は「ブログ更新の手間を削減したい」という単純なものでしたが、実装はなかなか一筋縄ではいきませんでした。
🎯 設計のポイント
- サブスクリプションサービスに依存しない独立した構造
- WordPress REST APIのみを使用したシンプルな実装
- AIモデルのAPI（OpenAIなど）を直接呼び出し
- 認証情報の安全な管理
この構成により、月額課金サービスに頼らず、必要なAPI料金だけで運用できる経済的なシステムを目指しました。
🏗️ システムアーキテクチャ
WP AutoPosterの基本的な動作フローは以下の通りです。
- AIモデルAPIにプロンプトを送信して記事コンテンツを生成
- 生成されたコンテンツを整形・加工
- WordPress REST APIを使って記事を投稿
- 投稿結果の確認とエラーハンドリング
シンプルな構造ですが、実際に実装してみると、特にステップ3のWordPress REST API連携で多くの落とし穴がありました。
😱 REST APIでハマったポイント
🔐 アプリケーションパスワードの設定
最初の大きな壁が、WordPress REST APIの認証でした。従来のユーザー名とパスワードでは認証できず、「アプリケーションパスワード」という機能を使う必要があります。
アプリケーションパスワードは、WordPressのユーザープロフィール画面から生成できる専用の認証トークンです。以下の点で躓きました：
- WordPressのバージョンが5.6以降でないと利用できない
- HTTPSが必須（ローカル開発環境では例外設定が必要）
- 生成されたパスワードはスペース込みで表示されるが、実際には削除して使用する
// 正しい認証ヘッダーの例
const auth = Buffer.from(`${username}:${applicationPassword}`).toString('base64');
headers: {
'Authorization': `Basic ${auth}`,
'Content-Type': 'application/json'
}
🚫 CORS問題との戦い
ブラウザからWordPress REST APIを直接呼び出そうとすると、CORSエラーに遭遇しました。この問題の解決には以下のアプローチを取りました。
- WordPressサーバー側でCORSヘッダーを適切に設定
- または、バックエンドサーバー経由でAPIを呼び出す構成に変更
// functions.phpに追加するCORS対応コード
add_action('rest_api_init', function() {
remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
add_filter('rest_pre_serve_request', function($value) {
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Credentials: true');
return $value;
});
});
📝 投稿データの構造
WordPress REST APIで記事を投稿する際のデータ構造も最初は混乱しました。特に以下のパラメータの理解が重要です。
title: 記事タイトル（文字列またはオブジェクト形式）content: 記事本文（HTML可能）status: 公開状態（draft、publish、privateなど）categories: カテゴリID（配列形式）tags: タグID（配列形式）
// 投稿データの正しい構造
const postData = {
title: '記事タイトル',
content: '<p>記事本文</p>',
status: 'publish',
categories: [1, 5],
tags: [10, 20]
};
🛠️ トラブルシューティングのコツ
🔍 デバッグ方法
REST APIの問題をデバッグする際に役立ったテクニックをいくつか紹介します。
- WordPress REST API Handbookの公式ドキュメントを熟読
- Postmanなどのツールで直接APIをテスト
- WordPressのデバッグモードを有効化してエラーログを確認
- ブラウザの開発者ツールでネットワークタブを監視
⚠️ よくあるエラーと対処法
- 401 Unauthorized: アプリケーションパスワードの形式を確認（スペース除去）
- 403 Forbidden: ユーザー権限を確認（投稿権限が必要）
- 404 Not Found: パーマリンク設定を確認（プレーン以外に設定）
- 500 Internal Server Error: PHPエラーログを確認
🎨 AIとの連携部分
AI APIからWordPress REST APIへの橋渡し部分も工夫が必要でした。AIが生成するコンテンツをそのままWordPressに投稿すると、フォーマットが崩れることがあります。
// AIレスポンスの整形例
function formatAIContent(aiResponse) {
let content = aiResponse.trim();
// 改行をHTMLの段落タグに変換
content = content.split('nn').map(p => `<p>${p}</p>`).join('');
// マークダウン形式の見出しをHTMLに変換
content = content.replace(/^## (.+)$/gm, '<h2>$1</h2>');
return content;
}
💰 コストを抑える工夫
サブスクリプションサービスを使わずAPI直接呼び出しにすることで、以下のメリットがありました。
- 使った分だけの従量課金で無駄がない
- APIキーを自分で管理できるセキュリティ
- 複数のAIモデルを自由に切り替え可能
- バッチ処理で効率的に記事生成
ただし、エラーハンドリングやリトライ処理は自分で実装する必要があるため、開発コストとのバランスを考える必要があります。
✅ まとめ
WordPress REST APIを使った自動投稿ツールの開発は、アプリケーションパスワードの理解、CORS対応、適切なデータ構造の把握など、いくつかのハードルがありました。しかし一度理解してしまえば、非常に強力で柔軟なシステムを構築できます。
特にアプリケーションパスワードはWordPress REST API利用の要となる機能ですので、しっかりと理解しておくことをお勧めします。サブスクサービスに頼らずAPI直接呼び出しで実装することで、コストを抑えながら自由度の高いシステムを作ることができました。
皆さんもぜひ、WordPressとAIを組み合わせた自動化ツールにチャレンジしてみてください！
