Obsidian Publishコトハジメ

この記事は Obsidian Advent Calendar 2025の11日目の記事です。

10日目は私PlasticHeartの「なぜ私はObsidian Publishを使うのか」
12日目はのがみさんの「【Obsidian】月10ドルで構築できるマルチLLMライティング環境！SmartComposer × RouteLLM API」です。

「Obsidianっていうのはね…」「もう見た」

本日の内容はこれからObsidian Publishを始めようと思っている人のために、この記事単体でも理解しやすいようにObsidianの簡単な説明を含んでいます。

Obsidianは個人向けのナレッジ文書編集ツールである。1ファイル1記事として扱い、直感的な操作ができるWYSIWYG¹エディタで編集する。作成した記事の実体はMarkdown(.md)であり、数式やコールアウトといったいくつかの拡張書式もサポートしている。

複数のファイルをグループ化したいときにはフォルダを作ってそこに配置することができる。これはOSのファイル・フォルダ構成をそのまま利用しているので、階層的なフォルダ構成をサポートしており、例えば 日記/2025/12 といった階層でフォルダを作り、そこに文書を仕分けることができる。

Obsidianは開発元が提供しているツールをそのまま使うだけでなく、プラグインでさらに便利にできる。公式プラグインだけでもかなり便利ではあるが、コミュニティプラグインを導入することで痒いところに手が届くようになる。人によってはこちらのほうがObsidianを使う理由にもなるだろう。

例えば5日目の六さんの記事では、なにかを少しずつ便利にするプラグインを紹介しているし、創作系Obsidian Advent Calendarの6日目の藤井佯さんの記事ではObsidianのクライアント上の見え映えをカスタムしているほか、自作のプラグインも公開している。

具体的にObsidianをどういう風に使っているのかについては、Advent Calendarに名を連ねているほかの方の記事も参考にしてほしいが、私個人の使い方としては日記・スクラップ帳・技術的なメモのために使用している。大雑把に言えば、Obsidianを使ったWikiであり、特に自分の中だけに留めておくものでもないので、今回紹介するObsidian Publishでウェブ上に公開している。

Obsidian Publishをコントラクトせよ

オーブシディアンは、もはや個人用ナレッジ・ツールなどという生ぬるい代物ではない。これは、狂気的なニンジャ知性や、腐敗したメガコーポのエグゼクが己の思考をデジタルカ・ジツとしてUNIX端末内で固定化するための闇のコンソールである。 エディタはWYSIWYG？ザッケンナコラー！これは「ダイレクト・ニューロ・ヴィジュアライザ」だ。使用者のニューロン電流を直接マッピングし、妄想や機密文書を瞬時にホログラム・インターフェースに叩き出す。見たままがデータになる。ユウジョウもバイオ燃料の在庫も、すべてがコトダマ空間に＋実際パブリッシュ可能な＋

Publishプラン

Publishプランをひとことで表現すれば、自分のObsidianの保管庫をウェブに発行するためのサービスだ。ObsidianでWikiが作れるとも言える。なんだ、たったそれだけのことじゃないかと思うかもしれないが、記事を書いた先からボタンぽちぽちの数ステップで発行できるので、やってみるとわかるが、これこそが最大の価値と言える。カスタムプラグインの対応は最低限ではあるものの、グラフビューとテキスト検索は標準で付属する。

中にはこれだけのためだけにお金をかけたくないと思う人もいるかもしれないが、同じようなことをやろうとすると、まずレンタルサーバーを契約してHTTPサーバーを建てて、テキストエディタを開いてHTMLを書いて、サーバーにファイルを転送して…、みたいなことをいちいちやらなければならない²。少なからず技術的な知見も必要になるし、昨今はセキュリティ対策やそのためのメンテナンスも欠かせなくなる。

しかし、Obsidian Publishであればこの面倒な一連の作業がObsidianのクライアントで上で完結するようになるし、実際にウェブ上に公開されたものを見ても、最初からスタイルがうまく調整されているので、ほかのプラットフォームを使うよりも見栄えがよい。私もいくらかは調整はしているものの、ほとんどはそのままだ。

