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

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を作って使ったのですが、今回から、

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

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

そのため、前回の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で画像を最適化しているのも同じです。

完成

これで、Vim上で

:MarkdownImageWithScreenshot

とコマンドを実行すると、

  • インタラクティブなスクショ撮影が開始
  • 撮影が終わったら、記事ごとのディレクトリを作って、スクショを保存
  • 保存したスクショはImageOptimで最適化
  • 保存したスクショをMarkdown形式でVimの現在行に埋め込み

という一連の作業を自動でやってくれるようになりました!

試しに執筆中のこの記事にもスクショを埋め込んでみます。

image

できた!

超絶便利!!!

次のステップ

iPhoneで撮影したスクショを貼り付け、となるとクリップボードから貼り付ける必要があるが、なんとかなるかな?

所の執筆・監修した書籍

iOS 11 Programming

iOS 11 Programming

  • 著者:堤 修一,吉田 悠一,池田 翔,坂田 晃一,加藤 尋樹,川邉 雄介,岸川 克己,所 友太,永野 哲久,加藤 寛人,
  • 製本版,電子版
  • PEAKSで購入する
iOS 12 Programming

iOS 12 Programming

  • 著者: 加藤 尋樹,佐藤 紘一,石川 洋資,堤 修一,吉田 悠一,池田 翔,佐藤剛士,大榎一司,所 友太,
  • 製本版,電子版
  • PEAKSで購入する