こゆめ当個人サイトの自作CMSの設計

このウェブサイト「こゆめ」は、一時期はWordPressを使うなどしていましたが、現在はPHPで自作CMSを構築しています。
何故WordPressじゃいけなかったのか、自作にあたって何を妥協したか、メモとして残しておきます。

尚、2023年2月8日に早すぎる大幅改善をしました。詳細は「当個人サイトの自作CMSの設計(2回目)」まで。

何故自作にしたいか

WordPressの何が不満だったか

  • データの量が多く、バックアップに時間がかかる
  • バックアップデータを用いた復元にも微妙に手間がかかる
  • バージョンアップで使い方が変わる
  • ソース内に余計なものが多い
  • 要素にCSSクラスを追加しようとすると微妙に手間がかかる
  • 編集画面の情報量が多すぎて使い勝手が悪い

静的HTMLの何が不満か

  • ソース内に段落とか改行とか入れないといけない
  • 共通部分の変更が面倒
  • ちょっとだけ更新したい時にその場で素早くできない

どんなCMSを求めていたか

  • FTPだけですぐにバックアップできる軽さとデータ形式
  • シンプルでコンパクトな管理画面の見た目
  • コピペが楽な編集画面

自作が最善であると思った理由

  • 世のCMSは軒並み管理画面がうるさい見た目
  • 世の中JavaScriptのモジュールだかライブラリだかを使いすぎ
  • 既存のCMSの仕様を把握するよりその言語を把握した方が学習コストがかからない

どういうCMSにしたいか

自作CMSに入れたい機能

マークダウン
できる限り素のテキストをそのまま取り扱えること
フラットファイル
DB無しにファイルとしてまとめてバックアップできること
いつかサイトを止めてもローカルにあるデータが見やすいこと(SQLiteだとこれができない)
ウィジェット
共通部分もマークダウンで取り扱えること
画像アップロード
特定の場所にアップロードできること

なくてもいい部分

タグ
本文に全てを詰め込めば良し
アカウント管理
下手なことするとセキュリティが心配なので無い方が良い
事前プレビュー
マークダウンなら本番勝負でも問題ない
自動整列
むしろ手動で並べたい
画像加工
使い方に合わせて手動で加工すればいい

どういう実装をしたか

各ページテキストファイル

全ての階層のファイルを1つのフォルダの中に格納。

ファイル名(日本語)
ページタイトル
指定の記号で区切ることによって階層構造も含める(=上の階層のページ名を変えたい時は大変)
本文
記事の本文テキストをh1含めて全て自作マークダウンで入力

その他のテキストファイル

共通部分用
共通部分ごとに内容を自作マークダウンで入力
メタ情報用
ページのファイル名URLスラッグ抜粋をCSV形式で入力

ページ作成・編集・削除の手順

  1. 管理画面にログイン
  2. フォームのテキスト欄に指定の書式で階層を含めたタイトルを入力
  3. テキストエリアに本文を入力(自作マークダウンの入力補助ボタンあり)
  4. submitすると、ファイル名が既存の場合は上書き、違う場合は新規作成(この時点ではページ生成されず)
  5. メタ情報テキストに手動で行を追加する(ここでURLが生成され閲覧可能に)
ページ編集
リストから選ぶとファイル名と本文がフォームに読み込まれる。後は上記4と同じ。
ページ削除
特定の共通部分ファイル名以外のものはチェックボックスでまとめてファイルを削除可能。メタ情報テキストからは手動で削除する必要がある。ファイルが無ければページ生成はされない。

表示ページの生成の手順

  1. URLスラッグでページにアクセス
  2. メタ情報テキストからページ情報をリスト化
  3. URLスラッグがその中に存在しなかったら404
  4. ページファイルを読み込み各情報とともに返答
  5. パンくずリストはファイル名から生成

その他の特徴

  • 自作マークダウンに、セクションにIDを設定できる機能を付けた
  • 自作マークダウンに、メタ情報からリンクと抜粋を返す機能を付けた(順番は手動にしたいので1個ずつ指定)

改善していきたい部分

  • メタ情報リストがテキスト編集で視認性が悪いので、編集方法を考えたい
  • 各ページ編集画面からメタ情報にコピーするテキストを考えるのに、一時的なテキストエリアを用意するかしたい
  • SNSなどからの参照用に日付やアイキャッチ画像の追加を検討したい