それにほかの文章作成プラットフォームと異なり、いま流行りのソーシャル要素がないので、ほかのユーザーを気にする必要はないし、特定の話題であることを強要されることもない。SNSに疲れて自分の興味があることを好きに書きたい人にとってもうってつけのサービスだ。

そんなObsidian Publishでは保管庫ごとに一意なIDを取得でき、私の場合は「plhr7」となっている。これは publish.obsidian.md でホスティングされており、 https://publish.obsidian.md/plhr7 で公開されている。後述のカスタムドメイン化もしているので、 https://obsidian.plasticheart.info でも接続できるようになっている。

費用は？

1保管庫あたり月額$10かかるが、年間契約で月額$8になる。近年は円安傾向なのも相まって結構高く感じられるものの、国内のレンタルサーバーサービスでVPS³を借りることを考えると、最近では最低スペックのものでも月額¥600〜800が当たり前になってきており、日米の為替差があったとしても、付加価値を考慮すればわりと妥当な費用感である。個人的にはかなりバランスの取れたいい価格帯にあると判断している。

ライセンスの購入の仕方は？

まずはObsidian Publishの公式サイトでアカウント登録をする。登録後にウェブ上のアカウント設定からPublishの項目を開き、Change siteからPublishで公開したい保管庫の数を入力して決済に進む。決済にはクレジットカード・PayPal・WeChat Pay・Alipayが選択でき、支払い方法には困らないはずだ。

その後、Obsidianのクライアント側で設定画面から作成したアカウントでログインすると、ライセンスの状態が同期されるので、Publishプラグインから公開したい保管庫を選択すればよい。

私でもできる？

公式が「No technical knowledge required (専門知識不要)」と謳っているように、一度初期設定さえ済んでしまえば、あとは通常のObsidianを使うのと同じだ。Publishのライセンスを購入して、公式プラグインのPublishを有効にして、自分好みの設定をすれば準備完了となる。左ペインに表示される紙飛行機のボタンを押して発行したいファイルを選択するだけだ。

ウェブへの反映はほぼ即時と言っていいほど早く、発行には今のところ制限もないので、少し直したらアップロードするといった雑な使い方をしても全然問題ない。ウェブ技術を知らない人にとっては簡単で、知っている人にとっては便利という表現がぴったりだ。

もちろん、HTMLやCSSの知識があれば後述のテーマの変更もしやすいので、Obsidian Publishを機にウェブ技術に入門してもいいかもしれない。

どんな感じになるの？

今見ているこのページがまさにObsidian Publishで作られている。なのでこんな感じになる。今回のAdvent Calendarの参加者の中にもPublishを使っている方がいるので、あわせて以下のサイトも確認してほしい。このサイトよりもデザイン性に富んでいて素晴らしい。

• Minerva ─ 美女が出ます (Tadashi Aikawaさん)
• Aries Tech Garden ─ ヒツジが出ます (相戸ゆづなさん)
• mxt forest ─ 森と草が出ます (hann-soloさん)
• シュウマイポップ体 ─ これは…ウミウシ？ (tobusukaさん)

使い始めてわかったこと

Obsidian Publishは便利だ。月$8の価値は確実にある。それでも、しばらく使ってわかってきたこともある。あらゆるものに言えることだが、いいところもあれば悪いところもあるので、これからPublishを使おうかなと迷っている人は参考にしてほしい。

バックアップサービスではない

Publishはウェブ上に保管庫を発行するサービスであって、バックアップを保存するものではないので、必ず原本となるローカルファイルは手元で管理しておかなければならない。最近では各種クラウドストレージサービスが普及してきているので、保管庫を同期対象のフォルダに入れておくことである程度消失への対策ができる。

Cloudflareの巻き添えを食う

Obsidian PublishはCloudflare⁴でホスティングされているので、Cloudflareが障害を起こすとObsidian Publishも閲覧できなくなる。こればかりはどうしようもない。ローカル環境のデータは編集できるので、記事を書きながら復旧を待てばよい。

ライトテーマとダークテーマ

