# はじめに

どうも、私です。

このサイトを作り始めてから、ずっとmicroCMSを利用してきましたが、とうとうやめることにしました。

お仕事の方でも、私が技術選定に関わっているプロダクトでは利用しているくらいにはmicroCMSのことが好きですし、このサイトでも長らくお世話になっていたので、それなりに愛着があります。

APIが使いやすいですし、ドキュメントもそれなりに充実していて、Headless CMSを選ぶ機会があれば今でも普通に候補に入れるかと思います。ですので、何か致命的な不満があってmicroCMSを嫌いになったみたいな話ではありません。

単純に、このサイトでのユースケースと少しずつ合わなくなってしまいました。

大きな理由から順に、配信トラヒック上限, リッチテキストフィールドが返すHTMLの扱い, モバイルデバイスからのエディタ操作性です。

そんなこんなで、最終的にはCMSごと自分で作ることにしました。

# Hobbyプランの20Gi/moが厳しい

今回microCMSをやめる決断に至った一番の理由がこれでした。

microCMSのHobbyプランでは、月あたり20Giまでのデータを配信できます。このサイトを作り始めた当初ではあまり気にしていませんでしたが、有難いことに以前よりもアクセス数が増えてしまい、月によっては上限を超過してしまいそうになることがちまちまありました。

それなら上位プランに乗り換えようかという話になるのですが、Hobbyの次にあたるTeamプランは月額4,900円します。

仕事で利用するサービスであれば、CMSを自前で運用保守するコストや管理監査機能周りを考えると寧ろ安いと思えるのですが、如何せん個人の雑記帳なので躊躇してしまいます。年額6万円弱ですからね。

勿論、microCMSでしか代替できない何かがあって、このサイトにとってならなくてはならないコアな存在になっていたのであれば、そのまま課金していたのかもしれません。が、ちょうど実装面でもmicroCMSに合わせ続けることに若干のﾂﾗﾐを感じることがありました。

であれば、月額を払っていまの構成を維持し続けるよりも、この機会にコンテンツ管理そのものを作り直したいなとなり今に至ります。

# HTMLをどうにか加工したかった

microCMSではAPIに型のような概念があり、事前に定義した種別によって入力できる内容が異なります。このサイトでは、本文にリッチテキストフィールドを利用していました。

このリッチテキストフィールドはAPIの返り値としてセマンティックなHTMLを返してきます。最小限の表示を行うのであれば、そのHTMLをv-htmlで横流しして、いい感じのCSSを当ててあげるとそれっぽいものができます。
しかし、長いこと触っていると色々なことがやりたくなってきます。

このサイトで言うと、<a href="https://example.com">https://example.com</a>のようなテキストと遷移先が一致するリンクに対して、そのまま平文を表示せず、リッチなリンクカードに差し替える処理があります。
コードブロックにはsyntax highlightがほしいし、言語名やファイルパスによって表示を出し分けたかったりもします。
GItHub, YouTube. Instagram, Twitter, MisskeyあたりのURLであれば、それぞれ専用の埋め込みが表示された方が嬉しいですし、Mermaidが書かれていればダイアグラムとして描画したいものです。

他にも色々仕込んでいくうちに、気付けば結構な量になってしまいました。

これまでは、APIから取得されたHTMLをCheerioに食わせてDOMを参照し、条件に合う要素を置き換えたり属性を追加したりで凌いでいました。できるにはできるんです。中身はHTMLなので。

ただ、記事内で使いたい表現を増やす度に、「microCMSがこういうHTMLを返してくるだろうから、このDOM構造を副作用なく検出して、特定のコンポーネントと置き換えて使おう…」みたいな処理が無限に増えていきます。

これはもうHTMLそのものを表示しているというよりかは、HTMLを中間言語として受け取り記事構造を復元しているように思えてきました。

先程例に挙げたコードブロックであれば、HTMLのpre > codeを見つけて置き換えるよりも、最初からcodeBlockというノードが状態として存在していた方が扱いやすいですよね。リンクカードもそうですし、画像も、今後増やすであろう何かしらの変な独自表現もすべてそうです。

