denops.vim を使って初めてvim-pluginを作った。MarkdownをHTMLに変換してクリップボードにコピーする。

denops.vim を使って初めてプラグインを作った

これはVim 駅伝 7 月 28 日 の記事です。 次回は、7 月 31 日に投稿される予定です。

Markdown ファイルを HTML に変換して、クリップボードにコピーしたい

こういう Vim プラグインをずっと探していた。だが、あまりにも需要がないので誰も作っていなかった。

denops-markdown2html

だから、作った。

インストール方法

vim-plug の場合は、

Plug 'vim-denops/denops.vim'
Plug 'ArcCosine/denops-markdown2html'

dein.vim の場合は、

call dein#add('vim-denops/denops.vim')
call dein#add('ArcCosine/denops-markdown2html')

これでインストール出来る。

その他設定

set clipboard+=unnamed

クリップボードを連携させる設定をしておく。 既に設定済みならば、この記述は要らない。

使い方

:DenopsMarkdown2Html

このコマンドを実行する事で、カレントバッファの Markdown を HTML に変換してクリップボードにコピーしてくれる。

開発経緯

このブログの読者で、記憶の聡明な方ならば、10 年くらい前にmarkdown.plを導入した話を覚えているだろう。当時は、perl の markdown 変換ツールが一番メジャーだった。

それから数年後には、nodejs のmarked.jsをベースに変換するツールを使っていた。

どちらのケースも、カレントバッファをツール（markdown.pl,marked.js）に渡して、出力結果をクリップボードにコピーするという動きをしていた。 これらの処理には幾つか不満点があった。

1. 一時ファイルを生成していた
2. vimrc に直接書いていてダサかった
3. perl をインストールする必要があった
4. nodejs をインストールした上で、npm install コマンドを最初に実行する必要があった。

一時ファイルを生成していた

一時ファイルを、c:\temp\xxmarkdown.html みたいな名前にして、生成していた。 これは僕自身の技術力が無い事が原因で、バッファ経由で外部ツールの結果を保存する術を知らなかったからだ。 多分、Vim のコマンドでそういうの出来る処理あると思う。 今回のプラグイン開発にあたっては、この一時ファイル生成を辞めることに成功した。

余談であるが、Windows の Vim→WSL 上の Vim への移行にあたり、この一時ファイルのパスが Windows と WSL で表記が違うためにかなり苦労した。 これは Vim の問題というより Windows の問題。 Windows 以外なら、多分問題にならないような些細な話だと思う。 いずれにせよ、今回開発したプラグインでこういった煩わしさから開放されるようになった。

vimrc に直接書いていた

やっている処理は非常に簡単なので、数行程度の vimrc で実現出来ることだったが、環境移行するたびに毎回 vimrc をコピペするのはダサいなと感じていた。 プラグインマネージャーで管理出来るなら断然そっちの方が楽だし、どの環境でも同じように使える。 これを止められるようになったのはデカい。

perl をインストールする必要があった

この perl インストール時期はせいぜい 3 年くらいだったが、perl を普段遣いしなくなる時期だっただけに、perl バイナリのインストールは非常に煩わしかった。面倒 of 面倒。 denops に関しても、Deno のインストールが必要だが、

curl -fsSL https://deno.land/x/install/install.sh | sh

このコマンド一発で最新版を入れられる楽さ＆Deno のパッケージ関連の扱いやすさも相まって Deno のインストールには抵抗が少ない。

nodejs をインストールした上で、npm install コマンドを最初に実行する必要があった

nodejs は普段使いしているので、nodejs のインストールはともかく、npm install をやるのは正直面倒だった。 環境構築するたびに毎回それをやるのはダルい。 特に、npm install は、深淵までファイルを持ってくるので、Deno のインストールより遅いんじゃないかという錯覚すら感じる。 実際には、Deno のインストールの方が遅いんだけれど、こいつは 1 回だけやればいい。 パッケージ単位で実行しなくていいので、マジで楽。 perl の所でも書いたが、とにかくパッケージの取り回しがやりやすいのは、Deno の魅力の一つ。 これを Vim でもさっくり使える denops.vim は本当に素晴らしいプラグインだと思う。

つまずきポイント

とはいえ、順風満帆に開発が進んだ訳では無い。 最初に、deno markdown で検索するとhttps://deno.land/x/[email protected]が出てくるが、こいつが denops.vim のプラグインで使えない。理由は、とあるスクリプト内で window オブジェクトを触っている場所があるからだ。 ほかにも、https://github.com/denoland/deno-gfmが出てくるが、こいつも同じスクリプトを参照してるので、denops.vim では簡単には動作しない。 この問題を解決するのに 3 日くらい掛かった。 結局、denoland で marked を検索したら、https://deno.land/x/[email protected]が見つかった。これを使えば、markdown を HTML に変換出来る。

この辺の格闘をしつつ、次はバッファからのコピー。 ただ、これは色々なプラグインが実装してたので、それをそのままパクって実装した。

const content = (await denops.call(
    "getbufline",
    await denops.call("bufnr"),
    1,
    "$"
)) as string[];

これで、バッファの文字列の配列が取得できる。 後は、marked 経由で変換すればやりたい事が概ね出来た。 最後の出力に関しては

await denops.cmd("enew");
await denops.call("setline", 1, html.split(/\n/));
await denops.cmd("% yank");
await denops.cmd("bdelete!");

と、コマンドゴリ押しで実装。 もっと綺麗な実装方法があるかもしれないが、とりあえずはこれで行けるかなという感じ。 やってる事は、作業用バッファを開いて、生成した HTML をそのバッファに出力して、それをレジスタにコピーして、バッファを消す。 たったこれだけだ。

たったこれだけのスクリプトを開発するのに 1 週間近く掛かった。 marked にたどり着くのに本当に時間が掛かった。 この辺は、自分が詳しくない畑の技術だったのが大きな要因だと思う。 恐らく、nodejs 系だったらさっくり良い方法を見つけていたと思うので、経験値の差が如実に出たなという感じ。

最後に

denops.vim を使って初めて実用的な vim-plugin を作った。 これで、堂々と Vim 使えますと言える。 開発そのものは、NeoVim でやってるけれど。

この HTML は、denops-markdown2html で出力されました。