Mac + Vim + Markdownの環境で、クリップボードにコピーした画像を簡単に挿入

ショートカット一発で、クリップボードにコピーした画像ファイルをMarkdown記法で挿入

これまでAtomを利用していたのですが、色々と訳がありまして、1週間前より、Vimを普段使いするようになりました。
それで日々のメモなんかもAtom+Markdownからvim+Markdownに移行したのですが、いかんせん画像の挿入操作につまずきました。

Atom時代には画像を簡単にコピペができるimage-copipeを利用していたのですが、Vimで同様の処理ができるpluginが見つかりませんでした。

なので今回はかなり強引に自作をしてみました。シェルスクリプト+.vimrcです。本来のVim機能拡張(vimスクリプトを利用したvim plugin化)とはまったく異なっているのは、まだVimmerになって1週間程のためです。。。Vimpluginにパッケージングできれば皆様にも利用しやすくなるはずなので、今後の宿題とさせてください！

機能実装の方針

今回の機能要件としては、クリップボードにコピーした画像ファイルを、Vimのインサートモード時に、コマンドひとつでMarkdown記法で画像を埋め込むこととしました。

画像の埋め込みは、ローカル環境に画像の実ファイルを保存したうえで、そのファイルのパスを指定することにしました。[](./images/XXX.png)

上記で上げたimage-copipeのように画像ファイルをどっかのサービスにアップロードし、そのURLパスをMarkdown記法で指定することも一瞬考えたのですが、クライアントワークの画像を扱うこともあり、セキュリティ上、他人の目に画像が触れるリスクを忌避するため、ローカル環境に保存する方針としました。

機能実装①:クリップボードにコピーした画像ファイルを、ローカルの特定のパスに保存する

こちらの機能はpngpasteを利用させていただきました。
GitHub - jcsalterego/pngpaste: Paste PNG into files, much like pbpaste does for text.

$ pngpaste ~/Document/hooray.png

とすれば、クリップボードにコピーした画像を、引数に記載したパス/ファイル名でpngファイルを作成してくれます。

機能実装②: Vimから呼び出すことを想定して、pngpasteをもとにコマンドファイルを作成する。

シェルスクリプトでコマンドファイルを作成します。

image_paste_for_vim_markdown

#!/bin/bash

# 引数がある場合には、引数を画像保存先のパスにする。
# 引数がない場合にはカレントフォルダに画像を保存する
if [ -n "$1" ]
then
  IMAGE_PATH="$1/images/"
else
  IMAGE_PATH="./images/"
fi


if [[ ! $+commands[pngpaste] ]]; then
  echo"pngpaste: command not found" >&2
  exit 1
fi

# 画像の保存先が存在するかチェックをする。
# 無い場合は、エラーをはいて処理を終了する。
# ディレクトリーを作成する処理をいれなかったのは、
# フォルダが煩雑になってしまうのを避けたかったためです。
#　特に気にされない方は、`mkdir $IMAGE_PATH`をかわりに記載してください。
if [[ ! -e "$IMAGE_PATH" ]]; then
  echo "No image folder"
  exit 1
fi

IMAGE_NAME=`date "+%Y%m%d_%H%M%S".png`

if [[ -e "$IMAGE_PATH$IMAGE_NAME" ]]; then
  echo "File already existed"
  exit 1
fi

pngpaste $IMAGE_PATH$IMAGE_NAME
RESULT=$?

# 画像が保存できた場合、ファイルへの相対パスを利用して、
# Markdown記法の画像挿入文を掃き出します
if [ $RESULT = 0 ]; then
  RELATIVE_IMAGE_PATH='./images/'
  MARKDOWN_IMAGE_SYNTAX="![]($RELATIVE_IMAGE_PATH$IMAGE_NAME)"
  echo $MARKDOWN_IMAGE_SYNTAX
fi

上記実行ファイルは、PATHの通ったフォルダ配下に保存のうえ、実行可能な権限に変更します。
例)
~/usr/local/bin/image_paste_for_vim_markdown

機能実装③: Vim上で実行できるよう、.vimrcに記載をする。

Vim上で利用できるように、.vimrcファイルに追記をします。

~.vimrc

""""""""""""""""""""""""""""""
" Markdown画像挿入自動化
""""""""""""""""""""""""""""""
imap <F2> <C-c>:r! image_paste_for_vim_markdown %:h<CR>lli

""""""""""""""""""""""""""""""

今回は<F2>にマッピングしました。
コマンドを呼び出すさい、引数に、Vimで開いているファイルのパスを渡します。
Vimでは、%:hを記載することで、Vimで開いているファイルのパスを取得することができるようです。
最後にlliを追加しているのは、[](./XX.png)が挿入された後、いい感じにカーソルの位置を整えるためです。

これで指定したショートカットを押下することで、クリップボードにコピーされた画像を簡単に挿入ができるようになりました。
vimファイルと同階層の./images/フォルダ内に、画像が作成されていることが確認できるかと思います。

おわり

とりあえず機能が実現したので、Qiitaに共有させていただきました。
vimplugin化できましたら、再度共有致します！