Vimにスクショを直接Markdownで貼り付ける

2020年4月30日

top Photo by Jae Park on Unsplash

前回

前回の記事では、画像ファイルをVimにドラッグ＆ドロップして、それをコマンド一発で、

ImageOptimで画像を最適化
記事ごとの画像ディレクトリを自動作成してそこに画像をコピー
Vimに ![image](/images/記事名/画像名) とMarkdown方式で埋め込む

という便利環境を作りました。

そのときの課題として「どうせなら既存画像だけじゃなくてスクショもコマンド一発でVimにMarkdown形式で貼り付けたいなあ」というのがありました。

今回はそこを解決します！

pbpasteはダメだった

なんとなくpbpasteコマンドでゴニョゴニョするんだろうな思っていたのですが、pbpasteはテキストしか扱えないということがわかりました…

screencaptureコマンドを使う

しかしMacにはscreencaptureというコマンドがあり、

screencapture -i 出力ファイル名

とすると、shift + command + 4 で起動するインタラクティブなスクショモードを開始し、撮影後のスクショを指定したファイル名で保存してくれる、ということがわかりました。

vim pluginを拡張

前回、特定のコマンドを実行して、Vimの現在行を置き換えるpluginを作って使ったのですが、今回から、

現在行の画像ファイル名を使って画像を適切に埋め込むコマンド
スクショを撮影して現在行に埋め込むコマンド

の２つを使い分ける必要が出てきました。

そのため、前回のpluginを少し拡張して、

command! -nargs=0 MarkdownImageFromLine :call vim_replace_current_line#execute("./.vim-replace-current-line/markdown-image-from-line")
command! -nargs=0 MarkdownImageWithScreenshot :call vim_replace_current_line#execute("./.vim-replace-current-line/markdown-image-with-screenshot")

とvimrcで好きなコマンド名でそれぞれ別のコマンドを叩けるようにしました。

今回のものは:MarkdownImageWithScreenshotというコマンドをVim上で叩くと、markdown-image-with-screenshotというシェルコマンドを実行し、そのレスポンスを現在行に埋め込む、という形です。

仕組み自体は前回と変わりません。

このpluginは GitHub に置いてあります。

スクショを撮影して…のコマンド

markdown-image-with-screenshotコマンドの具体的な中身は、

#! /bin/sh

IMAGEDIR="content/images/$2"
CURRENTTIME=`date +%s`
IMAGEFILENAME="ss-${CURRENTTIME}.png"
TARGET="${IMAGEDIR}/${IMAGEFILENAME}"
IMAGETAG="![image](/images/$2/${IMAGEFILENAME})"

mkdir -p ${IMAGEDIR}

screencapture -i "${TARGET}"

echo "${IMAGETAG}"

IMAGEOPTIM="open -a ImageOptim"
`${IMAGEOPTIM} ${TARGET}`

です。

ほぼ前回と変わりませんが、指定された画像をcopyする代わりにscreencapture -i "${TARGET}"でインタラクティブなスクショ撮影を開始しています。

最後にImageOptimで画像を最適化しているのも同じです。