はじめに

皆さんはray.soをご存知でしょうか？)

ray.soは、プログラミング言語のコードを画像に変換してくれるサービスです。コードを画像にしてくれるサービスやツールといえば、他にもCarbonやSilicon、Freeze などがありますが、ray.soはブラウザから使えて尚且つとてもかっこいいデザインが特徴です。

元々RaycastというMacのランチャーアプリを作っている会社が運営しているサービスで、Raycastで使うことを想定されているだけあって、デザインがとても洗練されています。

https://www.raycast.com/garrett/ray-so

ところがこのRaycast用のプラグイン、いくつか問題があります。

そもそもRaycastはMac専用なので、WindowsやLinuxのユーザーはブラウザにいってコードを入力して画像を生成するしかない
ray.soのプラグインはMacの標準のテキストエリアからしかコードを取得できないので、VSCodeやNeovimなどのちょっと特殊なテキストエリアを使っているアプリケーションからは使えない

そこで、ray.soをNeovim/Vimから使えるプラグインを作りました。

ray-so.vim

https://github.com/ryoppippi/ray-so.vim/

実装にはDenopsを使いました。 DenopsはDenoとTypeScriptを使ってVim/Neovimのプラグインを書くためのエコシステムです。 TypeScriptを使えるため、

通信が発生するもの
非同期処理が必要なもの
豊富な外部便利なライブラリを使いたいときにとても便利です。また、Denopsのプラグインを書くとVim/Neovimどちらでも動作するのもいいですね。

自分は普段はLuaでプラグインを書いているのですが、今回は勉強も兼ねてDenopsを使ってみました。

処理の流れは至って簡単です。

RaySoコマンドを実行
Vim/Neovimで選択しているコードを取得
Denops で実装したPluginにコードを渡す。
Denops で ray.so でコードを含んだ画像のページを開くためのURLを組み立てる
Denops で URLをブラウザで開く

実際のURLを組み立てるコードはこちらです。 ufoやstr-fnsなどの普段使っているTypScriptのライブラリを使えるのはとても便利でした。 https://github.com/ryoppippi/ray-so.vim/blob/4b6ffc9ba3048bffb041b533b8701f119e561450/denops/ray-so/ray-so.ts

また、RaySoClipboardというコマンドも実装しています。これは、Astralというpuppeteerやplaywrightのようにブラウザを操作できるDeno向けのライブラリを使ったコマンドです。コマンドが実行されると、URLをブラウザ(Chromeであることが多い)で開く->ブラウザ上でCMD + Cを実行->クリップボードにコピーする->ブラウザを閉じる、という処理を全自動で行います。

https://jsr.io/@astral/astral

ray.soでは見た目のオプションがいくつか用意されています。こちらも初期値として設定できるようにしています。 https://github.com/ryoppippi/ray-so.vim/blob/main/denops/ray-so/types.ts