CMSからの解放に向けて① ~ Google docs renderer ~
CMS多すぎ問題
CMSの選びには毎回苦労します。
モダンな開発現場では静的サイトジェネレータが普及してきており、よりインタラクティブなサイトをシンプルなコードで書くことが要求されるようになってきました。
今でも世間一般ではwordpressが主流ですが、セキュリティや運用コストなどを考えるとサーバーレスの流れや既に採用しているバックエンド言語に依存した形で利用できるヘッドレスCMSを探す機会は以前にもまして増えています。
それでも選択肢は多く、、、
- とにかく多機能を求めるならcontentful
- 日本語対応が必須ならmicroCMS
- ホスティング一体ならNetlify CMS
- マークダウンソースを保持するならForestry
など、枚挙に暇がありません。
そんなCMS選びに終止符を打ちたい！
Googleってすごいよね
そこで、Googleドライブに含まれる一連のサービスでCMSのあれやこれやを解決できるのでは、と思い立ちました。
- ブログなどの記事: Googleドキュメント
- 簡易データベース: Googleスプレッドシート
- お問い合わせフォーム: Googleフォーム
- その他ファイル、資料: Googleドライブ
あれ、行けるのでは？
もちろんそれぞれのサービスがとてもユニークな機能を持っており、必ずしも取って替われるものでは無いと思っています。
ですがこれらの良いところは、社会人のほとんどがこれらのツールの使い方を知っているところです。
多機能では無いし、使い方の制約もたくさん出てきましょうが、実現できたらCMSの紹介や提案などの工数が省けるケースも多くなるのではないか？と思っています。
下調べ
google api clientには上記のサービス全ての取得・編集インターフェースが用意されています。 n etc.
ですがこれらのAPIは飽くまでそのファイルの構造を直接読み込み・書き込みするためのもの。
直接の書き込みはGoogleドライブ上から行えるため今回は省くとして、読み込みについてもそもそもHTMLに変換するために作られたわけではないため、いまいちインターフェースは使いづらい。
そこで、どこかの誰かがHTMLへと変換しやすくするための何かをやってくれているだろうか？と軽く調べましたが、やはり目立ったものは見つけませんでした。
Googleスプレッドシートはどう使用するかが決まっていないから後回しとしても、こんなに優秀なwebエディターを持っているGoogleドキュメントでなんとそれっぽいものが見つからない結果となりました(!)。これは如何に。
ここからGoogleドライブCMS自作の第一歩が始まりました。
なお、選択言語はNode.js + Typescriptとしています。
理由は3つ。
- 昨今主流のフロントエンドフレームワークに対応するため。
- Google Apps Scriptとの親和性
- 私が好きだから
Google docs renderer
やはりCMS利用の第一歩はブログやニュースなどの記事から。ということで、Googleドキュメントから。
GoogleドキュメントはMicrosoft wordと互換があるだけあって、機能もとんでもなく多いです。
予想していた通り、apiで取得したデータはとても複雑で、リスト一つまともにHTML変換しづらいものでした。
※レスポンススキーマが気になる方は下記を参照ください。
ですので、Google docs APIをHTMLに変換しやすい（for文などで回して変換しやすいような配列形式）ラッパーライブラリの作成に着手しました。
これらの作業工程は皆様にも共有させていただきます。
現状では、
- 通常のテキストとそのスタイルの取得
- ネストされていないリストの取得
- 画像の取得
のみのシンプルな機能です。
// import { google } from "gogoleapis";
// doc: google.docs_v1.Schema$Document;
const gdr = new GDR(doc);
// HTMLのレンダリング
const html = gdr.html;
document.getElementById("root").innerHTML = html;
// マッピングデータの取得
const map = gdr.document;
console.log(map);
/** [
* { id: <uuid>, type: "PARAGRAPH", children: {
* text: "hello world",
* style: { backgroundColor: "rgb(23, 26, 39)" },
* link: { url: https://google.com }
* }}
* ]
**/
ここから、単純なブロックだけでも
- ネストされたリストの解決
- 目次ブロック（Schema$TableOfContents）
- テーブル（Schema$Table）
- 区切りセクション（Schema$SectionBreak）
などまだまだ盛りだくさんです。
この他にも
- ページ区切りの解決
- 画像以外のオブジェクト（グラフなど）
- ヘッダーやフッター
- コメント
- 罫線
- 計算式
など、どこまで対応するか検討中なものもたくさんあります。
とりあえずの目標は、一般的なWYSIWYGエディタで作れるレベルのデータを返すことです。
開発途中なのでソースも汚いですが、少しずつ利用できるようにしていくつもりでいます。
また次の進捗に一区切りがついた段階で記事にしたいと思っています。
ゆるーく進めていくつもりですので、もし気になったらフォローください。
以上です。
Discussion