Zenn
🍜

Zenn 用にVSCode 画像貼り付けプラグイン作った

2024/11/24に公開
VS Code
Zenn
vscodeplugin
tech

TL;DR

Zenn の画像の貼り付け難さにブチギレて Udon🍜 つくった。以上。

VSCode の画像貼り付けが面倒くさい

VSCode ユーザーの皆さんこんばんわ。

VSCode は最近では標準コマンドで画像を貼り付けることができるようになっています。

もしくは従来からある Paste Image を使っている方も多いでしょう。これで十分、という人はそれで良いと思いますが、Zenn では正直使えません。

Zenn の問題に限らず、標準機能や Paste Image は PNG でしか保存してくれません。WebP で保存してほしいですよね。また、 Paste Image は Remote SSH や Remote WSL などの環境でうまく動作しないという問題点もあります。

まぁ、それはそれとして、話を Zenn に戻して、 私の Zenn の Repository とかを見てもらえればわかると思いますが、記事は articles に、画像は images に格納します。

そして、画像を表示するには以下のように /images/ から始めるパスで記述します。

![](/images/画像のパス)

これが厄介で、 Paste Image で画像を格納するディレクトリを /images にすると、貼り付けたときに ![](../images/画像のパス.png) となり、 .. という不要なパスが入ります。手動で削除という非常に難しい手作業を強いられます。

人類はこんな難しいことが出来るんですね、すごいです。正直私(類人猿)には無理だったので、Udon🍜プラグイン作りました。

設定例と動作例

この記事からすでに Udon🍜 を利用しています。このレポジトリの設定(.vscode/udon.json)は以下のようになっています。 (なんか Zenn でURLがコードに展開されないんだけどなんで？)

{
  "udon.baseDirectory": "${fileDirname}/images",
  "udon.baseDirectories": [
    ["articles/*.md", "${workspaceFolder}/images/$fileBasenameNoExtension"]
  ],
  "udon.rule": [
    ["articles/*.md", "![](/${relImage:${workspaceFolder}})"],
    ["*.md", "![](${relImage})"],
    [ "*", "${relImage:${workspaceFolder}}"]
  ]
}

貼り付けは 「Ctrl + Alt + V」もしくは「Udon🍜: Paste Clipboard Image」から行います。

image/記事ファイル名/画像名 というパスに自動的に保存し、 /images から始まるパスとして画像を Markdown に貼り付けています。

ちなみに、 Markdown 以外にも好きなファイルに、好きなフォーマットで貼り付けることも可能です。

今回は foobar.jpg と名前をつけていますが、名前をつけなくても自動的に名前を付ける機能もあります。

その他、縮小機能なんかも実装されています。詳細は README をどうぞ。

仕組み

このプラグインは UI プラグインとして動作するため、 Remote SSH や WSL などの環境でも、ホストの環境で実行されます。

そのため、 Paste Image と異なり、Remote SSH や WSL にリモート接続してる場合でも動作します。実際、この記事は WSL の Ubuntu 内で書いてますしね。

以下のような動作になっています。

  1. climg2base64 を使ってクリップボードから画像(Base64) を作成
  2. VSCode で Base64 を保存
  3. 設定ルールに従って文字列を生成してエディタに挿入

Paste Image も基本的には同じ動きですが、 OS に標準で搭載されている機能を使って、ログイン先で動作するためファイルフォーマットに制限があったり、リモートで動かなかったりします。

私は 私が動けばいいので OS 標準とか無視して自作プログラムを使って Base64 に変換しています。なので、 webp で保存とか、縮小処理とかも搭載してるわけですね。ついでに隠し機能として、画像のコピーじゃなくて、画像ファイルのコピーでも貼り付けることができたりします。ただ、これは動く環境動かない環境があるので、私が使うだけの隠し機能です。

あと、私は 私だけが動けばいいので climg2base64 のビルド済みバイナリは Windows 64bit、Linux (x86_64, aarch64)だけです。32bitとかMacとかは知らん。万が一使いたい人がいたら自分でビルドしてくれ。

Udon🍜 はリモート環境でも動かしたかった（これも作成したメイン動機の一つ）ので、パスではなく、vscode.Uri でパス管理するなどしています。 vscode.Uri で管理するとリモートとか意識することなく VSCode 側がいい感じにファイルの保存をやってくれるので、パスで管理するより便利です。

設定ルールに関しては、相対パスの出力にこだわっています。$relImage などの変数で相対パスを作れるようになっているのですが、例えば今回私が問題にしている Zenn だと、ファイルからではなく、レポジトリ（ワークスペース）のトップからの相対パスが必要です。そういった個々の環境に対応するために ${relImage: $workspaceFolder} の様に書くとワークスペーストップからの相対パスに、 ${relImage: $fileDir} とすると現在のファイルのあるディレクトリからの相対パスというふうに自由にかけるようになっています。

Zenn 用だとこんな設定です。 ![](/${relImage:$workspaceFolder})

まとめ

実際今回から使ってみてますが、実に便利です。今までのストレスから開放されました。

また、 WSL にこもってることが多い私は、 Paste Image 本体が使えず、他人がフォークした Paste Imageを使っていたのでなーんかなー、と思っていたのも解消されたのが旨味です。

というわけで、せっかく公開したので記事にはしましたが、 私以外の人が使うとバグが見つかってしまって面倒なので、 Paste Image か標準機能を使うことをおすすめします

Discussion