ショートカット一発で、クリップボードにコピーした画像ファイルを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をもとにコマンドファイルを作成する。
シェルスクリプトでコマンドファイルを作成します。
#!/bin/bash# 引数がある場合には、引数を画像保存先のパスにする。# 引数がない場合にはカレントフォルダに画像を保存するif[ -n "$1"]thenIMAGE_PATH="$1/images/"elseIMAGE_PATH="./images/"fiif[[ ! $+commands[pngpaste]]];thenecho"pngpaste: command not found">&2
exit 1
fi# 画像の保存先が存在するかチェックをする。# 無い場合は、エラーをはいて処理を終了する。# ディレクトリーを作成する処理をいれなかったのは、# フォルダが煩雑になってしまうのを避けたかったためです。# 特に気にされない方は、`mkdir $IMAGE_PATH`をかわりに記載してください。if[[ ! -e "$IMAGE_PATH"]];thenecho"No image folder"exit 1
fiIMAGE_NAME=`date "+%Y%m%d_%H%M%S".png`if[[ -e "$IMAGE_PATH$IMAGE_NAME"]];thenecho"File already existed"exit 1
fi
pngpaste $IMAGE_PATH$IMAGE_NAMERESULT=$?# 画像が保存できた場合、ファイルへの相対パスを利用して、# Markdown記法の画像挿入文を掃き出しますif[$RESULT=0];thenRELATIVE_IMAGE_PATH='./images/'MARKDOWN_IMAGE_SYNTAX=""echo$MARKDOWN_IMAGE_SYNTAXfi上記実行ファイルは、PATHの通ったフォルダ配下に保存のうえ、実行可能な権限に変更します。
例)
~/usr/local/bin/image_paste_for_vim_markdown
機能実装③: Vim上で実行できるよう、.vimrcに記載をする。
Vim上で利用できるように、.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化できましたら、再度共有致します！