VimでMarkdown形式でブログ記事を書くときに簡単に画像を埋め込む方法

2020年3月31日
vim / markdown / hugo /

top

Photo by Victor Grabarczyk on Unsplash

ブログ記事書くとき画像を埋め込むのが面倒

こういったブログ記事は、皆さんどういう執筆環境で書いているでしょうか?

最近だとHugoなどの静的サイトジェネレータを利用することも多いのではないでしょうか。 この記事もHugoで運用しています。

記事を投稿するときは、いつもVimでさらっとMarkdown形式で書き上げ、ぱぱっとデプロイコマンドを打つだけで簡単便利な環境なのですが、唯一、記事に画像を埋め込むのだけが面倒だと感じてます。

特に、いわゆるブログサービスを利用している場合には、記事作成ページに埋め込みたい画像をドラッグ&ドロップするだけで画像をアップロード&埋め込みできてしまうので、それとの比較で面倒さが際立ちます。

手動での画像埋め込み手順

これまで手動で画像を埋め込む際には、このブログ記事の場合だと、

をしていました。

決して難しいことはありませんが地味に面倒でした。

ドラッグ&ドロップでなんとかならない?

結論として、私の執筆環境である「Terminal + Vim」ではドラッグ&ドロップをうまくハンドリングする方法がわからず、ドラッグ&ドロップだけでなんとかはなっていません。

ただ、TerminalのVim上に画像ファイルをドラッグ&ドロップすると、その画像ファイルの絶対パスがVimに埋め込まれますので、その行でワンコマンドかますだけでなんとかなりそうだなと思い、Vim用のpluginを作りました。

具体的には、デスクトップ上のdog.jpgをドラッグ&ドロップすると、Vim上に

/Users/tokorom/Desktop/dog.jpg 

が埋め込まれますので、この行でコマンドを打ち、あとは必要なことを自動でやってくれる、という方式です。

現在行のファイルパスに対してなにかをするplugin

このファイルパスに対してなにをしたいかは執筆環境により異なりますので、pluginに追加したのは、

function vim_replace_current_line#execute()
  let line = getline('.')
  let result = system(g:vim_replace_current_line#command . ' ' . expand('%') . ' ' . expand('%:t:r') . ' ' . trim(line))
  call setline('.', trim(result))
endfunction

という3行のシンプルなfunction1つだけです。

ここでやっているのは、

ということだけです。

つまり、あとはその特定のコマンドで、執筆環境ごとに必要な処理を実行し、最終的に画像を埋め込むための文字列を出力してやるだけです。

ごくごく簡単なpluginですが、必要でしたらGithubに置いてあるものをご利用ください。

コマンドの実装

今回の執筆環境で行いたいのは、

という手順なので、以下のコマンドを書きました。

#! /bin/sh

SOURCE="$3"
IMAGEDIR="content/images/$2"
IMAGEFILENAME=`basename ${SOURCE}`
TARGET="${IMAGEDIR}/${IMAGEFILENAME}"
IMAGETAG="![image](/images/$2/${IMAGEFILENAME})"

mkdir -p ${IMAGEDIR}
cp "${SOURCE}" "${TARGET}"

echo "${IMAGETAG}"

とても簡単なコマンドです。

このコマンドが実行されることで、画像が決められたディレクトリにコピーされ、Vim上の画像パスの行が

![image](/images/vim-markdown-image-tool/dog.jpg)

といったMarkdown用の画像埋め込み構文に自動的に変換されます。

ついでに画像の最適化も

ImageOptimをご利用なら上のコマンドの最後に

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

を加えるだけで、画像の最適化も非同期に行ってくれます。

完成

この環境を一度作れば、あとは、

という2ステップだけで、記事内への画像の埋め込みが簡単便利にできるようになります!

次のステップ

これですでにある画像をドラッグ&ドロップで埋め込むことは簡単になりました。

あとは、例えばiPhoneでスクショを撮影し、MacのVim上で1コマンド打ったらそのスクショが埋め込まれる、といったこともできればなあ(やればできそう)。

Related Entries
Latest Entries