Publishには既定でライトテーマとダークテーマが用意されている。閲覧者に選ばせることもできるし、設定でどちらかに固定することもできる。標準でもかなりいい塩梅に調整されているので、あまりカスタムしなくても見栄えがよい。そのうちデザインに凝りたくなってきたら追加のスタイルシートを配置して自分好みのデザインにできる。

publish.cssはPublish向けのスタイルシートで、保管庫の直下に配置するとPublishプラグインに認識されて、ウェブへの発行時にほかのファイル同様に更新対象となる。詳しくはCustomize your siteを確認してほしい。-- (二重ハイフン)で始まるカスタムプロパティが使われているので、単純に色を変えたいとか、大きさを変えたいということであれば、それを上書きしてやればよい。どのようなプロパティが定義されているのかはCSS variablesを見てもいいし、あるいはブラウザの検証ツールからDOMツリーや実際に適用されているスタイルを確認したほうが早いかもしれない。

HTMLタグが書ける

Markdownの表現力で足りないときにはHTMLタグを記述できる。あまりやりすぎるとHTML文書を書いているのと変わりない状況になってしまうので、必要なときを除いてなるべくMarkdownの範疇に留めたほうが見栄えがよく管理もしやすいように感じる。

メディアもアップロードできる

Accepted file formatsにアップロードできるファイルの一覧が列挙されている。1ファイルあたり50MBが上限で、保管庫全体では4GBが上限となっている。Markdownの画像差し込み記法では理想的な表示にならないこともあるので、publish.cssによる調整が必要かもしれない。

コードをハイライトできる

ローカル環境同様にソースコードをハイライトできる。トークンの色はCSSのカスタムプロパティで上書きして好きなカラーテーマに変更できる。私は普段使っているAyuというテーマを参考にしている。

impl DiceRoll {
    pub fn sum(&self) -> Result<Value, ValueError> {
        let mut result = Value::Integer(0);
        for value in &self.values {
            result = (result + value)?;
        }
        Ok(result)
    }
}

数式が書ける

Markdownが書けるほかのプラットフォームでは、拡張書式としてTeX準拠のインライン数式が書けるようになっていることがあるが、Obsidianも同様である。あまり出番はないものの、あると嬉しい機能のひとつである。例えば2次元ベクトルの外積は $\overrightarrow{A}\times \overrightarrow{B}=a_x\cdot b_y-a_y\cdot b_x$ のように記述できる。

$\overrightarrow{A} \times \overrightarrow{B} = a_x \cdot b_y - a_y \cdot b_x$ 

リンク切れに注意

Publishの既定の設定では、ブログサービスのように記事ごとに固定のID(パーマリンク)が割り当てられているわけではないので、外部のサイトからリンクされている記事を移動させると404 Not Foundになってしまう。Permalinkで言及されているように、記事にプロパティを設定することでこの問題を回避できるが、簡単なものとは言えど、拡張記法であることに留意すること。

CJK漢字の表示があやしい

Obsidianのクライアントは日本語に対応しているが、Publishにはその考慮がない。具体的にはfont-familyで日本語フォントが指定されていないので、環境によってはCJK漢字⁵の字体が日本向けではない表示になる。なので私はpublish.cssに次のような定義をして、なるべく日本語フォントで表示するようにしている。

• Windows向け: “Meiryo UI”, “Meiryo”, “Yu Gothic”
• macOS/iOS向け: ui-sans-serif, “Hiragino Kaku Gothic ProN”, “HiraKakuProN-W3”
• Linux向け: “VL Gothic”
• Android向け: “Roboto”
• その他: “Noto Sans JP”

/* publish.css */
body {
    --font-default: ui-sans-serif, "Meiryo UI", "Meiryo", "Yu Gothic", "Hiragino Kaku Gothic ProN", "HiraKakuProN-W3", Roboto, "VL Gothic", "Noto Sans JP", sans-serif;
    font-family: var(--font-default);
}

カスタムドメイン化

すでにObsidian Publishは機能としては十分ではあるものの、カスタムドメイン化をするとさらなる恩恵を得られる。私が思いつく限りを以下に列挙したが、ほかにもあるかもしれない。