microCMSが返してくるHTMLをどうにか加工し続けるより、自分で記事の構造を持って、自分でレンダリングした方が素直なんじゃないの、と。

# スマホから改行をしたい

もうひとつ。

私はベッドからスマホで文章を書くことが多いです。最初から最後までスマホだけで書くこともありますし、あとからPCで書き直したりすることもあります。
で、microCMSのリッチエディタでは、スマホからShift + Enterと等価の操作ができません。

どういう事かと言うと、段落を変えずに改行したい場合(CR/LFではなくLFを単体で入力したい場合)、Shift + Enterを入力する必要があります。確かWordなんかもこういう操作ですよね。

PCから使う分にはShiftを押しながらEnterを押せばいいので何も困りません。問題はスマホです。

当然ながらスマホのソフトウェアキーボードにはShift + Enter等価の入力キーはなく、同じ感覚で改行を入れるのが困難でした。加えて、このサイトでは、羅列されたパラグラフの可読性を高める目的で、記事レンダラのコンポーネント内子要素に対し、余白を意図的に持たせるスタイルを適用していたので困りものです。

これを読まれている方も日本語を母語としている方が多いでしょうし、おそらく肌感として理解していただけると思うのですが、現代的な日本語の文章表現として、句点と読点の間くらいの区切りとして改行がかなり用いられているように感じます。
浅学さを晒すようで大変恥ずかしいのですが、これが何かしらの正式な文章技法として定義されているのか、単にそのような表現が自然に広まってしまったのかは知りません。知りませんが、とにかくよく目にしますし、私自身もよく使います。

そんなこんなで、よく使う表現がよく使うデバイスから入力しにくい状態でした。

# そうだ、CMSをつくろう

ということで、CMSを作ることにしました。楽しそうですし。

汎用的なものを作るつもりは最初からなく、このサイトでだけ使える最小限のものを実装しています。そもそも私一人しか使わないものにコラボレーション機能だとか監査機能だとかは不要ですしね。

記事本文についてはTiptapのJSONをそのまま構造化されたドキュメントとして持つようにしました。
文章はparagraph、見出しはheading、コードブロックはcodeBlock、リンクカードならlinkCard、と最初から何者なのか分かった状態で保存しておくことで、HTMLをゴネゴネ処理する必要がなくなり非常に楽になりました。当然と言えば当然なのですが。

記事やタグなんかのメタデータはD1に、メディア系はR2に置くようにしています。元々このサイトではいいね機能周りでD1を使っていましたし、Workers上で動いているので自然なのかなと。

# エディタの話

ちょっと本筋とは離れるのですが、エディタを作るにあたって、一つ明確に理想としていたものがあります。

しずかなインターネット🔗です。

以前利用していたのですが、あのサービスのエディタの書き心地がすごく好きでした。余計なものがほとんど視界に入らず、とりあえずタイトルを書いて文章を書き始められ、文章を書くことそのものがUIの中心にある感じがすごく好きです。よくあるCMSの管理画面でコンテンツを編集している体験とはまた違ったものがあります。

ああいうのがいいなと。

しずかなインターネットはReactを基盤にしていて、こちらはVue/Nuxtです。使っているライブラリまで含めて完全に同じものを作るとなるとまぁまぁ大変ですし、別にコピーを作りたいわけでもないので、その辺りは普通に割り切っています。
ただ、考えとして文章を書くことを邪魔しないという部分はかなり参考にしています。

結局のところ、私しか使わないので私が満足できればそれでいいのかなと。

# さいごに

そんなこんなで、長いこと使ってきたmicroCMSへの依存を完全にやめてしまいました。

実際、作ってみると「この操作ちょっと嫌だな」と思ったらその場で直せますし、「こういう表現が欲しい」と思えばこんな感じに好きなノードを生やせます。

自分のブログのためだけにCMSを作るなんて、一般論で考えればどう考えても割に合わないと思います。でも、個人サイトなんてそれくらいでいいんじゃないでしょうか。

以前にも似たようなことを書いた気がしますが、自分のサイトなので。

長いことお世話になりました、microCMS。