WordPress 運用だった「無聊写記」を Quartz 5 運用に移行してから、ひと月たった。
Obsidian の Canvas を使ってみる
Obsidian には、Canvas というビジュアルツールが内蔵されている。
『蒲団』 05や「ParrのユニクロTシャツ」のノートで使ってみたところ、自分の思考を整理していくのに役に立つことが分かった。一方で、使っているうちに Canvas の使いにくさも見えてきた。
- ノードの重なり順（前面・背面）の調整が難しすぎる。現実的には不可能でハック的に解決するしかない。
- 破線、点線が使えない。
- テキストだけちょっと載せたいのに、ノードの枠線を非表示にできない。
- エッジの曲線が曲がり過ぎる。
Advanced Canvas を導入する
調べてみると、Advanced Canvas というコミュニティプラグインの存在を知った。エッジの曲線が曲がり過ぎることは解決できないが、その他の不満はほぼ解決した。標準 Canvas よりも表示やスタイルを細かく調整できるので、今後はこちらを使っていくことにした。
Quartz では、そのまま再現されない
ところが、Advanced Canvas で作った Canvas を Quartz で表示すると、Obsidian 上の見た目がそのまま再現されるわけではなかった。
Advanced Canvas で追加した表示設定の多くは、そのままでは Quartz の canvas-page に反映されない。また、標準の canvas-page 自体も Obsidian の Canvas とは細部の表示が異なる。
Advanced Canvas の設定は .canvas ファイル内の styleAttributes として保存されている。そこで、その情報を Quartz 側でも読み取り、同じ意味になるよう canvas-page の表示処理を追加していくことにした。
canvas-page をフォークする
私の使う機能に合わせて表示させるため、Quartz の Canvas 表示用プラグイン canvas-page をフォークして改造した。
以下は、現在の表示確認用 Canvas である。
CANVAS 表示テスト
元記事へのリンク
この Canvas では、グループ、ノード、エッジについて、色や枠線、線種などの表示を確認できるようにしている。
改造した内容
グループ
ノード
エッジ
- Obsidian Canvas は曲率が高すぎ、Quartz の
canvas-pageは曲率が低すぎるので、中間をとった。 - ラベルの背景サイズがテキストと一致していなかったので、文字の実寸に合わせるようにした。
- ラベル背景は、デフォルトでは半透明でエッジに重なると読みにくかったため、枠線あり・背景不透明にした。
- エッジの線を実線だけでなく、点線・破線・長い破線から選択できるようにした。
改造した canvas-page
Quartz Community の canvas-page をフォークして使用している。
- オリジナル：Quartz Community / canvas-page
- カスタマイズ版：hyodoarch / canvas-page
よろしければ、お試しください。
インストール方法、設定方法については、README.md をお読みください。