🥝

スプレッドシートを使ったCMSプラットフォームを作った

2021/12/19に公開4件

Firebase

Googleのspreadsheetを使ったHeadress CMSプラットフォームと、そこで作成したコンテンツをプロダクトに落とし込むためのnpmを開発しました🎉

作成画面
👆作成画面はこんな感じで下の黒いボタンを押すとそれに紐づいたデータを入力できるようになります。

コンテンツ作成
👆こんな感じでテキストはもちろんリッチエディターを使った記事作成やJSONデータを扱うこともできるので柔軟なコンテンツ作成が可能です

npmは既にOSS化しておりいつでも使っていただけます👏

プラットフォームのサービス名は「Grid CMS」でパッケージ名は「grid-cms-sdk」です。

https://grid-cms.vercel.app/

作った理由

ある日会社でメディアを立ち上げようという話になった時がありました。どのCMSを使うか決める段階で様々なCMSプラットフォームを調べていました。しかしどれも有料のものや無料で使えても範囲に限りがあることを知り、導入のハードルが若干高いなあと思っていました。そんな時に「なんなら自分で作るか」と思ったのが発端でした。また、私自身OSSへの興味関心はあれど中々一歩踏み出すことができないでいた為思い切ってプラットフォーム作成及びnpm開発に挑戦することにしました。

使い方

基本的な使い方や始め方はこちら👇に記載しているので今回はGrid CMSのこだわったポイントを主軸に綴ろうと思います。

簡単に説明するとスプレッドシーとの1行目をcolmとして2行目以降をrowと見立てて使います。カラム名に「JSON」の文字列を含めるとJSONデータを作成できて、「EDITOR」を含めるとリッチエディターをしようする事ができる仕組みです。それ以外は単純なテキストとしてデータを作成できるようにしています。

こだわりポイント

こだわったところは大きく2つあります。

JSONデータ管理をできるようにした
リッチエディターをイイ感じにした

JSONデータ管理をできるようにした

Grid CMSを開発する上で様々なスプレッドシートを用いたライブラリを見てきました。しかしいずれもJSONデータを扱うと明示的に謳っているライブラリはなくせっかくなのでGri CMSではJSONデータの管理もできるようにしようと思いました。厳密にはJSONstringなのですが、ユーザーはJSONエディターで生のJSONデータを作成する事ができるので使用感や実際のプロダクト開発には結構重宝するのではないかと思います。

JSONエディター

👆こんな感じでJSONエディターでJSONデータを入力する事ができます。またselectでテンプレートのJSONデータを呼び出すこともできます。

しかしこれだけでは若干不十分なところもあるので、ユーザーが各々独自でカスタマイズしたJSONデータも扱えるようにしました。Grid CMSにはカスタムJSON機能が存在します。それは下の画像のように好きなJSONデータを作成して保存しておく機能です。これを行うことでコンテンツ開発時にselectで呼び出す事ができます。またJSONデータは複数作成する事ができます。

リッチエディターをイイ感じにした

今回リッチエディターを作成するにあたりしようしたライブラリは「Tiptap」です。プラグイン等はまだベータ版ですがホームページの見た目や機能の豊富さ故惹かれて採用しました。
https://tiptap.dev/
Grid CMSでのリッチエディターの機能を軽く紹介します。
機能は大きく分けて3つあります
1. base
2. table
3. color

baseでは基本的なリッチエディターの機能を備えています。画像を貼り付けたり、コードブロックを置いたり巻き戻したりする事ができます。おそらく一番使う部分だと思います。

次にtableです。こちらはテーブルを実装するための機能です。テーブル自体のinsertからcolmやrowの追加・削除、セル同士の結合を行うこともできます。柔軟なテーブルUI構築が可能なので表現の幅が広がりそうですね。

colorでは文字の背後を着色する事ができます。デフォルトで設けた8色に加えて、色をカスタムすることもできるようにしました。デフォルトの色ではダークモード等で使用される白文字には向かないのでカスタムカラーで対応していただきます。

改善点・至らぬ点

とりあえずリリースはしたとてまだまだ細かい修正は改善点は沢山あります。

コンテンツの編集・削除はスプレッドシートのページで行わないといけない
UI/UX部分が疎か
1つのデータあたり5万文字までしか入力できない
パフォーマンスがよろしくない
あげればいくらでも出てきますが、1については結構致命的なので早めに対処したいところではあります。

技術的なお話

使用したライブラリやフレームワークは下記になります。

Next.js -> Reactのフレームワーク
TypeScript
tailwindcss -> CSSフレームワーク
daisyui -> tailwindcssのプラグイン
googleapis -> スプレッドシートAPI
google-auth-library -> OAuth2認証
firebase -> DB及び認証機能
firebase-admin
monaco-editor/react -> JSONエディタ
tiptap/react -> リッチエディタ

認証機能

基本のログインやログアウトはfirebaseを使ったGoogleアカウントのみの認証を実装しました。firebaseでGoogle認証を行なった後にNext.jsのAPIルートでsessionIDを発行してcookie発行後にSSRで認証処理の管理しています。

参考にした記事:

またOAuth2認証もNext.jsのAPIルートで認証を行なっています。Grid CMSの開発で一番労力を使ったのはここでした💦

データ管理

コンテンツのデータは全てスプレッドシートで管理指定のでここは特段DBの採用等はしていません。しかし、主にカスタムJSONのデータやスプレッドシートのIDやシート名はfirebaseのfirestoreを使って管理しています。firestoreを採用した理由は単にSDK-V9を使ってみたかったのと、そこまでscheme重視のプロダクトでは無かったので手軽にNoSQLで済ませたかったのも理由です。