🥝

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

2021/12/19に公開4

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


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


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

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

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

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

https://www.npmjs.com/package/grid-cms-sdk

作った理由

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

使い方

基本的な使い方や始め方はこちら👇に記載しているので今回はGrid CMSのこだわったポイントを主軸に綴ろうと思います。
https://grid-cms.vercel.app/grid/a6a4c815-e27d-4fa7-83c8-a15a55e90eee
簡単に説明するとスプレッドシーとの1行目をcolmとして2行目以降をrowと見立てて使います。カラム名に「JSON」の文字列を含めるとJSONデータを作成できて、「EDITOR」を含めるとリッチエディターをしようする事ができる仕組みです。それ以外は単純なテキストとしてデータを作成できるようにしています。

こだわりポイント

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

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

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色に加えて、色をカスタムすることもできるようにしました。デフォルトの色ではダークモード等で使用される白文字には向かないのでカスタムカラーで対応していただきます。

改善点・至らぬ点

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

  1. コンテンツの編集・削除はスプレッドシートのページで行わないといけない
  2. UI/UX部分が疎か
  3. 1つのデータあたり5万文字までしか入力できない
  4. パフォーマンスがよろしくない
    あげればいくらでも出てきますが、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で認証処理の管理しています。

参考にした記事:
https://zenn.dev/uttk/articles/f48fc75120f018

またOAuth2認証もNext.jsのAPIルートで認証を行なっています。Grid CMSの開発で一番労力を使ったのはここでした💦
https://cloud.google.com/nodejs/docs/reference/google-auth-library/latest

データ管理

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

https://firebase.google.com/docs/firestore/quickstart?hl=ja

参考にさせていただいた記事

npm開発はmicro-cms様のパッケージを参考にさせていただきました。なので使い勝手もmicrocms-js-sdkと似た感じになります。今回の開発の難所はなんといっても認証とnpm開発でした...

皆様宜ければgrid-cms-sdkにスターを付けてください🙏

終わりに

作ったはイイものの、検証や負荷テスト等はまだ疎かにしているためなんらかのトラブルは発生するかもですが使っていただけると幸いです。またOSS化したパッケージにも色々ご指摘やアドバイスをいただけると嬉しいです!

Discussion

cti1650cti1650

改善点4については、GAS のキャッシュを部分的に活用してみてはどうでしょうか?
こちらについても文字数制限やキャッシュ時間の制限(6時間)についても書いてあるので参考になるかと思います!
https://befool.co.jp/blog/8823-scholar/gas-use-cache/

ぼ寿司ぼ寿司

おお!
アドバイスありがとうございます😊
ぜひ参考にさせていただきますね‼️

qaynamqaynam

面白そうなプロジェクトです、今度使ってみようと思っています。
記事の冒頭で多分タイポしていると思いますが、Headress CMSになっています😁

ぼ寿司ぼ寿司

嬉しいコメントありがとうございます😊

タイポの報告もありがとうございます!そろーっと直しておきます😂