MicroCMSを導入した話

公開日:2025-11-02
更新日:2025-11-02

logo of M!CROWAV3

やったこと

ここ最近、ブログの更新頻度が課題となっており、その解決策としてCMS(コンテンツマネジメントシステム)の導入を考えていた。

そこで、国産Headless CMSであるMicroCMSをこのブログのコンテンツマネージャーとして導入した。

MicroCMSを選定した理由は「公式ブログが手取り足取り」すぎたこと。

俺のブログはブログ用のレイアウトに全部集約するような作りなっているが、どこからどの情報を持ってくるのかというのが恐ろしく入れ子上になっている。

MicroCMSはブログ上でどの情報を渡せば解決するのかが明瞭に書かれていたため、改修が割と楽だった。

入れるだけでも良かったが、そもそもAstroでローカルMDから投げるためのスキーマや、HTMLから目次を作るためにCheerioの導入、さらにはローカルファイルを全部CMS上に引っ越ししたということで、なんだかんだ結構時間がかかった。

また、現状の[id].astroや[tag].astroでブログのリスティングが違っていたりだとか、ハンバーガーメニューのレスポンシブ対応など、細かい修正もちょこちょこやった。

おかげさまでスターバックスで、毎日Ventiのコーヒー(ワンモアコーヒーのおかわりも)をがぶ飲みするはめになって、頻尿で今死にかけている(自業自得)。

ちなみにハロウィン🎃が終わったばっかりだというのに、もうクリスマス商法が始まってて草生えた。

それで、何ができるようになったん?

これまでの作業と、今後の作業でブログ更新がどれだけ変わったのかを比較しよう。

導入前

導入後

メリット

MacBookでブログの作成(ローカル.md)

端末を問わないブログの作成(オンラインエディタ)

メインPCやスマホから隙間時間にブログの下書きを作って保存ができるようになった!

写真を追加するときにはcloudflareにアップロードし、公開URLを取得してmarkdownで指定

microCMSに直接アップロード

アップロードの手間が少なくなった! また、同時にAltの管理もmicroCMS上で可能に!

公開の際にはプロジェクト全体をCloudflareに再デプロイ

「公開」ボタンをポチる。
Webhookで自動デプロイ

説明が必要か?

修正が必要な場合は上記の作業を繰り返す

再「公開」するのみ

上にならえ

各種mdのコマンドを覚えなければならない

リッチエディタでコマンドを覚える必要なし

ググる手間が減る

副産物

副産物として、これまでYoutubeの動画を埋め込みで対応していたが、レスポンシブ(いわゆるスマホ画面)にすると、動画がコンテンツエリアをはみ出してめちゃくちゃキモイことになっていたが、なんとCMSにしたら勝手に直った。

これはおそらく、mdファイルで管理していた際は、Youtubeの動画埋め込みが指定サイズの記載があったため,その設定にブログ側が引っ張られていたが、CMS側では描画サイズを指定していないためだと思われる。機能開発をしないで済むのは助かる。

今後について

これまでは<p>がいい感じになっていてくれたが、CMSで作ったものは一度すべてHTMLになってしまう。そのためCSSの反映を別途してあげる必要がありそうだ。

逆にCSSだけ弄ればいいのが本当に楽だね。

あとはプレビュー画面を作って、更新や編集の手間を減らすようなこともしたい。

タグ: