中野のAI開発部屋
自己紹介

中野のAI開発部屋ができるまで – サイト構築の裏側

このブログ「中野のAI開発部屋」は、記事を書いて投稿するだけでなく、サイトの構築や設定も可能な限りコードで自動化している。エンジニアがブログを作るなら、その過程も記録しておくべきだと思うので、どんな技術スタックでどのように作ったかを書く。

なぜWordPressを選んだのか

最初はHugoやAstroなどの静的サイトジェネレーターも検討した。ビルドが速く、ホスティングも安い。でもWordPressを選んだ理由は3つある。

記事管理のしやすさ: 静的サイトはGitベースで管理することが多いが、記事が増えてきたときのマネジメントをシンプルにしたかった。WordPressの管理画面は非技術者でも使えるシンプルさがある。

REST APIの充実: WordPress REST APIは機能が豊富で、外部からの操作が容易だ。記事投稿、カテゴリ管理、設定変更をすべてREST API経由でPythonから操作できる。

カスタマイズ自由度: PHPテーマを自作することで、HTMLの構造からCSSまで完全にコントロールできる。

技術スタック

フロントエンド: WordPress カスタムテーマ（nakano-theme）
バックエンド: WordPress REST API
自動化: Python 3.12 + requests + python-dotenv
バージョン管理: Git / GitHub
ホスティング: レンタルサーバー（エックスサーバー）
AI支援: Claude Code（コード生成・デバッグ）

カスタムテーマ（nakano-theme）の構築

既製テーマを使わずにカスタムテーマをゼロから作った。

functions.php、index.php、single.php、archive.php、header.php、footer.php——WordPressの必須テンプレートを一つ一つ実装した。

テーマのデザインコンセプトは「読みやすさ重視」。コードブロックが見やすいこと、長い記事でも読みやすい行間と文字サイズ、スマートフォンでもストレスなく読めること、を意識した。

CSSはDesign Tokensを定義して、色・フォント・余白を変数で管理している。テーマ全体の見た目を変えたいときは変数を変えるだけで済む設計にした。

:root {
    --color-primary: #6c5ce7;
    --color-text: #2d3436;
    --color-bg: #ffffff;
    --font-size-base: 16px;
    --line-height-base: 1.8;
    --spacing-section: 2rem;
}

WordPress REST APIによる自動化

このプロジェクトで一番力を入れたのが、Pythonによる自動化だ。

認証: Application Passwords

WordPressには「アプリケーションパスワード」という機能がある（WordPress 5.6以降の標準機能）。管理画面のユーザープロフィールから発行できるAPIキーで、これを使えばプラグイン不要でREST APIに認証付きリクエストを送れる。

import requests
import os
from dotenv import load_dotenv

load_dotenv()

class WPClient:
    def __init__(self):
        self.base_url = os.getenv('WP_URL')
        self.auth = (
            os.getenv('WP_USER'),
            os.getenv('WP_APP_PASSWORD')
        )

    def get(self, endpoint, params=None):
        url = f"{self.base_url}/wp-json/{endpoint}"
        response = requests.get(url, auth=self.auth, params=params)
        response.raise_for_status()
        return response.json()

    def post(self, endpoint, data):
        url = f"{self.base_url}/wp-json/{endpoint}"
        response = requests.post(url, auth=self.auth, json=data)
        response.raise_for_status()
        return response.json()

カスタムRESTプラグイン

WordPress標準のREST APIでカバーできない操作（カスタムCSS、フッタースクリプト、theme_modsの操作）のために、PHPプラグインを自作した（wp-theme-mods-api.php）。

このプラグインが追加するエンドポイント：
– GET/POST /wp-json/custom/v1/theme-mods — テーマ設定の取得・更新
– GET/POST /wp-json/custom/v1/custom-css — カスタムCSSの取得・更新
– GET/POST /wp-json/custom/v1/footer-script — フッタースクリプトの取得・更新

記事投稿の自動化

Markdownで記事を書いて、それをHTMLに変換してWordPressに投稿するスクリプトを作った。

フロントマター（YAML形式のメタ情報）からタイトル・カテゴリ・タグを読み取り、本文をHTML変換してREST API経由で投稿する。予約投稿にも対応していて、1日2本（朝8時・夕18時）のスケジュールで投稿できる。

import yaml
import markdown2

def parse_article(filepath):
    with open(filepath, 'r', encoding='utf-8') as f:
        content = f.read()

    # フロントマター分離
    parts = content.split('---', 2)
    frontmatter = yaml.safe_load(parts[1])
    body = parts[2].strip()

    # Markdown → HTML変換
    html_content = markdown2.markdown(
        body,
        extras=['fenced-code-blocks', 'tables', 'header-ids']
    )

    return frontmatter, html_content

Claude Codeとの協業

このサイト構築全体を通じて、Claude Codeを積極的に使った。

コーディングの方針や設計の相談、PHPコードのデバッグ、Pythonスクリプトのリファクタリング——あらゆる場面でClaude Codeと対話しながら進めた。

特に効果的だったのは「エラーが発生したときにエラーメッセージと関連コードをまるごと貼る」方法。人間のエンジニアに質問するときと同じように、文脈を渡すと精度の高い回答が返ってくる。

Claude Codeがあることで、1人でのサイト構築のスピードが体感で3〜4倍になった。「こういうことがしたい」「このコードに何か問題があるか見てほしい」という対話を繰り返しながら、実装を進められた。

工夫した点

冪等性: 設定スクリプトを何度実行しても同じ結果になるよう設計した。「カテゴリが既に存在する場合はスキップする」「メニュー項目が重複しないようチェックする」という処理を入れている。

dry-run対応: 実際に変更を加える前に「何が変わるか」を確認できるdry-runオプションをスクリプトに実装した。本番環境での操作ミスを防ぐために重要な機能だ。

バックアップ: theme_modsの変更前には必ずJSONファイルにバックアップを保存する。何か問題が起きたときに元に戻せる安心感がある。

まとめ

「中野のAI開発部屋」の技術スタックと構築プロセスをまとめると：

  • WordPressカスタムテーマ（nakano-theme）をゼロから自作
  • WordPress REST API + Application Passwordsで認証
  • Python自動化スクリプト群でサイト設定・記事投稿を自動化
  • カスタムRESTプラグインで標準APIを拡張
  • Claude Codeを協業パートナーとして積極活用

エンジニアがブログを作るなら、その構築プロセス自体がコンテンツになる。サイトを育てながら、この種の記録も続けていく。