【ZennPad】VS CodeからそのままZennを書きたいので拡張機能を作った
開発中に「これ後でZennに書こう」と思ったまま、結局書かずに流れていくことがよくありました。
原因はシンプルで、Zennを書くまでのフローが少し重いからです。
以前は Zenn Editor を使ってローカルの Markdown を編集していましたが、
- リポジトリを開く
- VS Code を立ち上げる
- 記事を書く
- main ブランチに push する
この一連の流れが、ちょっとした知見を書くには仰々しく感じていました。
そこで「開発中のVS Codeから、そのままZennを書けたらいいのに」と思い、VSCode拡張機能 ZennPad を作りました。
ZennPadでできること
ZennPadは「Zenn版のGistPad」をイメージしています。
メモ帳に書く感覚で、Zennに知見を残せることを目標にしています。
1. サイドバーからZennの記事・Bookを直接開いて編集
VSCodeのサイドバーにZenn専用のツリーを表示し、
記事・下書き・Bookをすぐに開いて編集できます。
2. リモートリポジトリのファイルをローカルのように扱える
Zenn用リポジトリをワークスペースとして開く必要はありません。
GitHub上のファイルを、あたかもローカルファイルのように編集できます。
-
clone不要
-
pull / pushを意識しなくていい
-
編集内容は自動でGitHubに反映
「Zennを書くためのリポジトリ」を意識しなくて済むのが、個人的に一番大きいポイントです。
3. 公開・反映を意識せずに書ける仕組み
Zennは「GitHub連携 → 自動デプロイ」という仕組みですが、
ZennPadではこの流れをなるべく意識せずに済むようにしています。
-
自動同期
-
明示的なRefresh / Flush
-
Previewコマンドによる事前確認
書くことに集中できる状態を作るのが狙いです。
GistPadのUI/UXを参考にしつつ、Zennの執筆フローに合わせた設計となっています。この記事では、ZennPadの仕様や機能、ZennPadを用いた執筆体験について解説します。
導入方法（簡単）
- マーケットプレイスから ZennPad をインストール
-
ZennPad: Sign in to GitHubで認証
- リポジトリを設定（もしくはコマンドで選択）
- ZennPad: Refresh で構造を取得して編集開始
プレビューを使う場合は zenn CLI が必要です。
既存ツールとの違い
vs Zenn Editor
-
Zenn Editorは「ローカルにZenn用ディレクトリを開いている前提」
-
ZennPadは「リモートリポジトリを直接編集」する設計
-
ライブプレビュー機能はZennPadでも提供
-
複数ディレクトリ操作などは現時点では未対応
vs Zenn Preview
-
ブラウザ版VS Code向けのPreviewが主目的
-
ZennPadとはスコープが異なる
ZennPadを用いた執筆体験
ここからは、実際に ZennPad を使って記事を書くときの体験をベースに、どんなことができるのかを紹介します。
設計として一貫しているのは、「Zennを書くための操作を、VS Code の通常作業から極力浮かせない」ことです。
✍️ 記事・本・画像管理
ZennPad では、Articles / Drafts / Books / Images / Files を Repositories ビューとしてツリー表示します。
Zenn 用リポジトリの構造をそのまま反映しつつ、VS Code 標準の操作感で扱えるようにしています。
ツリー上のノードはコンテキストメニューから操作でき、以下が可能です。
- リネーム / 複製 / 削除
- Zenn / GitHub へのリンクコピー
- ブラウザーで直接開く
新規作成
ZennPad: New Article を実行すると、日付入り slug と frontmatter を自動生成した Markdown が作成されます。
Book や Chapter も同様に、最低限のテンプレート付きで作成できます。
公開・非公開の切り替え
ZennPad: Publish Article / Unpublish Article で、frontmatter の published をトグルできます。
公開済みの記事は Open on Zenn からそのままブラウザーで確認できます。
その他の管理機能
- 記事の並び替え（日付順 / タイトル順）
- Zenn / GitHub URL、絶対パス / 相対パスのコピー
- Drafts 配下の下書きも同じ操作感で管理可能
🧑🤝🧑 リポジトリと同期
ZennPad は GitHub Contents API を使い、リポジトリを 仮想ファイルシステムとして扱います。
ローカルに clone する必要はありません。
-
サインインと選択
ZennPad: Sign in to GitHubで認証し、ZennPad: Choose GitHub Repositoryで対象リポジトリを選択します。 -
自動同期
編集内容はzennpad.workBranch（デフォルトzenn-work）に自動反映されます。
ステータスバーから同期の一時停止 / 再開が可能です。 -
フラッシュ
ZennPad: Flush Pending Syncを実行すると、保留中の同期キューを即時反映できます。 -
デプロイ
Deploy to Zennコマンドで work ブランチから main ブランチへ反映し、Zenn 側に公開されます。 -
設定パネル
Actions ビューの Settings から、owner / repo / branch / zennAccount を GUI で変更できます。
関連: 👉 アカウントにGitHubリポジトリを連携してZennのコンテンツを管理する
🔍 Search ビュー
Search ビューは、ファイル名・タイトル・本文を横断検索できる Webview です。
ケースセンシティブ / 単語一致 / 正規表現の切り替えに対応しています。
検索結果からは、該当ファイルを直接開けます。
🖼️ 画像の取り込み
Markdown への貼り付けやドラッグ＆ドロップを検知すると、画像を
/images/<timestamp>.<ext> に保存し、 を自動挿入します。
対応している挿入方法は以下です。
-
Ctrl+V（クリップボード貼り付け） ZennPad: Insert Image from File- エディタ右クリック → Insert Image from File
Zenn の画像配置ルールに従って保存されるため、パスを意識する必要はありません。
🛰️ プレビューとデプロイ
ZennPad: Preview を実行すると、アクティブな Markdown を同期しつつプレビューを表示します。
/images へのリクエストもローカルで解決されるため、ドラフト中でも実際の表示に近い見た目を確認できます。
🎯 Actions ビュー
Actions ビューは、ZennPad に関する操作へのクイックアクセスをまとめたランチャーです。
- サインイン
- 設定パネル
- Zenn プロフィール
- ヘルプ・ガイドへのリンク
未実装アイディア
ZennPad はまだ発展途上です。今後は以下の機能を検討しています。
- 複数リポジトリ接続
- GitHub PAT 認証（主に vscode.dev 向け）
- デプロイ回数 Quota の可視化
- 同期キャッシュによる起動高速化（部分対応中）
- Books 機能の拡充
- 大きな画像 / 非対応 MIME の警告・スキップ
- Scraps 機能（スコープ外の可能性あり）
- 下書きアーカイブ機能
- タグ・言語などの統計情報表示
-
GitHub ライクなアクティビティグラフ（いわゆる"草"）
- 書いた量が可視化されると、続けやすくなる気がしている
おわりに
ZennPadは「完璧なZenn執筆環境」を目指したツールではありません。
むしろ、思いついたことを雑に書き始められる状態を作るための道具です。
まだ発展途上ですが、
「Zennを書くハードルを下げたい」という人には刺さるはずやと思っています。
Links
Discussion