Obsidianでブログを書く方法が自分なりにほぼ確立できましたのでシェアします。
Obsidian – Connected Notes 1.4.16
価格: 無料 (Dynalist Inc.)
その前に、まずはObsidianでブログを書くメリットを整理します。
１ Obsidianでブログを書くメリット
メリットは３つあります。順番に見ていきましょう。
（１）蓄積した関連ノートを参考にしやすい
１つは、コミュニティプラグイン「2HopLinksPlus」によりScrapboxのように２ステップ先のリンクしたノートなどを関連ノートとして表示できることです。Mobileでも使えます。
特にiPadやMacの場合は右のサイドバー、iPhoneの場合はノート下部に表示させると、自ずと関連ノートが目に入ります。
これにより、蓄積した過去のノートが自然と目に入り、見返す機会になったり、つなげて考えを深める機会になったり、新たな考えが浮かぶきっかけになります。
（２）蓄積したノートとつながりが生まれやすい
もう１つはコミュニティプラグインの「VariousComplements」のサジェスト機能によるメリットです。
テキストを入力していると、Obsidian内のノートのタイトルやリンクと部分的に一致する内容があればサジェストしてくれます。しかもそれを選択するとダブルブラケットをつけてくれますのでリンクになるんです。こちらもMobile対応。
これにより、先ほどと同じく、過去のノートとのつながりを生んだり、今書いている記事に活かしたり、過去のノートを見返す機会になります。
また、キーワードを入力する手間が省けます。
例えば、先ほどの「VariousComplements」というキーワードを例にあげると、そのまま入力するのは面倒ですが、最初の文字の「va」と入力しただけでサジェストしてくれましたので、楽に入力できました。
（３）過去のブログの記事を活用しやすい
最後は、過去のブログの記事が活用しやすいことです。
ブログの原稿をObsidianで書けば、当然、原稿がObsidianに蓄積していきます。原稿を書いているとき、キーワードなどをダブルブラケットで囲めば、前述の（１）のとおり、「2HopLinksPlus」により関連ノートに表示されます。
また、（２）のとおり、記事のタイトルやリンクに含む言葉を入力するとサジェストされたり、記事間をリンクでつなげたりできます。
過去のブログの原稿がObsidianの中にあれば、それらがつながり、過去の原稿を活用しやすくなるのです。
以上の３つはいずれも、Obsidianに蓄積した過去のノートを有効活用できる可能性を強く感じます。
それはすなわち、
ということです。
このインパクトが強く、長年、ブログのエディタとしてUlyssesを使っていましたが、完全にObsidianに乗り換えることにしました。
さて、次に本題のブログを書く手順にいきます。
２ Obsidianでブログを書く手順
ブログは、WordPressです。テーマは「JIN（ジン）」を使っていますが、JINでなくても参考にしていただける内容です。
なお、Obsidianでブログを書く手順を構築するにあたり、以下の２つにこだわりました。
- できるだけObsidianでの表示と公開したブログの表示は同じになるようにする
- MacでもiPadでもiPhoneでも同様な操作で行えるようにする
（１）全体像
まず、Obsidianでブログを書く手順の全体像を先に言うと、
という流れになります。
なぜ、Draftsを介しているなぜ、メモが大事なのか。
コミニュティプラグインのWordPressを使えば、直接、ObsidianからWordPressへ投稿できますが、Mobile（iPadとiPhone）では動かないんです。
ちなみに、iPhoneやiPadで、アドレススキームを使ってObsidianからWordPressアプリへの投稿を試しましたが、MarkdownがHTMLに変換されませんでした。
WordPress – サイトビルダー 23.4
価格: 無料 (Automattic)
WordPressの最新エディタであるグーテンベルクは、Markdown対応とは謳っていますが、コピペや今回のような外部からの取り込みではMarkdownに対応していないようです。
そこで、Draftsです。
Draftsは、WordPressに投稿できるActionがありますので、これを使うことにしました。また、Markdownの変換の問題についても、DraftsのActionを使うことにしました（詳細は後述）。
Drafts 40.1.1
価格: 無料 (Agile Tortoise)
（２）Obsidianで原稿を作成
Obsidianでブログの原稿を書くとき、画像をどうしているのか。アプリの紹介、他のブログの紹介、記事の装飾など、これらをどうしているのか。分けて説明していきます。
■画像
画像は「Gyazo」にアップロードして、そのURLをObsidianに書いています。
以下の記事で紹介されている「BlogCard.md」を使うと便利です。Gyazoで得たURLをObsidianにペーストして、この「BlogCard」を発動させると、Obsidianで画像が表示されます。後述の方法でそのままWordPressへ投稿しても問題なく表示されます。
ちなみに、以下の引用とおり、GyazoのURLの場合は画像の埋め込みになりますが、URLの場合はブログカード、YouTubeのときは動画の埋め込みになります。
カーソル行のURLアドレスをブログカードに変換します。 YouTubeのときは動画の、Gyazoのときは画像の埋め込みになります。
もともとObsidianを使い始めたのは、ローカルにmdという汎用的なファイルを保存することによる存続性に惹かれたところがありますので、画像をWebサービスの「Gyazo」に頼るは少し心配ではあります。
ただ、よく考えたらWordPressがGyazoに変わっただけで構図としては変わっていないので、画像だけは割り切るしかないかなと思っています。
■他のブログの記事を紹介
ブログ内で他のブログを紹介するとき、リンク形式のテキストで紹介する場合もあれば、見やすいようにブログカードにする場合もあります。
リンク形式のテキストの場合は、以前、以下の記事で紹介したMarkdown用のブックマークレットを使っています。
ブログカードは、前述の「BlogCard.md」を使っています。URLをObsidianにペーストして、「BlogCard」を発動させると、ブログカードに変換されます。
ちなみにiPhoneとiPadでは、以下で紹介されているショートカットアプリを使うこともあります。該当のブログをSafariで開いて、共有からこのショートカットアプリを発動すると、ブログカードのURLがクリップボードに保存され、自動的にObsidianが起動するので、あとはペーストするだけです。
ただ、なぜかMacだとうまくいきません（クリップボードに保存されるURLが違う）。
■アプリを紹介
ブログ内でアプリを紹介する場合は、以下の記事で紹介されているスクリプトを活用させていただいています。
使い方は記事を引用します。
カーソル位置の文字列をAppStoreで検索し、一番初めにヒットしたアプリの紹介カードを出力します。対象となるのはiPhone用のアプリです。 iPad用を検索したい場合は、行頭に空白を開けてください。
思ったアプリにヒットしないときは、一度AppStoreでアプリIDを調べてみてください。共有ボタンから「リンクをコピー」でURLアドレスが取得できます。 そのアドレスの末尾に「id1225570693」といったアプリIDがあります。このIDを検索対象にすると確実にアプリを拾うことができます。
■本や商品を紹介
ブログ内で本を紹介する場合は、「カエレバ風」を使っています。
ここで得たコードをそのままObsidianに貼り付けるだけです。
残念ながらObsidianでは以下の画像のとおり書影だけ反映されませんが、WordPressでは表示されます。
ただ、最近、本の紹介は「もしもアフィリエイト」のかんたんリンクをよく使っています。この場合は、Obsidianでは表示されないので、Draftsに移動させてからURLを貼っています。
また、私はあまり使いませんが、本ではなく商品を紹介する場合は、類似のツールである「カエレバ」を使うとよいでしょう。
■コードを紹介
ブログ内で、HTML、CSS、JavaScriptなどのコードを紹介する場合は、以下の画像（Obsidian公式ヘルプ から抜粋）のとおり、トリプルバッククォートで囲み、最初のトリプルバッククォートの後に言語名を書きます。（jsとはJavaScript）
ただ、後述のとおり、DraftsでMarkdownからHTMLに変換した後、WordPressへ投稿する直前にコードを修正しなければいけません。
■枠を作る
Obsidianでは、テキストを枠で囲む装飾をしたいとき、Calloutsという機能が便利です。
ただこれは、Obsidianの独自記法なので、当然、WordPressでは反映されません。
そこで、私はHTMLで反映する囲み枠を使うことにしました。Obsidianは、HTMLを反映するため、ObsidianでもWordPressでも表示させることができるからです。
そこで活用させていただいたのがこちらのサイト。さまざまな囲み枠のデザインのHTMLが提供されています。
Obsidianで囲み枠のHTMLタグを瞬時に入力できるようコミュニティプラグインのTemplaterを活用したアクションを自作しました。
ちなみに、私はJavaScriptは理解していません。素人です。
単純に任意のテキストをタグで囲めばよいので、以前の以下の記事で紹介したスクリプトをアレンジすればよいと思って作りました。
ただ、エラーが出るので、行き詰まってしまいました。
そこで、ChatGPTに「どこが誤っているか教えて」と投げかけたところ、スクリプトを書き直してくれました。
これがかなり便利で、テキストを選択して、ボタンを押せば一瞬で枠で囲んでくれます。しかも、これがWordPressでも同じように表示されるのです。
実際、こんな感じ（iPad）。
■（Twitter）の埋め込み
（Twitter）のポスト（ツイート）を埋め込む場合は、残念ながらObsidianとWordPressでは同一のコードではできません。
埋め込みたいポストのURLをコピーして、Obsidianでは（）とすれば、埋め込むことができます。
ただ、WordPressでは、このままでは反映されません。コード自体も表示されず記事には何も表示されません。WordPressではポストのURLをそのまま書けば反映されます。
よって、私はObsidianでもWordPressでもポストを表示させたいので、Obsidianでは、（）とURLの両方を書いて、WordPressへ投稿しています。
■表を作る
Obsidianで表を作る、すなわちMarkdownで表を作るのは結構面倒です。
そこで、コミュニティプラグインの「dataloom」を使っています。このプラグインは簡単にMarkdownの表を作ることができます。
Markdownで書いた表は、Obsidianで表示されるのはもちろんのこと、WordPressへ投稿しても問題なく表示されます。
（３）Obsidianで書いた原稿をDrafts経由でWordPressへ投稿
Obsidianで原稿を書けたらDrafts経由でWordPressへ投稿します。
■Obsidian→Drafts
まず、ObsidianからDraftsへの送信は、Templaterのスクリプトを使います。
@Tadashi_MAMAN さんに作っていただきた。
以下のコードを新規ノートにペーストしてTemplaterで登録してください（登録方法は以前の以下の記事を参照）。
※上記の.replace(/#[^\s#]+/mg, "")はタグを取り除くコードだが、前述の囲み枠のコード（カラー指定）に影響が出るため、このコードは削除した
<%* const f = app.workspace.getActiveFile() const title = f.basename body = (await app.vault.cachedRead(f)) .replace(/!?\[\[(.+?)\]\]/mg, "$1") .replace(/#[^\s#]+/mg, "") await navigator.clipboard.writeText(`${title} ${body}`) %>
なお、このスクリプトでDraftsへ送信すると、ダブルブラケットを外してくれます。
なお、Draftsを経由させる理由は前述のとおりですが、もう1つメリットがあります。
それは、どうしてもWordPress（もしくはテーマであるJIN）特有のコードを追加したい場合、WordPressのエディタよりDraftsで編集した方が操作がしやすいことです。
具体的には、私は「吹き出し」を使いたいとき、JINの独自記法なのでDraftsで書き加えてからWordPressへ送信しています。
■Drafts→WordPress
次に、DraftsからWordPressへ投稿するときは、DraftsのActionを使います。まず、MarkdownからHTMLへ変換するActionを発動し、その後、WordPressへ投稿するActionを発動させます。
DraftsのActionは、デフォルトの「Markdown＞HTML」と「Post to WordPress」を使っています。
このActionは、DraftsDirectoryにあるものなので、Draftsの無料版でもActionを追加して使うことができます。
初回のみWordPressのアカウントとパスワードの入力が必要です。
ちなみに、Draftsの有料版でないとActionの編集はできませんが、このActionを実行した後、WordPressの投稿一覧を開くようにActionを編集しています（1ヶ月だけ有料プランにしてActionを編集後に解約しました）。
こうしておけば、Draftsへ送信後、すぐにWordPressで公開する作業ができます。
留意点
WordPressへ投稿するとき、以下の留意点があります。
⚫︎コードを紹介する場合
HTMLに変換するとき、<pre>タグがつくことによって、WordPressに投稿するとコードが記事をはみ出して表示されてしまします。よって、<pre></pre>は削除しておく必要があります。
⚫︎画像でサイズを指定している場合
Obsidianでは、画像のサイズを指定できます。
これをDraftsでHTMLに変換すると以下のとおりになります。画像サイズとして入れた数字がキャプションの扱いになってしまうのです。
<figure>
<img src="https://gyazo.com/eecd652ad8ac689552c1da2001a2bea8/raw" alt="|350" />
<figcaption>|350</figcaption>
</figure>
よって、以下のとおり書き換える必要があります。
<figure>
<img width='150px' src="https://gyazo.com/eecd652ad8ac689552c1da2001a2bea8/raw"/>
</figure>
■WordPressで公開
DraftsからWordPressへ投稿されたら一度編集画面を開きます。
あとは、アイキャッチの画像を追加し、カテゴリーやタグ、URLを設定して、公開ボタンを押すだけです。
これで、ブログの記事の公開が完了です。
３ おわりに
いかがでしたでしょうか。かなり詳細にObsidianでブログを書く方法を紹介しました。
これまでブログは、直接WordPressに投稿できるエディタが便利だと思っていましたが、それ以上に便利なのがObsidianです。
それは、「１」で書いたとおり、Obsidianに蓄積した過去の原稿やアイデアメモなどのノートを有効活用できるからです。
Obsidianにメモが増えれば増えるほど、Obsidianで書くブログの原稿のクオリティが上がることにつながるのです。
そう考えると、どんどんObsidianに原稿を蓄積したくなりますね。
今回の記事で、ブログの原稿をObsidianで書くことに少しでも興味を持ったら、ぜひ、試してみてください。
▼こんな本も（Obsidianで作る読書ノートが出てきます）
