はじめに
こんにちは！エンジニアの河瀬です！
最近絶えず盛り上がりを見せる生成AI、ほんとすごいですよね
ぼくも普段からChatGPTやGitHub Copilotなどを利用していて、今では手放せない存在になってます笑
そんな中浮かんだ疑問
「「「もう人間がほとんど手を加えなくても、CMSのテーマ開発できるんじゃないか…？」」」
気になりませんか…？なりますよね…？
ということで今回は、AIを活用してbaserCMS5のテーマを開発してみたいと思います！
早速やっていきましょう！！！！
デザインを作ろう！
この記事を書くにあたって、まずはじめにぶつかった壁がこれです
🥺「テーマ化するデザイン、誰が作るの」
テーマを作るとはいうものの、デザインデータがなければ始まらないじゃないか
どこかに使えるデザインデータはないかな？と探しつつもなかなか見つからず、早くも頓挫しかけていたところ
🧙🏻♂️「Google Stitchっていう便利なAIツールがあるよ」
先輩エンジニアに教えていただきました！
Google Stitch…？調べてみたところこんなやつらしいです
- 2025/05~β版が公開
- 自然言語で指示を入力するとWeb UIを自動生成
- 生成されたデザインをFigmaやHTML/CSSのコードにすることも可能
ふーん、ピッタリじゃん
ちなみにこの引用っぽいデザインもChatGPTに一瞬で作ってもらってます…笑
ということでGoogle Stitchを使ってみましょう！
https://stitch.withgoogle.com/
にアクセスすることで誰でも無料で利用できるみたいです！
スタイリッシュなかっこいい画面が出てきたので指示を入れてみます
サイトの仕様はこんこんな感じ
- baserCMSのテーマとする
- おしゃれで温かみのあるデザイン
- TOPページではブログを6件表示させる仕様
- ブログの一覧ページと詳細ページも欲しい
おぉ、まぁまぁいい感じじゃん！
気になるところの修正を2回ほど依頼して、今回のデザインはこちらで完成にしたいと思います！
デザインをクリックしてソースを表示（HTML / CSS）して、それぞれをファイルに貼り付けてみます！
テーマとして組み込もう！
さて、デザインとHTMLが完成したのでここからはCopilotを使ってbaserCMSのテーマ化をしていきましょう
必要な処理はこちらです
- タイトル表示などをbaserCMSのタグに変換
- 共通の箇所を切り出してエレメント化
- ブログを動的に表示
完全に自動化することは難しいと思いますが、どこまでできるのか楽しみですね！
こちらの公式ガイドを参考にテーマ開発の準備をしました！
https://baserproject.github.io/5/theme/develop_theme
それでは、top.phpから各HTMLをphpに変換していきます！
まずは、共通パーツを切り出してエレメント化してみましょう
今回はわかりやすく、ヘッダーとフッターのみをエレメント化します
公式ドキュメントをもとに/plugins/BlogTheme/templates/layout/にtop.php、default.phpを作成し、先程AIに生成してもらったHTMLを貼り付けます
top.phpにはトップページのHTMLを、default.phpにはブログ一覧ページのHTMLを貼り付けましょう
次に、plugins/BlogTheme/templates/element/にheader.phpとfooter.phpを作成します、中身は空のままで大丈夫です
続いて、Copilotに右のような指示を出してみます
「plugins/BlogTheme/templates/layout/のdefault.phpとtop.phpのheaderから/headerまでを切り出して$this->BcBaser->header()に置き換えてください。切り出したHTMLはplugins/BlogTheme/templates/element/header.phpに記載してください
plugins/BlogTheme/templates/layout/のdefault.phpとtop.phpのfooterから/footerまでを切り出してBcBaser->footer()に置き換えてください。切り出したHTMLはplugins/BlogTheme/templates/element/footer.phpに記載してください」
す…すげぇ…！！！
画像では分かりづらいですが、確かに共通パーツを切り出してbaserCMSの関数へ変換、header.phpとfooter.phpに記載できています！これはすごい…
と思っていたのですがここで問題が発生しました
共通パーツの切り出しはうまくいったのですが、header.phpとfooter.phpに移すときに、headerタグとfooterタグが消えていました…
次にタイトルタグをbaserCMSの関数に置き換えてみましょう
右のような指示をしてみます
先ほどは、具体的なphpのコードを指定しましたが、今回は少し曖昧な指示にしました
他のファイルから学習して正解を出してくれるでしょうか…？
うわぁ、惜しい…
$this->BcBaser->title()という関数は見つけられたものの、titleタグが残ったままになっているようです
このままではtitleタグが二重に出力されてしまいます
これは想定外…仕方がないので手動で修正します
ブログ機能を実装しよう！
さて、今回の記事のなかで一番難しいであろう箇所、ブログ機能の実装をしてみましょう
とはいえ、正直ここまでの流れ的にちょっと難易度高そうな気がするので、ある程度の切り分けを行ったうえで、Copilotに指示を出してみます
ブログ機能を実装するのに必要なファイルを作成したので、ダメ元で以下のように指示してみます
💬 「plugins/BlogTheme/templates/Blog/default/index.phpにブログの一覧画面を動的に出力するコードを書いてください
plugins/bc-front/templates/plugin/BcBlog/Blog/default/index.phpを参考にしてください
出力されるHTMLの構造はwebroot/blog_index.htmlの65行目から207行目までのようにしてください」
実行した結果、index.phpには一見悪くなさそうなコードが生成されましたが、An Internal Error Has Occurred.が表示されてしまいました
エラーの原因は「ファイル内で呼び出しているメソッドの引数が違うよ」とのこと
なるほど…bc-frontのindex.phpの記述では今回作成しているテーマのHTML構造的にアイキャッチが取得できないようですね。それを最適化させるために、別の方法で実装してくれたみたいです、結果的に失敗していますが、最適化するためにおそらく別のファイルも見に行ってくれているようです
おそらくですが、Google Stitchの生成したcssにTailwind CSSを利用していることが影響して、Copilotにとって学習材料が少なかったことが失敗の原因な気がしています
アイキャッチの取得についてだけは、手動で調整することに…
画像の取得方法を変えたところ正常に動作することを確認できました！
それ以外の部分はほとんど完璧に実装されているようです、すごい！
記事の登録日タイトルや登録日などもしっかり動的に表示されていますね、記事の追加も問題なくできました！詳細ページへのリンクの出力もできているようなので、これはほぼ成功と言ってもいいのではないでしょうか…
次に詳細ページを作ってみましょう
右のような指示を出してみます
さすがに少し曖昧過ぎるかな？と思いつつとりあえずやってみましょう
💬 「ありがとうございます
完璧です
同じ要領でsingle.phpも作成してください」
意外とうまくいきましたね…笑
ただ画像のサイズが小さいようです、調べてみたところやはりbc-frontにある記載の通りにアイキャッチを出そうとすると、HTML構造的にうまくいかないようです
画像周りは、今回は手動での調整が必要そうですね
画像の出力方法を調整して詳細ページの組み込みは一旦完了としたいと思います！
表示についてはほぼ問題なさそうに見えます！
パンくずのURLやページネーションについては、他のファイルを呼び出す仕様なので、今回は見ないことにします
ではでは最後にトップページへブログ記事を表示させるために、posts.phpを作成してみましょう
とはいってもどんな指示をしたらいいんだろう…
記事を書いていて思ったのですが、AIに要件を正確に伝えるのって意外と難しいです
熟考した末、右のような指示を出すことにしました
かなり迷いましたが、baserCMSの関数はこちらから指定しました
かなり長くなってしまったのでちょっと不安ですがやってみましょう
💬 「plugins/BlogTheme/templates/Blog/default/posts.phpにトップページにブログ記事一覧を動的に出力するコードを書いてください
plugins/bc-front/templates/plugin/BcBlog/Blog/default/posts.phpを参考にしてください
出力されるHTMLの構造はplugins/BlogTheme/templates/layout/top.phpの32行目から91行目までのようにしてください
さらに、plugins/BlogTheme/templates/layout/top.phpの32行目から91行目までを切り取り$this->BcBaser->blogPosts('news', 12) ?>に置き換えてください」
またもやなんかいい感じにコードを出してくれたのですが、An Internal Error Has Occurred.が出てしまいました
やっぱり画像の取得で失敗しているみたいです。でも逆に画像以外で大きくコケた箇所が無かったので、かなり驚きました
とりあえず動く形に、ここも手動でどうにかしましょう
完成！
画像表示の仕組みを調整して無事に表示されました！記事へのリンクや日付の動的表示まで完璧ですね！
トップページ、ブログ一覧・詳細ページの実装ができたので今回はこれにて完成にしたいと思います！
いやぁ、思っていた以上に優秀でしたね
普段の業務にも活かせそうなテクニックもあってとても楽しかったです！
まとめ
今回は、AIを活用してbaserCMSのテーマ開発をしてみました！
さすがに人間がほとんど手を加えずにテーマを開発するのは限界がありましたが、ドキュメントを読ませるなど、baserCMSに特化して学習させたAIであればもっと高い精度でコードを書いてくれそうです！！
これから改良されていく点はあると思いますが、たたき台を作るためにAIを活用することで、十分効率化を図れそうですね
AIを使う上で、「抽象的なものをいかに具体的にできるか」が大切だと改めて感じました
日々進化を続ける技術にアンテナを張って、新しい技術に積極的に触れてみたいと思います！
ではまた次回お会いしましょう
