Zenn の新機能がリリースされました。私も早速試しています。
これまで、GitHub連携している場合は以下のステップが必要でした：
- まずローカルに画像を保存する
- 相対パスで記述してプレビューする
- コミット直前に画像をZennにアップしてURLを書き換える
このリリースにより次の手順に変更すればOKになります：
-
/imagesディレクトリに画像を保存する - 記事や本に
のように画像を埋め込む - コミット・プッシュする
画像のアップと記事の画像パス修正が不要になります。嬉しいですね。
スクリーンショットを張り付ける場合は、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
- ${currentFileDir}
+ ${projectRoot}
保存場所の起点が、プロジェクトルートになるようにします。
Insert Pattern
- ${imageSyntaxPrefix}${imageFilePath}${imageSyntaxSuffix}
+ ${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}
スラッシュを追加して、  のようにパスの先頭にスラッシュが入るようにします。
Path
- ${currentFileDir}
+ ${projectRoot}/images/${currentFileNameWithoutExt}
これで、 /images/blog-slug-name/image.png のようなパスに保存されます。設定をかえた後、実際に記事内へペーストしてみましょう。
.
├─ articles
│ └── example-article-1.md
└─ images
└── example-article-1
└─ image1.png
するとこのよう形で保存されます。コピペでスクショを保存しつつ、 Zenn CLI でプレビューでき、なおかつコミット・プッシュすれば Zenn側にも反映可能な状態をつくることができました。
おわりに
Paste Image を Zenn の画像管理に合わせる設定方法を紹介しました。「こいういう設定のほうがいいよ」などコメントがありましたら教えていただけると嬉しいです。
なお、すでに 別の Paste Image 設定を入れている場合は、 ワークスペースによる設定の切り替え を検討してください。今回の Zenn のリリースで、画像も GitHub 管理下のものを直接アップロードできるようになり、コンテンツのポータビリティが向上しました。「Zennで書いてみたいけど画像をわざわざアップロードしないといけないのが大変だなあ」と思っていた方はご検討ください。
