Zenn
🪨

【Obsidian】Zennの編集環境をいい感じに整える

に公開
Zenn
Markdown
Obsidian
idea

はじめに

以前までは、VSCodeを利用してZennの編集環境を整えていましたが、Obsidianの方がMarkdown特化でいい感じに扱えたので、ざっくり紹介します。

↓VSCodeの環境構築については下記参照

https://zenn.dev/kiku09020/articles/vscode-markdown-kkp

Obsidianとは

Markdownに特化したテキストエディタです。
プラグインなどが豊富だったり、外観やショートカットキーのカスタマイズなどのカスタマイズ性が高く、ユーザーごとにメモを取りやすい環境を構築しやすいのが特徴です。

https://obsidian.md/

Zennの導入・記法

プラグイン

Zennの記事を編集する環境でいい感じに使えるプラグインをいくつか紹介します。

コアプラグイン

公式のプラグインです。

  • Template
  • WebViewer
  • コマンドパレット

Template

  • テンプレートを使用し、zennの記事のプロパティの欄をすぐに作成することができます。
  • 以下のようなテンプレートを作成し、記事作成時にテンプレートを適用することで楽に記事のセットアップができます。
    • 言語とかフレームワークごとにテンプレートを作成して、絵文字やトピックを予め入力して時間短縮したりできます。
  • コミュニティプラグインにTemplaterという詳細にテンプレートを設定できるプラグインが存在しますが、便利な代わりに設定などに手間がかかるため、シンプルなテンプレートでいい場合は当プラグインで十分です
---
title: 【】
emoji: 📝
type: tech
topics: 
published: false
---
## はじめに


## さいごに

WebViewer

  • Obsidian内でzennのプレビュー画面を確認しながらリアルタイムに編集することができます。

コマンドパレット

  • 操作などをコマンドとして実行できる機能です。
  • コミュニティプラグインのコマンドも扱えたりします。

コミュニティプラグイン

Git

  • Obsidianでgit操作を行えるプラグインです。
  • VSCodeのように、GUI上で気軽にgit操作ができます。
  • スケジュール設定をしてプッシュ・プルを行ったりできます。

Custom Attachment Location

  • 添付ファイルのパスを変更できます。
  • Zennの場合、imagesディレクトリに添付ファイルを格納する必要があるため、その設定を行う必要があります。
Location for new attachments:  images/${folderPath}/${fileName}
Pasted file name: ${fileName}-${date:YYYYMMDDHHmmssSSS}

Templater

  • コアプラグインよりも詳細にテンプレートを作成できるプラグイン。
  • テンプレートの挿入のみならず、テンプレートファイルの作成ができる
  • JavaScriptを記述して、ファイル操作やユーザー選択を介してファイル作成することができる
    • ファイル名の選択などを行える
---
<%* 
	// ファイル名(slug)の指定
	const slug = await tp.system.prompt('slug(一意な値)を入力', 'article-title-kkp') 
	// ファイル移動
	await tp.file.move('/articles/' + slug)
%>

<%* const title = await tp.system.prompt('記事タイトルを入力', '【】') %>
title: "<%* tR += title %>"
emoji: "<% await tp.system.prompt('絵文字を選択', '📝') %>"
type: "<% await tp.system.suggester(['tech', 'idea'], ['tech', 'idea'], false, '記事のタイプを選択') %>"
topics: 
published: false
---

(参考：プラグインを導入しよう｜Obsidian.Zenn)
(文法：Introduction - Templater)

  • また、テンプレート機能を使うことでVSCodeのスニペットのように扱えることができます。
:::details 詳細
:::

:::message
:::

:::message alert
:::

(参考：プラグインを導入しよう｜Obsidian.Zenn)
(記法参考：ZennのMarkdown記法一覧)

  • これらのテンプレートをコマンドパレットやショートカットキーで呼び出すために、設定で割り当てる必要があります。

  • URL貼り付け時に、URL先のページのタイトルをURLテキストとして反映してくれます。
  • リンクカードとして表示させるため、URLのみを貼り付ける場合は Ctrl + Shift + vでいけます

Terminal

  • Obsidian内でターミナルを操作できるプラグインです。
  • zenn previewコマンドなどを実行したい場合に使えます。
  • 描画バグがあったりするので、普通に外部で起動した方が早いかもしれません。。。

Shell Commands

  • シェルのコマンドを登録して操作することができます。
  • シェルの種類をカスタマイズすることができます。
    • 文字化け対策の設定を入れたカスタムシェルを指定した方がいい感じです
  • zenn previewの登録などに使えます。
    • WebViewerと連携して、Obsidian内で表示するようなコマンドは実装できなさそう…？
  • また、添付ファイルをMarkdown内に貼り付けたときのパスをzenn仕様に変更するコマンドなども登録することで、楽に画像表示できます。

文字化け対策

  • Custom Shell > Wrapper for shell commandでエンコード処理用コマンドを追加する
# Encoding
$OutputEncoding = [console]::InputEncoding = [console]::OutputEncoding = New-Object System.Text.UTF8Encoding;

# Content
{{!shell_command_content}}

既定のブラウザでプレビュー画面を表示するコマンド

cmd /c "cd {{vault_path}} && start /b cmd /c "npx zenn preview" && ping -n 4 127.0.0.1 > nul && start "" http://localhost:8000"

(参考：ObsidianでZennリポジトリをPreviewする | －273℃/竜原)

Markdownの添付ファイルのパスをzenn仕様に変更するコマンド

  • 添付ファイルを貼り付けると、/images/のようなパスになりますが、これだとzennに正しく表示されないので、/images/に置換して対応する必要があります。


プレビュー画面でこんなかんじの注意書きが表示されてしまう

$filePath  = "{{file_path:absolute}}"
$content = (Get-Content $filePath -Encoding "UTF8") | ForEach-Object { $_.Replace("/images/", "/images/") }
$content | Set-Content $filePath -Encoding "UTF8"

(参考：PowerShellでファイル内の文字列置換 (sed -i) をする | 晴耕雨読)

さいごに

これらのプラグインを使って、楽にZennの記事作成環境を自分が思う存分整えましょう！

参考

今回はざっくりした設定を紹介しましたが、より詳細な設定については下記記事がとても参考になると思います。

https://zenn.dev/estra/books/obsidian-dot-zenn

Discussion