2012-03-20

Vimでカーソル下のファイルをData URI化する

Data URIネタを続ける。昨日書いたData URI変換スクリプトをコマンドラインとかエクスプローラーから送るでクリップボードにコピーして使うだけだとVimで面倒くさい。Vimでは<cfile>でカーソル下のファイル名を拾えるので、それを利用してファイルのパスからData URIに変換するようなスクリプトを書いて使うことにした。

" Convert a file under a cursor to Data URI
function! s:ConvertCFileToDataURI()
  let cfile = expand('<cfile>')
  call setreg('d', substitute(getline('.'), cfile, system('convert-to-data-uri.pl ' . cfile), ''))
  normal! V"dp
endfunction

nnoremap <Leader>datauri :call <SID>ConvertCFileToDataURI()<Return>

system()で変換スクリプトを呼んでやって、その実行結果でファイル名を置換し、行をその置換結果で差し替えるという単純な仕組み。マッピングは良いの思いつかなくて長いので、好きなのに変えるか普通にコマンド作ると良いと思う。

command! DataURI :call <SID>ConvertCFileToDataURI()

CSSのurl()関数でまずは普通にファイルのパスで参照しておいて、表示を確認する。

.test {
  background-image: url("../images/foo.svg");
}

大丈夫そうだったらファイルのパスにカーソルを持っていき<Leader>datauriで変換という感じで使う(使っている)。

.test {
  background-image: url("data:image/svg+xml;base64,PD94bWwKdmVyc2lv...");
}

もちろんSassとかでも同じ。

レジスター汚すのがあんまよくない(と思う)けど、外部プログラムと連携しようとしたりする時はそういうもんだと諦めてる。なんかこういうののベストプラクティス的なものがあるのか調べたい気は少しだけあるんだけど、んーまーあんまりVimスクリプト覚えたくない……。