ブログの記事管理をContentfulからGitリポジトリに変更した

このブログは最初はてなブログで書いていて、1年前にこっそりNext.js + Contentfulという仕組みに変えて運用していた。今回仕組みをふたたび変えて、MarkdownファイルをGitリポジトリにコミットしていく形式にした。

コミットしたMarkdownファイルはGitHub上へpushするとVercelのGitHub integrationによってVercel上にデプロイされる仕組みとなっている。その辺の仕組みについてコードを読みたい人は entryConverter.ts と entriesJsonBuilder.ts を読むと良い。

なぜ Contentful から Markdown ファイルを編集する形式に変えたのか

理由は3つある。

1. Contentful の Markdown エディタの挙動が信用できなくなった

リモートワーク体制になって変わったこと・変わらなかったことの記事を書いていたときに、下記の事象に遭遇した。

Contentfulのエディタで記事を書いていたら自動保存のタイミングでIMEが確定されていたようで、文章がめちゃくちゃになっていた。そしてその状態がエディタに表示されてなかったので、何も対策できなかった…https://t.co/IDBnTnzZf6

— kubosho (@kubosho_) April 22, 2020

Contentful Community にも同様の問題が報告されていた。Markdownエディタを使ってフルスクリーン状態で記事を書いていたらこの問題が発生した。後日問題が再現するか試したが、再現しなかったので複合的な要因でバグる可能性が考えられる。

とはいえ、記事を書くときに「記事ちゃんとした形で保存されているのかな…」といった余計な思考が混ざることで記事を書くことを億劫にさせるし、安定した環境で書きたくなった。

2. Contentful の 編集画面が気に食わない

ブログ記事を書くときに自分は本文部分とプレビュー部分をそれぞれ横並びに表示したい。どういうことかは次に示すはてなブログの編集画面の画像を見てもらうと分かる。

だがContentfulの編集画面は1カラムになっている。次に示すContentfulの編集画面の画像を見てもらうと分かるように自分の理想とするレイアウトになっていない。

一応Contentful上のContent modelから本文のエディタをMarkdownエディタにしたうえでフルスクリーンモードにすると、編集画面とプレビュー画面が横並びに表示されるようにはなる。ただこの表示にすると、先ほど書いたように本文がとんでもないことになることがあるので詰んでしまう。

またMarkdownエディタにした場合、エディタ部分のfont-familyに font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace!important; が指定されているため、特にWindows環境だと文章を書く気力を失う見た目になる。

3. 思ったよりいろんな環境でブログの記事を書かない

いつどこでもブログの記事を書けるようにしたいがWordPressは導入が面倒だなと思って、裏側をHeadless CMSひいてはContentfulにしてみたものの、スマホやタブレットでブログの記事を書くことはなかった…

実際に運用してみたらほぼパソコンからしか記事を書いていなかったので、だったら使い慣れたテキストエディタ上で記事を書けたほうが筆は進むのではと思い、移行に至った。

実際この記事も使い慣れたVisual Studio Code上で書いているが、使い慣れているだけあって頭のリソースを100%文章に向けられている。これで良かった。

まとめ

ちゃんとユースケースを考えよう。