ObsidianでZennの記事を書けるようにしてみた

Zennの記事をObsidianで編集したい理由

長文の書き心地がいい！

1番はなんと言っても書き心地がの話ですよね。

コードエディタだとどうしても長文を書くときに少し違和感を感じてしまいます。改行し続けるのも手ですが、自分はあまりそれがビジュアル的に好きではなくて・・・どうにかしてObsidianの書き心地でZennの記事を書けないかと考えてみました。

記事の種を集めたい

Obsidianのデイリーノート機能を使って自分の学びや調べたことを記録することで、記事につながる種を見つけることができるんじゃないか？もちろん、他のところでメモっていくのもありですが、どうせなら一箇所にまとめたいと思ったのでObsidianに集約できないかと考えました。

Obsidianで書くとできないこと（デメリット）

URLのカード表示

ZennのURLカード表示は独自の形式を使っているため、Obsidianで書くとただのリンクに見えます。でもプレピューで確認すればOKなので個人的にはあまり問題視してません。

メッセージボックスの表示

メッセージボックスもURLカードと同様で、Obsidianだとただのテキストに見えます。こちらもプレピューを確認すればいいので、そこまで問題ではないと思います。

ObsidianでZennの記事を書く方法

1. Zennの記事をローカルで書ける状態にする

ZennはGitHubを使えば記事や本をローカルで書くことができます。セットアップの解説はこちらでしているので、そちらのセットアップを終えてから戻ってきてください！

2. ObsidianでZennレポジトリを開く

Obsidianをインストールしていない場合はこちらのリンクからダウンロードしてください。

Obsidianを立ち上げるとこんな画面が開きます。

上から2番目の「保管庫としてフォルダを開く」をクリックして、Zenn用のレポジトリフォルダを選択しましょう。

ここまでできれば、もうZennの記事をObsidianで書くことができますが、プロセスをさらに楽に、スマートに進める方法も解説して行きます！

Obsidian上でZennの記事をスマートに書くTips

テンプレートを作成

Obsidianのコアプラグインのテンプレート機能を使えば、ファイルを作成すれば必要な項目が自動生成される様にできます。この機能があれば npx zenn new:article も必要ありません！

テンプレートファイルの作成方法は細かく解説しませんが、見た目はこんな感じです。

画像用のフォルダを作る

Zenn上で表示したい画像を入れるフォルダ /images を作成して、新規添付ファイルの場所をそこに指定しておくと追加した画像が勝手にそのフォルダに格納されるのでとても便利です。さらに、新規リンク作成形式を「保管庫内での絶対パス」にして、ウィキリンクの使用をオフにすると画像が自動でZenn対応のパス形式になるのでおすすめです！（これらの設定はファイルとリンクのタブで設定できます。）

GitHubに上げないフォルダを選択しておく

Zennの更新にはObsidianの設定ファイルなどは必要ではないため、GitHubにあげないでおく方がクリーンに記事の管理ができます。方法は簡単、コードエディタで自動生成された .gitignore ファイルを開き、一番したにGitに上がって欲しくないファイル名を書き出すだけです。

Obsidianの設定ファイル全てを上げたくない場合は .obsidian と記載するだけでOKです。

自分は追加で、毎日のメモフォルダも対象外と指定しました。今後変えるかもしれませんが、今は気軽にメモを取りたいので、とりあえず公開しない選択をしました。

まとめ

思ったより簡単にObsidianでZennの記事を書くことができたのでとても嬉しいです！自分の様にObsidian上で記事を書きたいと思っている方の参考になればと思います。役に立ったと思ったらいいねとフォローお願いします！