自社オリジナルCMSを作った話①
初めに
初めまして。大阪のWeb制作会社でお仕事してるプログラマです。
個人開発してたCMSが社内プロジェクトに昇格し、近々自社サービスとして正式ローンチしそうなところまできたので、せっかくなのでことの経緯だったり、サービス紹介でもしていこうかなと思いましたまる。
このシリーズでは技術的な話はあんまり出さないので、ゆるーく読んでもらえるとうれしいです
※CMS開発における技術的な話は別途あげていければ〜
なんで作ったの？
CMSだらけの世界
世にあるCMS多すぎ。選ぶのもだるい。
多様性はいいけど、多すぎると何を選べばいいのかわからん。
「ほならねWP一択でええやん」ってなっちゃってる弊社現状。
WordPressは確かに便利
WPは便利で人気もある。それゆえに狙われやすい。セキュリティの問題とかマジで気になる。
プラグインも多いし、それぞれにいい点とダメな点があるからどれを選ぶかって話も永遠。
数年前のWP案件のバージョンアップ作業とかきて、マジで何度も地獄を見たこともある。
スタティックサイトもイマイチ
弊社では、CMSを使わずNuxtやNextを使って開発することも多い。
それを静的HTMLにビルドして納品っていうのが、よくあるケース。でも、ちょっとした文言変更でも再ビルドしなきゃならないのがめんどくさい。もはや何もかもめんどくさい。
ランニングコストで稼ぎたい
せっかく弊社にはプランナーからディレクター、デザイナ、フロントエンドエンジニア、バックエンドエンジニアがいて1から10まで社内完結できる体制があるのだから、他社CMSサービス使うより自分達が使いやすいものを作ってしまおう。
合わせて最終的には、イニシャルコストを下げつつ、長期的に利益を出せるような仕組みを作りたい。
さっそく作ってゆく
まずは開発言語やインフラの選定
- 開発言語・FW・開発環境
Ruby on Rails, Docker - DB
MySQL - ソース管理
Github（private） - インフラ
AWS（ECS、RDS、S3、Code３兄弟、CloudFront等、インフラ全般）
特に何も考えず、誰にも相談せず、その時自分がメインで触ってるものにしました。
相談して決めろって？元々個人開発で、一人で企画して一人で開発だからなんでも良いのだ。
必要な機能を洗い出して作ってゆく
- クラウドサービス化するにあたり、必要になる機能
- CMSとして必要な機能
- 他社サービスと差別化するための機能
- フロントエンド開発をスムーズに行うために必要な機能
（主にAPI仕様書的なもの等） - JAMStackを想定したときに必要になる機能
ざっくり上記のグループごとに機能を洗い出して、土台から作ってく。
この辺りの詳細は別記事で今後書く。書きたい。書けたらいいな。
プログラミングはマジでパレートの法則の通り
個人開発だったり、スタートアップの開発は早さ命（と思ってる）。
バグが潜んでようが、足りてない機能があろうが、運用カバーが必要だろうが、まずは土台となる機能ができてお披露目できるレベルであれば良いのだ。
そうすりゃ想定していた時間を数分の１の時間でできる。
いきなりバグもない完璧なものを目指して、お披露目までに２年かかりましたーとかナンセンスすぎる。というか飽きる。個人開発ならなおさら飽きてやめてしまってる。
とりあえず思った通り動くものができたらテンション上がるのがプログラマって生き物な訳で、
Hello World で嬉しくなったあの頃から基本変わらない、所詮子供なんです。
嬉しかったり楽しかいからこそ続けられる。これを忘れちゃあいけない。
話が逸れました。
パレートの法則
通称「２８の法則」。
全体の成果や影響の大部分（約80%）は、全体の要素や努力の一部（約20%）によって生じる
初めて聞いた人はちょっとググって読んだ方が良い。
出来上がったものの概要
クラウドサービス型ヘッドレスCMS
だって~~フロントコーディングめんどくさいやん？~~JAMStackとかやりたいやん？
なので、AWSCodePiplineとかの連携を管理画面から設定できるようにして、
更新があった時とか、公開時間になったタイミングでフロントエンドのビルドを自動でキックできる。
APIはRESTful？いいえ、GraphQL
弊社フロントエンドチームとの相談の上、 APIはGraphQLを採用。
何気にこのお陰でCMS自体の開発もめちゃくちゃ楽になった...
GraphQLの仕様書は管理画面から参照できる。
管理画面からテーブルを作れる
お知らせ、スライドショー、お問合せなんかは基本機能として実装。
必要最小限の項目だけデフォで持たせて、WPのカスタムフィールドみたいなことで自由に定義。
上記だけではさすがにCMSと名乗るにはアレなので、ノーコードで必要なテーブルを作れるように実装。
テーブル間で親子関係定義したりもできる。
テーブル作っちゃえばAPIも勝手に生成される。
問い合わせや申込みフォームも自由自在
○○申込みなど、特定のフォームも作れるように。
弊社コーポレートでは、リクルートのエントリーをこの機能を使って実装
マルチ言語対応の自動配信メール
自動配信メールはマルチ言語対応。
メールテンプレートも自分で編集できる。（動的変数まわりしくると死亡という問題が...）
実際に導入
CMS導入の経緯
ちょうどお披露目できそうなところまでの開発の目処が立ってきたころ、弊社コーポレートサイトのリニューアルが進んでて、ちょうど利用CMSを選定していたらしい。（素敵タイミングっ）
候補に上がったCMSでやりたいことがこのCMSでも実現できるということを説明し、
初の導入案件が弊社コーポレートサイトに決定。
実際、この時点ではノーコード化の機能が全く手付かずだったので、納期までアクセル全開で実装する羽目になり、個人開発のゆったり感０。でも納期に追われる感覚は嫌いじゃない。
実際に導入するということで、フロントエンドのエンジニアの方からの指摘や要望だったり、
ディレクタとの話では見落としてた「CMS案件で必要になるよね〜」な部分を拾えたのは大きかった。
完成度的に一気にアップした気がする。
導入
弊社コーポレートサイト
うちのデザイナやフロントエンドエンジニアはマジ優秀な人が多い。
このCMS使ったからってこのサイトができるわけじゃあなく、1から10弊社責任でやったからこそのクオリティになってると思う。
CMSではざっくり案件や社員、問い合わせやリクルートの管理。
CMS利用してこのサイトを作るためのバックエンド開発工数は2人日くらい。
今後
これをどんどん売っていくプロジェクトチーム発足。
売っていく上で、何か面白いことがあればまた。
もういくつか必要だと思ってる機能があり、暇になったら実装する予定。
おわりに
書いてて思い出しました。私、小説とか全く読めない自称活字恐怖症でした。
そんな自分が素敵な文章なんて書けるわけもなく、駄文にしかなりませんでした。
Discussion