---
title: "ray.soをNeovim/Vimから快適に使えるプラグインを書いた"
date: '2024-07-04'
isPublished: true
lang: 'ja'
---

> [!NOTE]
> この記事は[Vim 駅伝](https://vim-jp.org/ekiden/)の 7/5 の記事です。

![0.gif](./0.gif)

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

# はじめに

皆さんは[ray.so](https://ray.so/)をご存知でしょうか？)

https://ray.so/

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

元々[Raycast](https://raycast.com/)という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](https://github.com/vim-denops/denops.vim)を使いました。
DenopsはDenoとTypeScriptを使ってVim/Neovimのプラグインを書くためのエコシステムです。
TypeScriptを使えるため、

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

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

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

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

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

また、`RaySoClipboard`というコマンドも実装しています。
これは、[Astral](https://jsr.io/@astral/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

# Future Work

この記事を書いている最中に、ray.soのコードがOSS化されました。

https://github.com/raycast/ray-so

画像生成の実装は完全にTypScriptで書かれているので、これを組み込んでブラウザを開く必要なしに画像を生成できたらいいなぁと思っています。

# おわりに

- ray.soをNeovim/Vimから使えるプラグインを作りました
- Denopsはいいぞ

# 宣伝! vim-jpラジオが始まります！

7/8 (月)より、**vim-jpラジオ**という番組が始まります！

https://vim-jp-radio.com/
https://audee.jp/voice/show/85325

宣伝文を引用します。

> エンジニアが集まるインターネット上のコミュニティvim-jpから生まれた初の音声プログラム。
> vim-jpはプログラミングから子育てに至るまで無数のチャンネルを抱えたコミュニティです。
> そんなコミュニティの面白さを生かして、各分野の様々なゲストを交えながら楽しく雑談していきます。

ぜひ聞いてみてください！
よろしくお願いします！

https://x.com/vimjpradio/status/1807660836972032410

# 宣伝2 GitHub Sponsorsを始めました

https://github.com/sponsors/ryoppippi/

この度GitHub Sponsorsを始めました。
色々ライブラリ等のメンテナンスをしているので、よろしければサポートしていただけると嬉しいです。