LoginSignup
22
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nasubi_dev(なすび)

ObsidianをCMSにしたら、思ったより本格的だった話

Posted at

あらすじ

はじめまして､なすび(@nasubi_dev)です｡

最近､Obsidian + Cursorの組み合わせが流行していますよね｡

AIによる活用も斬新で面白いとは思っているのですが､Obsidianが本来とは異なった使い方がされている現状は､応援していたアーティストがネタ曲で売れてそのパターンの曲しか出さなくなったときみたいな気持ちになっています｡

なので今回は個人的に最高の使い方であるAI活用ではないObsidianの使い方を共有しようと思います｡

この記事では､私のポートフォリオサイト｢nasubi.dev」で実装したObsidian + Cloudflare R2による本格的なCMSの仕組みについて解説します。一般的なヘッドレスCMSとは異なる構成で､高いパフォーマンスと優れた執筆体験を両立させました。この記事で解説するコードは以下のリポジトリで公開しています｡

GitHub - nasubi-dev/portfoilo-v2

最終的にこのようなサイトを作成することができます｡

記事のトップ画面.png

ブログ部分のスクリーンショット.png

この記事を読むと得られるもの

  • Obsidianの新たな可能性
  • 限度はあるが0円で使えるCMSの構築方法
  • 効率的な執筆ワークフローの構築方法
  • オールインワンの執筆環境の設計思想

逆に得られないもの

  • Obsidianのインストール方法
  • 拡張機能のインストール方法
  • 大規模チーム向けのCMS設計
  • 予約投稿などの高度な機能の実装方法

参考になるサイト:
Obsidianを使って生産性を高める #新人プログラマ応援 - Qiita

採用するメリット

  • コストがかからない（R2の無料枠で十分運用可能）
  • 管理が容易（一元化されたインターフェースですべて完結）
  • 自動でコンテンツ管理､デプロイまで可能
  • 執筆だけにフォーカスできる環境
  • AstroやCloudflareなどのエコシステムの恩恵を受けられる
  • オフライン環境でも執筆作業が可能
  • メディア（画像・動画）のシームレスな管理
  • 学習コストが低い（特にmarkdownに慣れた開発者にとって）
  • 独自の拡張性（プラグインやスクリプトで機能追加可能）

構成図

比較としてmicroCMSを挙げてみました｡

Astroのcontent/フォルダをObsidianのVaultに指定することでmicroCMSの管理画面をObsidianで代用しています｡

microCMSの技術構成
microcms技術構成.png

引用: https://qiita.com/official-columns/topics/microcms/#CMS

私のポートフォリオ(nasubi.dev)
nasubi-devの技術構成.png

Obsidian + R2をCMSとして選んだ理由

そもそも､なぜObsidian + R2をCMSとして選定した背景には､開発者として直面する悩みに｢効率的なコンテンツ管理システムの選択｣があると思います。特にブログやポートフォリオサイトを運営する際､markdown形式でコンテンツを作成しながらも､メディアファイルの管理や公開プロセスを効率化したいというニーズがあります。

markdown内に画像を挿入したい場合､リポジトリのpublic/に大量の画像や動画を置くのもナンセンスですよね(GitHubが可哀想)｡だからといってmicroCMSなどのヘッドレスCMSを使おうにも有料プランでないと動画が置けなかったりと不便です｡リッチテキストエディタはエンジニアとって不要ですし｡

1. スケーラビリティとコスト効率

  • 無制限のコンテンツ管理: ストレージの容量が許す限り､膨大な量のコンテンツを管理できます。
  • Cloudflare R2の無料枠: 10GBの保存容量と､個人ブログ執筆程度なら事実上無制限の書き込み操作が可能｡
  • エグレス料金なし: R2はエグレス料金が無料であるため､画像が多いブログでも追加コストを気にせず運用できます。

2. 直感的な執筆体験

  • リアルタイムプレビュー: Hugoのようにローカルホストを立てることなく､オフラインでも編集しながらレンダリング結果とほぼ同一の内容をObsidian上で確認できるため､執筆の効率が大幅に向上します｡
  • WikiLink記法でのメディア管理: ![[画像ファイル名]]のようなシンプルな記法で画像や動画を挿入できます。(後述のRemarkプラグインによる変換処理による恩恵)

3. 開発フローとの統合

  • Astroとの相性: Astroではcontent/配下の.mdファイルを解析してビルドするため､content/フォルダをObsidianのVaults(保管庫)として指定することでObsidian上で閲覧が可能なため､相性がGOOD｡
  • シームレスなデプロイ: コンテンツの作成からデプロイまでの効率的な運用フローを構築できます。(後述のTemplater, Remotely Save, Shell Commandsによる恩恵)

4. 不要な複雑さの排除

  • APIキーの管理不要: 画像はR2のパブリックドメインを使用しているため､API管理が不要です｡Blogとして公開するため秘匿すべき情報がない
  • 単一デバイスでの運用: 私の場合､単一デバイスからの編集が主であるため､同期の競合問題も発生しません。

以上のことから､従来のヘッドレスCMSでは､コンテンツの作成と管理に別のインターフェースを行き来する必要がありましたが､この構成では執筆からデプロイまでの全てをObsidianだけで完結させることができます。

ただし､この手法を選択できた大きな理由として､

  • 投稿する人が一人
  • markdownが書ける
  • 予約投稿が不要

というのがあるので誰しもができる訳では無いのが欠点です｡エンジニアの個人Blog程度だったら十分要件に耐えうると思います｡

ObsidianのCMS活用のための拡張機能

