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화 할 수 있으면 다시 공유하겠습니다!