中学生がCMSを作る①

以前、今回と同じようにCMSを作成しようとして挫折したことあったのですが、
U22などを経て自分も実力が上がったと思ったので再挑戦したく思い、また新たにCMSを
作ることにしたので、今後記事にしてまとめていきたいと思います。

※これと同じものを自分のブログにも投稿しています。

Wordpresは遅すぎる

以前僕はlolipopの250円のプランや、Xfree等を利用してWordpressを用いたWebサイトを公開していたのですが、
あまりにも遅くまさにもっさりとした感じでした。
管理画面も同様でとても記事を投稿しようとは思えないほどでした。(決して三日坊主な性格だったからじゃない)
キャッシュの設定などをしても限界を感じ半年ほど埃を被った状態になり、これはダメだとサイトを閉鎖しました。

NuxtとNetlifyとの出会い

しかし、そんな僕にも転機(？)が訪れました。つい三か月ほど前に僕はU22プログラミングコンテストの作品作成のために、VueとそのフレームワークであるNuxt、そしてそれらを公開するNetlifyに出会いました。
これまでWordpressではアクセスするたびにWebページをレンダリングして表示していたのに、なんとNuxtを使えば、
あらかじめHTMLファイルを作成して、しかもNetlifyを使えば無料でそれを公開できて感動し涙しました。
そしてノリでブログを作ったりしてもっと感動しました。　詳しくは=>https://inaridiy.tk/

全世界がSSGを使ってWebサイトを公開したらいいじゃない!!と本気で思いました。
しかし、エンジニアの方ならまだしも、全国の大半のブロガーさんたちには自分でコードを書いたりなんでできないと三日後くらいに気が付きました。

エンジニアの中ではヘッドレスCMSだのなんだの言ってますがフロントエンドのコードは自前で書かないといけないため、一般の方にはハードルが高すぎます。
やっぱりWordPressのように簡単にフロント側まで構築できたほうがいいです。

そこで誰でも簡単にSSGの恩恵を受けれる次世代(？)なCMSを作って世にこの感動をあじわってほしいとおもったのです。

CMSについて

まずCMSを作るにあたって目標のようなものを考えました。
それがこちらです。

目標

WordPressのシェアを0.1%奪うこと
WordPressより動作速度が速いこと
SSGを使えること

このようにかなり高く設定しました。これを達成するためにまずWordPressの強みを改めてまとめてみました。

WordPressの強み

1「テーマを簡単に導入できて自分好みにカスタマイズできる」これを筆頭に
2「プラグインで簡単に機能を追加できる」、
3「Dockerが配布されていたり、レンタルサーバーの機能で簡単に公開できたりと導入しやすい」
など様々な強みがあり、もうほんとすごいに尽きます。
さすが世界のサイトの40%を占めているだけはあります。

まず、3の強みについて考えてみます。

　CMSをどんなユーザーが使うのか

さきほど書いたWordPressの強みにあった通り、WordPressは簡単に誰もが公開できる環境がそろっています。
目標を達成するにはWordPressのように誰でも簡単にサイトを作成できるようにしないといけないです。
そこで様々なユーザーに対応するためにフロント側とバックエンド側を完全に分けて実装し、
フロント側はバックエンド側からサイトのテーマとコンテンツのデータを取得して静的サイトを生成します。
バックエンド側はWordPressの管理画面のような感覚でWebサイトの管理を行えるようにします。

そしてバックエンド側はMicroCMSのようにサービスとしても提供し、ユーザーは自前のサーバーを用意してバックエンドサーバーを立てるかサービスを利用するか選べるようにします。

フロント側はNetlifyや自前のサーバーで公開してもらいます。

こんな感じでCMSを作成すればかなり使いやすくなると思います。

次に WordPressの1番の強みについて考えます。

フロントエンドのフレームワークについて

WordPressの一番の強みはHTMLやCSSについて一切知らない人でもテーマを導入し適当にカスタマイズすれば
おしゃれでかっこいいサイトができてしまうことだと思います。

そこで僕が使えるフロントエンドの技術を使ってテーマシステムを実装する場合について考えてみます。

Nuxt

おそらく一番よくつかわれていいるVueのフレームワークです。
これが使えれば楽なんですがコンポーネントをダウンロードしてきて使うっていうことが
できるのか怪しいです。

Gridsome

ついさっき知ったのですがVueのSSG用のフレームワークです。
デフォルトで高速らしく、画像圧縮機能なんかもついてます。

ejs + glup

node.jsのテンプレートエンジンの一つであるejsをglupを使ってSSGをします。

以上の3つが今のところの候補です。
しかし、どれもまだ不透明な点が多いためいったん保留として、後日
簡易的なテーマシステムを実装してみて比較したいと思います。

バックエンドの実装はおとなしくexpressを使いたいと思っています。
遅いらしいので変えるかもしれないですが。

　終わりに

以上で今のところ考えている簡易的な構想は終わりです。
また成果が出次第記事を投稿いたします。