自作CMSを作ったのでメモを残しておこうと思います。
今書いているこのブログを、Wordpressから移行してみました。
このブログの場合は複雑な記事構成を作る気がないので、機能としてはわりとシンプルです。
前回このブログを書いていたのはちょうど2年前の3月のようです。
何か新しいことに挑戦したくなるんですかね3月は。
記事編集画面はこんな感じ。
使用したライブラリ
何もかも作りたいとかいう思いは全くないので、使えそうなものを使いました。
デザインまわりは Bootstrap
管理画面は主に Datatables
記事編集に TinyMCE
タグ入力に Tagify
公開画面での画像表示に Tobii、動画は Plyr
フレームワーク？コンポーネント？とかよくわからないものもあるようです。
よくわからないが故に必要性もわからないのでスルー。
AIはやたらと推してくるし、前提を勝手に決めつけて話を進めてくるのでそこはストレス。
彼らの前提はReactやVueらしいです。私は興味ないです。
画像と動画の管理
興味本位でCloudflareのR2で画像や動画を管理するようにしました。
CMSからWorker経由でサムネを作りR2に保存します。
サムネサイズや許可するMIME TYPEなどもCMSで設定してWorker経由でD1へも反映します。
CMS自体をPHPではなくJSで書けば、個人のちょっとしたブログくらいはCloudflareの無料枠で事足りそう。
ただ今回R2/D1/Workersを使ってみて、管理画面の使い勝手が悪いというかとても分かりにくいので、管理も煩雑になりそうなので私はそこまでしなくてもいいかなと思いました。
アクセス解析
今はアクセス解析もCloudflareが使えます。
CMS作るまで知りませんでした。
これはR2やWorkersみたいな複雑なことはなく、大昔からあるスクリプト貼り付けタイプ。
ドメインがCloudlfareのものであればスクリプトの貼り付けも不要なようですが、取得項目がドメインとスクリプトで違うようです。
APIを使ってデータを取得することもできるので、自作CMSに簡易集計版を表示するようにしました。
Claude CodeとCodex
CMSはAIに作ってもらいました。
実は1年くらい前にも挑戦したのですが、その時はChatGPTにコードを貼りつけながら進めていて途中で面倒になってやめてしまいました。
最近AIのコーディングがだいぶ良くなったと聞きつけて再挑戦して今に至ります。
ネットの人たちみたいに1日で、とはいかないけど、基本機能は比較的すぐに作れます。
あとは何をどこまで作りこみたいか次第ですね。
AIも普通にバグは出すし、全体最適を考えた修正も基本しません。
では彼らの仕事をどう管理するか。
よく見かけるClaude Codeに書かせてCodexにコードをレビューさせる、というのを私もやっていました。
ただ途中からはClaude Codeの出すプランをCodexにレビューさせるようになりました。
Codexからの重要度の高い指摘が無くなってからClaude Codeに実装を許可しています。
このやり方だと変なバグは起きにくいと思います。
CLAUDE.mdの書き方はネットでいろいろ出ていますが、個人的に書いてよかったなと思うのは以下の内容。
# Workflow
## 作業前
Planを立てたら、`tasks/todo.md` にチェック可能な項目として記載する
## 作業中
- 設計判断をしたら概要を docs/adr/ に連番をつけて残す
- タスクが完了するごとに `tasks/todo.md` の該当項目に完了マークをつける
## 作業後
- 作業が終わったら必ずコミットする
- `docs/CHANGELOG.md` にコミットNoと変更内容を記載する
他にもいろいろ書いてはみましたが、聞き入れられているのかよくわかりませんでした。
ここに指示しているドキュメントはAI自身がバグの根本原因の調査や修正方法の検討によく見直していました。
今後の展開
私は何かと書き残すのが好きで他にもブログがあるのですが、それらはもう少し複雑な使い方をしています。
なのでこのCMSをベースにWordpressのテーマやプラグインを作って使ってみようかなと思っています。
面倒になってまた2年後になるかもしれませんが。