• publish.js の有効化。 JavaScriptも配置できるようになり、さらにページを拡張できる。カスタムドメイン化による一番の恩恵かもしれない。カスタムドメイン化しなくてもpublish.jsは発行できるが、Publish側で読み込み対象外となる。
• Cookieをドメイン間で共有できる。 詳細な説明はMDN等のCookieを解説しているページに譲るが、設定次第でドメイン間でCookieが共有でき、各種解析はもちろん publish.js と組合わせた独自の機能が実現できるようになる。ただし、GDPRや個人情報保護法といったデータプライバシーに関連する法令は遵守すること。
• ドメイン間の統一感が生まれる。 このObsidian Publishは https://obsidian.plasticheart.info で公開されているが、私のホームページは https://plasticheart.info であり、視覚的に関連があることがわかるようになっている。とはいえ所詮個人サイトなので、そこまでブランディングや見た目が重要かと問われれば、自己満足の域を出ることは少ないと思われるが、それでも統一感があるのは確かだ。

カスタムドメインを導入するにあたっては、Obsidian公式のCustom domainsを参考にする。丁寧には書かれているが、Cloudflareでの設定が公式推奨の方法ということもあり、私のようにAWSでドメイン管理をしていて、それにこだわりがある場合では別の設定が必要になる。

クラウドプラットフォームの利用には十分注意してください

ここで解説している内容で高額な費用が発生するとは考えにくいですが、業務や趣味を通じて十分なクラウドサービスの利用経験と力量があることを前提としています。思いがけない利用料が発生しても筆者は一切の責任を負いません。

Cloudflareでカスタムドメイン化する

• まだドメインを取得していない
• Cloudflareでドメイン管理をしている
• Cloudflare以外でドメイン管理をしていて、NSレコードを書き換えてもよい
• なんのこっちゃである

のどれかに該当するのであれば、公式が推奨しているようにCloudflareによる設定をするのが簡単だ。Aikawaさんの記事では、Cloudflare + ムームードメインでの設定方法を解説している。

AWSでカスタムドメイン化する

私は主にAWSを利用しているので、どうにかAWSでカスタムドメイン化できないか模索して、サブドメイン移管に挑戦したがうまく動作しなかった。AWSで管理しているドメインのNSレコードをCloudflareのものに書き換える方法もあるが、それはやりたくなかったので、結果的にCloudFrontによるリバースプロキシ⁶を採用することにした。

この方法だとObsidian Publishの前段にCDN⁷を配置することになるので、少額ではあるが費用が発生するようになる。しかし構成としてはシンプルであり、今のところ特に支障はない。

私の場合における具体的な対応方法としては次のとおり。まずCloudFrontのダッシュボードを開き、新しいディストリビューションを作成した。カスタムドメイン名は「obsidian.plasticheart.info」とした。SSL/TLS証明書も必要となるので流れで作成する。

作成後にオリジンを開いてOrigin domainに「publish.obsidian.md」を設定する。カスタムヘッダーには次の値を設定して、CloudFrontからObsidian Publishにリクエストをしたときに自分のVaultを返却してほしいことを通知する。

ヘッダー名	値
x-obsidian-custom-domain	obsidian.plasticheart.info

次にビヘイビアを開く。キャッシュキーとオリジンリクエストの項目で「Legacy cache settings」と「Use origin cache headers」(オリジンのキャッシュヘッダーを参照する)を選択する。Legacyという字面から推奨されない設定のようにも思えるが、この設定ではない既存のキャッシュポリシーを選択すると、キャッシュとしてCloudFront側のHostヘッダーをオリジンに送信してしまうようで、Obsidian Publishに対するリクエストが正常に発行されなくなってしまう⁸。

私は特にカスタマイズすることなくオリジンのキャッシュ設定に任せているが、カスタムドメインにアクセスしたときのレスポンスヘッダーを見る限りは「x-cache: Hit from cloudfront」が返却されており、素通しのリバースプロキシではなくCloudFrontによるキャッシュが動作していることがわかる。また、ページが更新されるとキャッシュヘッダーとうまく連動するらしく、ブラウザの更新ボタンで新しい内容になるので、実際の挙動としても大丈夫そうだ。