Obsidianを本格的なCMSとして活用するにあたって､いくつかの重要なプラグインを入れました。これらを組み合わせることで､執筆体験を大幅に向上させ､ワークフローを効率化させることができました｡

1. Remotely Save - クラウド同期の要

Remotely Saveは､ObsidianとCloudflare R2バケットとの間で同期をコマンド一つで行う事ができます。編集内容が自動的にR2にバックアップされ､R2に保存されたメディアファイルはURLを通じて直接アクセス可能です。

R2の設定方法及び､Remotely Saveの使い方に関してはこちらの記事が参考になると思います｡
ObsidianのRemotely Saveを利用してみた - dolvlog

2. Image Converter & FFmpeg Converter - メディア最適化

Image Converterは､Obsidianにドラッグ＆ドロップした画像や動画を自動的に最適化します｡画像､動画に対応しています｡これにより､手動での変換作業が不要になり､執筆プロセスがスムーズになりました｡

3. Templater - プログラマブルなテンプレート

Obsidian上級者御用達の拡張機能Templaterは､一貫性のある記事の作成に使っています｡作成日時の自動入力と一意なIDの生成程度にしか使っていませんが､これだけでも執筆効率が大幅に向上します。

このようなテンプレートを作成しています｡
templaterの使い方.png

4. Shell Commands - Git操作の統合

エディタを離れることなく事前に用意したコマンドをボタン一つで実行するだけでGit操作を可能にし､デプロイができる環境を構築しました｡

Remarkプラグインによる変換処理

ObsidianのWikiLink記法（![[ファイル名]]）は､標準のmarkdownレンダラーでは解釈できません。この問題を解決するために､カスタムRemarkプラグインを実装しました。

このプラグインは以下のような処理を行います：

  1. WikiLinkパターンを検出
  2. ファイル実体のパス解決
  3. ファイル名の正規化（スペースをハイフンに変換するなど）
  4. ファイルタイプに応じた最適な要素への変換：
    • 画像ファイル → AstroのImageコンポーネント
    • 動画ファイル → <video>タグ

実装はこのようになっています｡

// WikiLinks形式の処理プラグイン
function remarkWikiLinks() {
	// 画像/動画用: ![[xxx.webp]] - グループ1がパス
	const mediaWikiLinkRegex = /!\[\[(.*?)(?:\|(.*?))?\]\]/g;

	return (tree) => {
		// メディア（画像・動画）を処理
		visit(tree, "text", (node, index, parent) => {
		if (!node.value.includes("![[")) return;
		
		// 省略
		
		if (
			path.match(/\.(jpe?g|png|gif|webp|avif|svg|mp4|webm|mov)$/i) &&
			!path.includes("/")
		) {
			r2Url = `${R2_BUCKET}/${path}`;
		}

例えば､![[cool image with spaces.jpg]]は､ビルド時にhttps://content.nasubi.dev/assets/cool-image-with-spaces.webpのような最適化されたURLに変換されます。

これにより､執筆者は複雑なパスやHTML構文を気にすることなく､直感的なObsidian記法で執筆できながらも､実際のウェブサイトでは最適化されたメディアコンポーネントとして表示されます。

実際のワークフロー

私の実際のコンテンツ制作からデプロイまでのワークフローは以下の通りです：

  1. Obsidianで記事を執筆またはコンテンツを編集
  2. 画像・動画を必要に応じてドラッグ＆ドロップ（自動で最適化）
  3. 保存すると自動的にR2へ同期
  4. Obsidian上でShell Commandsプラグインによってコミット＆プッシュ
  5. CI/CDパイプラインによる自動ビルドとデプロイ (Cloudflare Pages)

この一連の流れにより､コンテンツの作成からデプロイまでを効率的に行うことができ､執筆にフォーカスできる環境が整いました。

ObsidianをCMSとして使った結果

Obsidianを｢単なるノートアプリ｣でもなく､｢AI活用｣ でもなく｢CMS｣として活用することで､画像や動画の管理が自動化され､マークダウンの直感的な記法に加え､Obsidianの優れたエディタ機能と拡張機能により､執筆プロセスが快適になりました｡

ObsidianとCloudflare R2を組み合わせたCMS構成は､個人エンジニアのBlogに採用するには最適なソリューションだと感じています。今回の実装を通じて､Obsidianが単なるノートアプリではなく､コンテンツ管理システムとしても十分に機能することが証明されました。

まとめ

個人的にAI連携ツールとしてだけではなく､Obsidianの本来の強みである｢ナレッジベースの構築と管理｣をみなさんに体験してもらいたい､設定の複雑さから敬遠する人も一定数いますが､Obsidianの本質はただのmarkdownビューアーでしかないので気軽に使ってみてほしいです｡

私と同じ環境を作りたいと思っていただけたなら､GitHubにて公開していますので､覗いていってください｡
GitHub - nasubi-dev/portfoilo-v2

CMS活用に関してはこれからも探求していこうと思っているので､ぜひ意見があればお気軽にコメントいただけると嬉しいです!!

今回は紹介しませんでしたが､このサイトはPagefindを使った検索や目次の自動作成､アンカーリンクなど､他にも機能があります｡急いで記事の公開をしたのでだいぶ未完成です｡

今後は､UI･UXの向上､OGPの設定やfootnote機能実装､カルーセルの実装､GSAPによるアニメーションを追加する予定です｡

個人サイトの方でも同じ内容の記事を投稿していたり､作ったプロダクトの紹介を行っているので興味があれば見てもらえると嬉しいです!

22
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?