microCMSのフロント管理ツールをphpで作ってみた
microCMSのフロント管理ツールをphpで作ってみた
「PHPで開発したいけど、ヘッドレスCMSのフロントエンドはJavaScriptフレームワークが主流だしなぁ...PHP使いたいなぁ...」
そんなお気持ちのPHPerの方も多いのではないでしょうか？
私も、普段はPHPで開発をしているのですが、ちょっとしたブログやコンテンツ管理システムを開発する際に、microCMSの便利な機能を活用したいと思っていました。
しかし、microCMSのフロントエンド開発は、JavaScriptフレームワークが中心で、PHPで開発するとなると、どうしても選択肢が限られてしまうのが現状です。
私自身も、microCMSなどのヘッドレスCMSを利用する場合は、ReactやSvelteでフロントエンドを開発していました。
そこで、私はPHPでmicroCMSのフロントエンド開発をもっと快適に行うために、自作ツールを開発しました。
このツールは、microCMSのAPIを活用して、PHPのテンプレートレンダリングでフロントエンドを構築することを可能にするものです。
なぜPHPでmicroCMSのフロントエンド開発をしたいのか？
microCMSは、コンテンツ管理やメディア管理など、使いやすい管理画面が用意されているので、非常に便利なサービスです。
また、microCMSテンプレートというサービスでは、テンプレートを選ぶだけでAPIとフロントエンドリポジトリを生成してくれるので、フロントエンド開発の敷居がぐっと下がります。
しかし、microCMSテンプレートのほとんどはJavaScriptフレームワークで作られており、PHPerである私にとって、少し残念な気持ちでした。
「PHPで開発したい」「PHPの知識を活かしたい」「microCMSの便利な機能をPHPで利用したい」
これらの思いから、私はPHPでmicroCMSのフロントエンドを開発できるツールを作ることを決意しました。
開発のコンセプト：シンプルで使いやすいツール
開発にあたっては、以下のコンセプトを掲げました。
- シンプルで使いやすいツール: 複雑な設定や操作なしに、誰でも簡単に利用できるように
- PHPベースの開発: PHPの知識を活かして、スムーズな開発を実現
- WordPressの機能を参考に: WordPressの使いやすさを参考に、直感的な操作を実現
ツールの機能紹介
このツールは、以下の機能を搭載しています。
- API設定: microCMSのAPIキーなどの設定を簡単に行えます。
- テーマ選択/カスタマイズ: 適応するテーマを選択して、各テーマが用意している設定を元にデザインをカスタマイズできます。
- アカウント編集: ツールの管理画面にログインするためのアカウント情報を編集できます。
- SEO設定: メタタグやタイトルなどを設定して、SEO対策を強化できます。
- キャッシュ: APIデータを定期キャッシュして、画面表示の遅延を極力なくします。
その他にも、robots.txtやトラッキングコードの設定などの機能もあります。
以下インストール画面/管理画面スクショ
開発の工夫：技術スタックと運用
このツールは、以下の技術スタックを用いて開発しました。
- バックエンド: Slim4 (PHPフレームワーク)
- フロントエンド: AlpineJS, HTMX, MasterCSS
- データベース: なし (microCMSのAPIを直接利用)
データベースを使わずに、microCMSのAPIを直接利用することで、シンプルで軽量なシステムを実現しました。また、フロントエンドにはAlpineJS、HTMXを採用することで、ある程度レスポンシブなユーザーインターフェースを実現しました。
運用については、よくあるWordPressの運用のように、LOLIPOPやXserverなどのレンタルサーバーで利用することを想定しているので、サンプルサイトはCORESERVERというリーズナブルなサーバーに設置し、動作確認を行いました。
Google Cloud RunやAWS App Runnerなどのサーバーレス環境での動作することも確認しています
WordPressから学んだこと
このツールは、WordPressの管理画面を参考に設計されています。
特に、以下の機能はWordPressから着想を得ました。
- テーマ選択/カスタマイズ: WordPressのテーマ選択機能のように、様々なサイト形態に対応したテーマを選択できるようにしました。
- SEO設定: WordPressのSEO設定機能のように、メタタグやタイトルなどを設定して、SEO対策を強化できるようにしました。
microCMSテンプレート掲載へ
ある程度開発が進んだところで、このツールを使って作成した簡単なブログサイト用のmicroCMSテンプレートを作成し、microCMSテンプレートへの掲載申請を行いました。
microCMSテンプレートへの掲載申請には審査があり、実際に動作確認してもらえるので、とても緊張しました。
しかし、審査を通じて、自分のツールにまだ改善点があることに気づき、開発意欲がさらに高まりました。
審査では、microCMSの担当者の方から、以下のような貴重なフィードバックをいただきました。
- README.mdに関する改善点
- 動作手順に関する改善点
- コンソールエラーに関する確認
これらのフィードバックを参考に、ツールを改善し、microCMSテンプレートに掲載することができました。
実際に掲載されたテンプレートはこちら
今後の展望と課題：microCMS以外への対応
今後の展望としては、以下の課題解決と更なる発展を目指しています。
- 開発マニュアル作成: とにもかくにも使ってもらうには、開発者向けに、より詳細な開発マニュアルを作成することで、テーマ開発を容易にしたいと考えています。
- 機能拡張: RSS対応やテーマのアップロード/ダウンロードなどの機能を追加して、幅広い用途に対応できるツールを目指します。
- microCMS以外のCMSへの対応: このツールは、現在microCMSのAPIに特化していますが、将来的には他のヘッドレスCMSにも対応できるように開発を進めていきたいと考えています。
- テーマの追加: テーマについては、現在ブログサイトを構築するためのものしかものしか用意していないので、別のサイト形態に対応するテーマを追加して、またmicroCMSテンプレートに掲載申請したいと考えています。
個人開発でやっているので、中々課題などを消化するのが時間的に難しいですが、せっかく作ったので対応していきたい次第です！
まとめ
このツールは、PHPエンジニアがmicroCMSのフロントエンド開発をより快適に行えるように開発したものです。
シンプルな設計、PHPベースの開発、microCMSとの連携、WordPressからの学びを活かした機能など、自分なりに工夫を凝らしました。
PHPでmicroCMSのフロントエンド開発に興味がある方は、ぜひこのツールを試してみてください。
この記事が、あなたのmicroCMSでの開発をより楽しく、より効率的にする一助になれば幸いです。
Discussion