カスタムテーマ Clear Layers Theme を作ってみた

しばらくテーマ Byte を使用していたけど、そろそろ気分転換を兼ねてテーマを変更することにした。Drupal サイトにも多くのテーマはあるけれど、Bootstrap を親テーマにしたサブテーマにすると、自分の技術力では独自性を表現することは難しく、どうしても Bootstrap 的な外観になってしまう。

そこで今回は、Starterkitコアテーマ をもとに、親テーマに依存しないカスタムテーマとして作成することにした。最初はテーマ  Prototype をもとにサブテーマを作ろうかと思ったけれど、Stable 9 に依存していることが分かったから却下した。

ただ、独自カスタムテーマの場合は Drupal Core の更新で何らかの修正があってもカスタムテーマには反映されないので、メンテナンスは自己責任になる。でも結局、サブテーマであっても親テーマの更新には注意が必要なので、やることは（多くなっても）基本的に同じ。であれば、Bootstrap にこだわらなくてもいいか、という感じで独自のカスタムテーマにしてみた。

とはいえ、自分で最初からテーマを作るとなると完成までどれだけ日数がかかるか見当もつかない。

そこで活用したのが生成 AI の ChatGPT。ローカル LLM の Qwen3.8 27B でも時間をかければ何とかなったかもしれないけど、思考速度では到底叶わないから有償の ChatGPT Plus（月額約3,000円：$20）を利用した。

Drupal のカスタムテーマを作りたいと思います。

外観は Liquid Glass っぽいデザインにしてください。

サブテーマではなく、Starterkit を元に、独自のカスタムテーマとしてください。

これくらいのプロンプトから始めて、少しずつ会話を重ねてこのサイトのテーマが完成した。なんだかんだで 5 時間リセットの利用量が 2 回分で、約 10 時間と GitHub での公開まで終わっている。慣れたらもっと短い時間で開発できるだろう。

最初、Liquid Glass Theme という名称で作成したから、あらかじめ theme/custom/liquidglass_theme を用意して、配置した AGENTS.md は次の内容で作業を開始した。これも、ChatGPT との会話で準備したもの。
ただし、テーマ作成が完了した後で、名称を変更することにした。

# LiquidGlass Theme の開発指示

- 回答は基本的に日本語で記述してください。
- このディレクトリの機械名は `liquidglass_theme`、表示名は `LiquidGlass Theme` です。
- Drupal Core Starterkit 11.4.9 から生成した独立テーマです。`base theme: false` を維持し、Prototype・Stable 9・Jisaba Theme を親テーマや実行時依存にしないでください。
- Liquid Glass の透過、ぼかし、奥行き、余白を生かし、Bootstrap らしい外観を避けてください。
- Single Directory Components (SDC) を優先し、コンポーネント固有の Twig・CSS・JavaScript は各 SDC 内に配置してください。
- Canvas 用コンポーネントの props / slots schema を適切に定義してください。公開済みの ID・props・slots を変更する場合は、既存のページとテンプレートの移行方法を確認してください。
- 明暗モードは訪問者の OS 設定を初期値とし、コンパクトな切り替え UI で明示的にも変更できるようにしてください。
- 配色、メディア背景画像、透過、ぼかし、奥行き、ブロック間・左右の余白はテーマ設定から管理できるようにしてください。
- 変更は原則としてこのディレクトリ内で行ってください。Core、contrib、vendor は参照のみとし、直接修正しないでください。
- データベースを SQL で直接変更しないでください。設定やコンテンツの移行は Drupal API を使用し、実行する Drush コマンドと影響を事前に提示してください。
- Core・Canvas の更新時には、標準テンプレートとの差分、匿名／ログイン時の表示、フォーム、明暗モード、Canvas の編集・公開とデータ診断を確認してください。

あとは良い感じにカスタムテーマを作ってくれるから、細かな指示を何度か与えれば完成。特に Canvas で編集することを優先しているから、実際に修正の様子を見ながら開発を進めた。

公開した GitHub リポジトリは https://github.com/NBE03xxx/ClearLayersTheme。

最初は Liquid Glass Theme として開発したけれど、Apple の商標にひっかかると怖いから、慌ててテーマの名称、GitHub リポジトリとも変更した。