AIブログ自動生成ツール開発シリーズ
この連載では、AIを使ったブログ自動生成ツールをゼロから作ります。
AIブログ自動生成ツールの環境構築
前章では、AIブログ自動生成ツールの全体アーキテクチャを解説しました。
まだ読んでいない場合はこちらから確認できます。
この記事では
ツールを動かすための開発環境を構築します。
ここで行うのは次の3つです。
- Next.jsプロジェクトの準備
- OpenAI API設定
- WordPress接続設定
ここまで終われば
すぐにUI実装へ進める状態になります。
この章のゴール
この章の目的は
ローカル環境でツールを起動できる状態にすること
です。
具体的には
- 必要ソフトの確認
- パッケージ構成
- 環境変数
- ディレクトリ構造
を整備します。
必要なソフトウェア
まず以下がインストールされているか確認してください。
- Node.js（LTS推奨）
- npm
- VS Codeなどのエディタ
- WordPress（テスト用でもOK）
- OpenAI APIキー
確認コマンド
node -v
npm -v
Nodeが入っていない場合は
Node公式サイトからインストールしてください。
使用する主要パッケージ
このプロジェクトでは次のパッケージを使用します。
- next
- react
- react-dom
- openai
- zod
- marked
- typescript
これらの役割は次の通りです。
next
Next.jsフレームワーク
openai
OpenAI API接続
zod
JSONバリデーション
marked
Markdown → HTML変換
typescript
型安全な開発
この構成で
- API通信
- JSON検証
- HTML生成
を実現できます。
環境変数を設定する
プロジェクトのルートに
.env.local
を作成します。
以下を追加してください。
OPENAI_API_KEY=sk-...
OPENAI_USDJPY=160
WP_SITE_CONFIGS_JSON=[{"id":"default","name":"Main Site","baseUrl":"https://example.com","username":"editor","appPassword":"xxxx xxxx xxxx xxxx xxxx xxxx"}]
DATABASE_PATH=./data.json
それぞれの意味は次の通りです。
OPENAI_API_KEY
OpenAI APIキー
OPENAI_USDJPY
API料金の円換算レート
WP_SITE_CONFIGS_JSON
WordPress接続設定
DATABASE_PATH
JSON保存ファイル
OpenAI APIについては
こちらの記事でも詳しく解説しています。
料金についてはこちら。
ディレクトリ構造
プロジェクト構造は次の通りです。
app/
page.tsx
history/page.tsx
api/
estimate/route.ts
generate/route.ts
image-only/route.ts
openai/test/route.ts
wp/test/route.ts
wp/post/route.tssrc/
types/index.ts
services/
generationService.ts
openaiClient.ts
wpService.ts
markdown.ts
lib/
db.ts
cost.ts
siteConfig.ts
役割は次の通りです。
app
Next.js UI
api
APIエンドポイント
services
ビジネスロジック
lib
データ処理
この構造にすると
- 責務分離
- 保守性
- 拡張性
が高くなります。
型定義を先に作る
初心者ほど
型を先に作る方が実装が安定します。
型ファイル
src/types/index.ts
ここに次の型を定義します。
InputPayload
GenerationResult
SeoPlan
Outline
ImagePlanItem
WordPressPostPayload
TokenUsage
メリット
- API仕様が明確
- UIとズレない
- バグを防げる
OpenAIクライアントを作る
src/services/openaiClient.ts
ここでOpenAIクライアントを作ります。
import OpenAI from "openai";let client: OpenAI | null = null;export function getOpenAIClient(): OpenAI {
if (!process.env.OPENAI_API_KEY) {
throw new Error("OPENAI_API_KEY is not set.");
} if (!client) {
client = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
} return client;
}
ポイントは
APIキー未設定なら即エラー
にすることです。
MVPストレージ
このツールでは最初
DBを使いません。
代わりに
data.json
を使用します。
保存データ
generations
usage_logs
cache
メリット
- セットアップ不要
- デバッグ簡単
- 学習しやすい
本番では
- SQLite
- PostgreSQL
に変更できます。
開発サーバー起動
以下を実行します。
npm install
npm run dev
ブラウザで
http://localhost:3000
を開きます。
画面が表示されれば
環境構築は成功です。
初心者がハマるポイント
よくあるエラーは次の通りです。
.env.local JSONミス
OPENAI_API_KEY未設定
WordPress URLミス
型定義不足
おすすめ手順
/api/openai/test
↓
/api/wp/test
↓
generate
この順番で確認すると
トラブルを切り分けやすいです。
まとめ
環境構築の重要ポイントは
- 環境変数
- ディレクトリ構造
- 型設計
この3つです。
これを最初に整えることで
後のUI実装が一気に楽になります。
次の記事では
4ステップUIを実装します。
前の記事
AIブログ自動化の全体設計はこちら
次の記事
UI実装
👉 ()