その後、Route53で「obsidian.plasticheart.info」のエイリアスとして、作成したディストリビューションを指定する。CloudFront側でCNAMEとして設定してあれば、自動的に候補として表示されるはずだ。AWSのDNS伝播はとても早く、通常1～2分でアクセスできるようになる。

最後にObsidianのクライアントからサイトオプション → カスタムドメインで、「obsidian.plasticheart.info」を設定する。また、古いリンクから辿ってきた人のためにリダイレクトのオプションもONにする。しばらくするとObsidian Publish側でも設定が反映されて転送がかかるようになる。カスタムドメインでページが表示されたら設定完了だ。

記事の内容を取得するときは

よりObsidian Publishをカスタムするために、ときにはJavaScriptで記事の内容を取得することもあるかもしれないが、これは少し難しいタスクとなる。

私のObsidian Publishではpublish.jsによる拡張でTwemojiを使っていて、どのプラットフォームでも同じ絵文字が表示されるようになっている。例えば 🐛 (U+1F41B)は虫の絵文字なのだが、Twemojiでは紫色のかわいらしい虫⁹が表示される。

TwemojiはJavaScriptのライブラリで、HTMLエレメントを与えると絵文字を検知してTwemojiの絵文字に変換するインタフェースを持っているので、単純に考えればPublish上のテキストをそのインタフェースに流し込めばいいはずなのだが、この企みは次の理由により失敗する。

1. Obsidian Publishでは非同期処理でHTMLを描画しているので、DOMContentLoadedイベントが発火した際にはまだ文章が描画されていないことがある。
2. ページを移動したときは新しいページを読み込むのではなく、ページの内容を差替える。

しかし、JavaScriptも日々進化しており、私たちにはMutationObserverという答えがある。このオブジェクトは再帰的にDOMツリーを監視して、変更があったときに教えてくれる。このときには文章が描画されていることが保証されているので、それをTwemojiのインタフェースに与えれば絵文字を表示できるはずだ。もちろん、このほかにも正規表現やカスタム関数を使って特定のキーワードを自動的に装飾したいといった用途にも応用できるだろう。

おわりに

今日は簡単なObsidianの説明と、それをウェブに公開できるPublishプランについて、実際に使ってみて直面したことをほぼすべて列挙した。キミはすでにPublishを知っている。あとはコントラクトするだけで、妄想や機密文書を瞬時にホログラム・インターフェースに叩き出して、ユウジョウもバイオ燃料の在庫も、すべてがコトダマ空間にパブリッシュ可能だ¹⁰。

目立たないだけかもしれないが、Publishは先行事例があまりなく、海外の有料サービスでもあるので、抵抗感がある人がいるかもしれない。この内容で多少なりともObsidian Publishを導入するための参考になれば嬉しい。

Footnotes

1. 見たままが得られるの意。表示されている内容と編集している内容が一致していること。 ↩

2. インターネット黎明期はこれが当たり前だった。みんな時間にゆとりがあったのである。 ↩

3. Virtual Private Server (仮想専用サーバー)。仮想化技術によってひとつの物理マシンに複数の環境を押し込めて切売りする仕組み。 ↩

4. Amazon Web Services (AWS), Google Cloud Platform (GCP), Microsoft Azure (Azure)に次ぐクラウドプラットフォーム。よく落ちる。 ↩

5. 中国・日本・韓国で共通して使っている漢字のこと。使っているフォントによって多少表示が異なる。 ↩

6. 本来アクセスするサーバーの代理としてアクセスを受け付けて、いい感じにやりとりしてくれるサーバーや仕組みのこと。 ↩

7. Contents Delivery Network (コンテンツ配信ネットワーク)。世界中に分散したサーバーで同じコンテンツを高速に配信する仕組み。 ↩

8. CloudWatchログを確認したところ、そのような挙動を示していた。 ↩

9. これには議論の余地がある。 ↩

10. お使いの環境によります。機密情報の取扱いは守秘義務や法令、社則等に従ってください。 ↩