😽

Zenn の新機能「GitHub画像管理」と VSCode の Paste Image プラグインを組み合わせれば快適

waddy_u2021/07/27に公開

Zenn の新機能がリリースされました。私も早速試しています。

https://twitter.com/zenn_dev/status/1417658101335924739

これまで、GitHub連携している場合は以下のステップが必要でした:

  1. まずローカルに画像を保存する
  2. 相対パスで記述してプレビューする
  3. コミット直前に画像をZennにアップしてURLを書き換える

このリリースにより次の手順に変更すればOKになります:

  1. /images ディレクトリに画像を保存する
  2. 記事や本に ![](/images/sample.png) のように画像を埋め込む
  3. コミット・プッシュする

画像のアップと記事の画像パス修正が不要になります。嬉しいですね。

スクリーンショットを張り付ける場合は、Zennの画像ペースト機能が便利

が!しかし、ひとつ考えなければならない点があります。それがスクショを記事に埋め込みたいケースです。スクショは以下のようにしてZennにアップロードできます。

撮影した後、Zennの画像アップロード画面で Cmd+V ペーストしています。保存する処理を挟まなくていいので、便利です。つまり、GitHubで画像管理するよう統一しつつ、スクリーンショットを張り付ける利便性は損ないたくない というケースに遭遇しました。

VSCode Paste Image の設定を修正して使う

そこで、ブログの執筆を VSCode で行っている場合、Paste Imageの利用を検討します。これでスクショ撮影、ペーストして埋め込み完了という使用感は維持しつつ、画像そのものはGitHubリポジトリのフォルダに保存して、Zennに管理を任せます。まずは何も設定は修正せずに Paste Image を導入します。スクショを撮って Cmd+Option+V で画像を張り付けると…

.
└─articles
  ├── example-image1.png
  └── example-article-1.md

このように記事と同じディレクトリに保存されてしまいます。これでは Zenn CLI による管理対象になりません。そこで、設定を修正します。

Base Path

text
- ${currentFileDir}
+ ${projectRoot}

保存場所の起点が、プロジェクトルートになるようにします。

Insert Pattern

text
- ${imageSyntaxPrefix}${imageFilePath}${imageSyntaxSuffix}
+ ${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}

スラッシュを追加して、 ![](/images/image-paste-zenn-upload/2021-07-21-12-35-05.png) のようにパスの先頭にスラッシュが入るようにします。

Path

text
- ${currentFileDir}
+ ${projectRoot}/images/${currentFileNameWithoutExt}

これで、 /images/blog-slug-name/image.png のようなパスに保存されます。設定をかえた後、実際に記事内へペーストしてみましょう。

![](/images/example-article-1/image1.png)
.
├─ articles
│  └── example-article-1.md
└─ images
   └── example-article-1
       └─ image1.png

するとこのよう形で保存されます。コピペでスクショを保存しつつ、 Zenn CLI でプレビューでき、なおかつコミット・プッシュすれば Zenn側にも反映可能な状態をつくることができました。

おわりに

Paste Image を Zenn の画像管理に合わせる設定方法を紹介しました。「こいういう設定のほうがいいよ」などコメントがありましたら教えていただけると嬉しいです。

なお、すでに 別の Paste Image 設定を入れている場合は、 ワークスペースによる設定の切り替え を検討してください。今回の Zenn のリリースで、画像も GitHub 管理下のものを直接アップロードできるようになり、コンテンツのポータビリティが向上しました。「Zennで書いてみたいけど画像をわざわざアップロードしないといけないのが大変だなあ」と思っていた方はご検討ください。

Zenn Tech Blog

Zenn開発チームのテックブログです。Zennの開発・運用にまつわる技術的な知見を投稿します。主な技術スタックは React / Next.js / TypeScript / Ruby on Rails / Google Cloud などです。

Discussion

ログインするとコメントできます