ke.blog

🏖️

CMSをmicroCMSからObsidian+Supabaseに変更しました

ブログの更新頻度が低い

本ブログを作成するにあたり、microCMSを利用していました。 ですが、実際に記事を更新するとなると、プライベート利用としては1つ距離感があり、ページを開いて記事を書くというところまでなかなか食指が動かない状況でした。

Obsidianに注目

ObsidianとはMarkdown形式でメモが取れるアプリケーションです。 普段からメモを取るのですが、その際に利用しています。 もともとはNotionを利用していたのですが、クラウド上に保存されるためにページ表示が若干遅いことが、少しずつフラストレーションとなっていました。 Obsidianは基本ローカル保存なので爆速でページが切り替わるのでかなり有り難いです。 割と一瞬で開いてメモを取りたい!と思うことも多いのでかなり有り難いです。 (とはいえ、結局iCloudのストレージにデータを保管しているんですけど...)

Obsidianから更新するようにして頻度を維持したい

Obsidianであれば、ブログの記事を書くというステップのために別ページを開くなども無くなりそう...!ということで方法を探っていきました。

構成について

  • CMS:Obsidian
  • DB:Supabase
  • Hosting: Cloudflare Pages のようになっています。

Obsidianではsupabaseと連携させるための自作プラグインを用意しました。 記事を保存すると、DBへ追加などの処理が可能です。 また取得したマークダウンの値は、Astroにパーサーライブラリを追加して対応しました。

Supabase

BaaS(Backend as a Service)プラットフォームということらしい。 今回では保存するデータベースとして利用しました。 正直データベース周りはそこまで知識があるわけではないのですが、これであれば用意の手間も少なく準備ができるので有り難いです。 無料枠でも割とやれるという噂を聞いていたので試してみました。 Supabase側にはAPIもあるしwebhookは用意されているしでかなり助かりました。 雰囲気でテーブル作成しても値が保存されるので、フロントエンドが主な方もとっつきやすいです。

躓きポイント

Obsidianのプラグインのサンプルが少ない

Obsidianの開発ドキュメントは存在するのですが、僕の実力不足から来る理解力の少なさに苦戦を強いられました。 エディターにCursorを使用していて、GPT-4oの助言がなければもっと時間がかかるに違いありません。

Obsidian側でユニークIDっぽいのが無い

Obsidianで各ファイルのidのようなものが存在しておらず、代わりにTemplaterも併用して、ファイル生成日のタイムスタンプをフロントマターに保持させるようにしました。 ctimeというプロパティもあったのですが、モバイルアプリとPCそれぞれで保存処理を行った時にctimeがそれぞれで生成されてしまっているのか、別の値として保存されてしまったので一度フロントマターで値を持たせて同期させるようにしました。 ※普通に見落としがあればスミマセン...

タグの扱い

Obsidianのフロントマターにはタグのように "名前", "スラッグ" を同時に持ち合わせる値を用意することができず、結果的に名前をスラッグとしても利用する方向に切り替えました。 このあたりはObsidianの本来の用途とは外れてしまうので仕方がないとはいえ、いつかどうにかしたいという気持ちです。

切り替え後の感想

やはり普段遣いしているだけあってエディタも扱いやすく、なんといってもわざわざmicroCMSを開かなくて良くなったのは個人的に大きいです。 また、microCMSのありがたみにも気付きました。 記事とタグの関連性を実装する必要があり、こういった点をよしなにやってくれていることには感動すらおぼえました。 我ながらふんわりと書いていて、何がよしなにやってくれていたのかがイメージできないですね...

今後の展望

まだまだ改善の余地はあり、下記の内容を残している状況です。

  • 記事内の画像をどうやってAstro側で読み取れるようにするか?
  • ダイレクトに本番に反映されてしまうので、検証環境を用意する
  • 削除処理
  • 別の記事コンテンツの管理

久しぶりに色々と作ってみて楽しかったです。 Cursorが便利すぎて、シンプルに技術力は下がっているなとも痛感したので、日々プログラミングなどは継続したいです。