Easy RunningAIと一緒に作ったブログシステム ― 手打ちHTMLからBlosxom風CMSへ

2026年1月1日なっかん

60代プログラム素人が、AIの力を借りて本格的なブログシステムを完成させるまでの記録

---

はじめに

個人サイトは2001年から開設しています。
当時はダイエットやそれを目的にはじめたジョギングやマラソンに関するホームページを運営していました。そうして何年か経つごとに大幅にリニューアルしてみたり、Blosxomというシンプルなブログシステムも使ってみた。2013年に三度目くらいの大幅リニューアルでそれまでの記事はランニング関係の主要なものだけ残し、WordPressで一から出直して今に至ります。といってもここ数年は殆ど更新しておりませんでした。

還暦をきっかけとして、もう一度マラソンを走ってみようと思い、WordPressで運営していたEasy Runnningとは別に「Easy Running 練習館」として手打ちのHTMLで練習記録を書くサイトを作ってみた。ごく基本的なhtmlにフリーで使えるCSSをあてていたのだが、まずCSSをAIに頼んで作ってもらったところ、短時間で「中々ええやつが出来るやん！」となり、徐々にAIへの要求がエスカレートしていった。

「もしかしたら、独自のシステムも作れるんじゃね？」と思い、AIアシスタント「Claude」に相談してみることにした。これが、予想を超える開発プロジェクトの始まりだった。

---

第1章　手打ちHTMLの限界

最初のサイト構成

最初に作ったサイトは、シンプルな静的HTMLだった。

html/
├── index.html      ← トップページ（手動でリンクを追加）
├── race/           ← 大会参加記
│   └── 20251102.html
├── archives/       ← 練習記
│   └── 20251015.html
├── monthly/        ← 月間記録
│   └── 202510.html
└── css/
    └── style.css

CSSはダークモード対応のモダンなデザインで、見た目には満足していた。しかし、問題は更新作業だった。

更新の手間

なるべく更新の手間を減らせるよう、PHPファイルでテンプレートを作りそれを読み込ませるような方法で手打ちHTMLを作成していた。しかしながら下記の作業は常に必要です。

PHPについてはテンプレファイルを作成し、それを読み込ませる程度の知識しか持っていないので悪しからず。プログラムを作成出来るほどの能力は持ち合わせておりません。

1. HTMLファイルを新規作成。
2. 前後ページへのリンク作成。
3. トップページのリンク一覧用テンプレートファイル（PHP）に手動で追加。
4. 月間記録のテーブルを手作業で更新

別にこれでも悪くはなかったのだが、もっと良い方法はないかと思いはじめた。

---

第2章　Claudeに相談 ― シンプルCMSの誕生

最初の相談

Claudeに「このサイトを簡単に更新できるシステムを構築できますか？」と相談した。

Claudeからの提案は3つ

1. フル機能CMS - 管理画面から全て操作、データベース使用
2. シンプル版 - Markdownファイルを置くだけで自動反映
3. ハイブリッド - 管理画面あり、でもJSONファイルで軽量管理

自分が選んだのは「シンプル版」だった。理由は明快で、サーバーにデータベースを設定する必要がなく、記事ファイルをFTPでアップロードするだけで更新できるから。

最初のシステム

Claudeが作ってくれた最初のシステムは、こんな仕組みだった：

// 記事フォルダをスキャンして自動でリンク生成
$articles = getArticles('archives/', 10);
foreach ($articles as $article) {
    echo "<li><a href='{$article['url']}'>{$article['title']}</a></li>";
}

archives/ フォルダにMarkdownファイル（例：20251102.md）を置くだけで、トップページに自動でリンクが表示される。ファイル名の日付から記事の日付を取得し、ファイル内の # 見出し からタイトルを取得する仕組み。

これだけで更新作業が劇的に楽になった。

---

第3章　Markdown + HTML混在対応

次の要望

しばらく使っていると、新たな課題が見えてきた。月間記録では複雑なテーブルを使いたい。Markdownの表では rowspan（セル結合）ができない。

Claudeに相談すると、「Markdown内にHTMLタグを直接書けるようにしましょう」という提案があった。

混在対応版

## 2025年12月のマラソン練習記録

12月総走行距離: **147.5km**

普段はMarkdownで楽に書き、凝りたい時はHTMLで自由に書ける。これが一番実用的だった。

---

第4章　Blosxom Starter Kit風へ進化

Blosxomとは

Blosxomは2000年代に流行した軽量ブログシステムで、テキストファイルベースで動作する。プラグインによる拡張性が特徴で、日本でも多くのユーザーがいた。当時は自分のサイトの中にもブログとして組み込んでいました。

Claudeに「Blosxom Starter Kit風のPHPで作ってほしい」とお願いした。

本格的なシステム構成

出来上がったシステムの構成：

html/
├── index.php           ← メインエントリーポイント
├── config.php          ← 設定ファイル（分離）
├── lib/
│   └── Blosxom.php     ← コアライブラリ
├── data/
│   ├── index.md        ← トップページ
│   ├── race/           ← 大会参加記
│   ├── archives/       ← 練習記
│   └── monthly/        ← 月間記録
├── flavours/
│   └── html/           ← テンプレート
│       ├── head.html
│       ├── story.html
│       └── foot.html
├── plugins/            ← プラグイン
└── css/
    └── style01.css

設定が分離され、テンプレートでデザインをカスタマイズでき、プラグインで機能拡張できる。本格的なCMSと同等の構成になった。

主な機能

• Markdown → HTML自動変換
• カテゴリ別記事管理
• 前後記事へのナビゲーション
• 抜粋表示（記事一覧）
• 日本語日付フォーマット
• ダークモード対応CSS

---

第5章　WordPressからの移行

過去の記事を活用

冒頭に書いたようにWordPressブログも運用しているので、その記事も新システムに移行したいと思い、Claudeに相談。

変換スクリプト

WordPressからエクスポートしたXMLファイルを、Markdownに変換するスクリプトを作ってもらった。

// WordPress XML → Markdown 変換
// - HTMLをMarkdownに変換
// - 画像パスを新しい場所に変更
// - カテゴリごとにフォルダ分け
// - ファイル名は日付（YYYYMMDD.md）

結果：

10年以上の記事が一括で変換できた。但し、画像リンクなどを修正しなければ、そのままでは使えなさそう。なので、これらの記事は一つづつ確認して追々追加していくことにする。

---

第6章　掲示板システムの追加

コミュニケーション機能

そもそも手打ちHTMLで作成しはじめたのは、昔を懐かしみつつも今風な感じも出したものにしたかった。mixiなどのSNSが出はじめる前までは、個人のランニングサイトが多数あり、それらとの繋がりも少しありました。そういったサイトに必ずあったのが掲示板。今更書込みを期待するわけではありませんが、昔を懐かしむ意味で掲示板も設置することにした。

Claudeと一緒に2つの掲示板を作成

1. PHP版 - モダンなデザイン、スレッド形式
2. Perl CGI版（sunbbs） - レトロな雰囲気、クラシックBBS風

どちらもデータベース不要、テキストファイルでデータ管理。

PHP版はClaudeに相談して一から作成したもの。Perl CGI版はKent WebのSUN BOARDを設置し、セキュリティー面や画像投稿機能追加改造をClaudeにやってもらった。

---

第7章　予約投稿機能

WordPressにある機能が欲しい

小説までClaudeと合作で作ってしまった。
これを公開するのに、一つの小説は明日の日付でよいなと思ったのがきっかけでClaudeに「予約投稿のようなことできますか？」と相談した。

実装の仕組み

Claudeが提案したのは、「未来日付の記事を表示しない」というシンプルなロジック。

フロントマター（記事ファイルの冒頭）で日時を指定：

---
date: 2026-01-01 09:00:00
---

# 記事タイトル

本文...

システムは現在時刻と記事の公開日時を比較し、未来の記事は一覧にも個別URLにも表示しない。

対応パターン

過去の記事（時刻指定なし）は 00:00:00 として扱われるので、問題なく表示される。

プレビュー機能

予約した記事を公開前に確認したい場合は、URLに ?key_word を付ける。

https://easyrunner.jp/run/index.php/race/20250215_kyoto?key_word

これで未来日時の記事もプレビューできる。

---

第8章　縦書き小説表示機能

最も凝った機能

サイトに小説カテゴリを追加することにした。日本の小説は縦書きで読みたい。

Claudeに「小説カテゴリだけ縦書き、横スクロールで電子書籍のように読めるようにしたい」とお願いした。

完成した機能

• 縦書き表示 - writing-mode: vertical-rl でCSS縦書き
• ページモード/スクロールモード切替 - 好みに応じて選択
• 全画面モード - ブラウザUIを非表示にして没入
• 文字サイズ調整 - 4段階で調整可能
• 読書位置の自動記憶 - 7日間保持
• カスタムスクロールバー - モバイル対応
• PWA対応 - ホーム画面に追加してアプリ化
• ダークモード完全対応

他のカテゴリには一切影響しないよう、すべてのCSSセレクタが body.category-novels で始まるように設計されている。

---

最後に ― AIとの協働で学んだこと

手打ちHTMLでも悪くはないがもっと楽な方法はないものかという思いと、興味本位なところもあった。プログラミングの知識はほとんどなく、PHPもJavaScriptも書いたことがない。

しかし、AIと対話しながら要望を伝え、出てきたコードを試し、問題点をフィードバックする。このサイクルを繰り返すことで、本格的なブログシステムが完成した。

完成したシステムの機能まとめ

• Blosxom風CMS（Markdown → HTML自動変換）
• カテゴリ別記事管理（race, archives, monthly, novels）
• 予約投稿機能（日時指定で自動公開）
• 小説カテゴリ専用の縦書き表示
• ページ/スクロールモード切替
• 全画面モード
• 文字サイズ調整（4段階）
• 読書位置の自動記憶
• PWA対応（アプリ化）
• アフィリエイト統合
• ダークモード完全対応
• PC/スマホ両対応
• PHP掲示板・Perl CGI掲示板
• WordPressからの記事移行ツール

プログラム素人でもここまでできる時代

AIは道具に過ぎない。しかし、「こうしたい」という明確なビジョンがあれば、AIがそれを形にしてくれる。問題点を的確に指摘するフィードバック、粘り強く改善を続ける姿勢。これらがあれば、プログラミング経験がなくても本格的なシステムを作ることができる。

60歳を過ぎてから始めた新しい挑戦。AIとの協働という現代ならではの方法で、自分だけのブログシステムを完成させることができた。

今も要望事項が出てきており、もう暫くは改善作業が続きそうだ。

---

当初は「Easy Running 練習館」としておりましたが、WordPressブログの方とも統合することにしたので、「練習館」は外しております。