はじめに
皆さんはray.soをご存知でしょうか？)
ray.soは、プログラミング言語のコードを画像に変換してくれるサービスです。
コードを画像にしてくれるサービスやツールといえば、他にもCarbonやSilicon、Freeze などがありますが、ray.soはブラウザから使えて尚且つとてもかっこいいデザインが特徴です。
元々RaycastというMacのランチャーアプリを作っている会社が運営しているサービスで、Raycastで使うことを想定されているだけあって、デザインがとても洗練されています。
ところがこのRaycast用のプラグイン、いくつか問題があります。
- そもそもRaycastはMac専用なので、WindowsやLinuxのユーザーはブラウザにいってコードを入力して画像を生成するしかない
- ray.soのプラグインはMacの標準のテキストエリアからしかコードを取得できないので、VSCodeやNeovimなどのちょっと特殊なテキストエリアを使っているアプリケーションからは使えない
そこで、ray.soをNeovim/Vimから使えるプラグインを作りました。
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のライブラリを使えるのはとても便利でした。
また、RaySoClipboardというコマンドも実装しています。
これは、Astralというpuppeteerやplaywrightのようにブラウザを操作できるDeno向けのライブラリを使ったコマンドです。
コマンドが実行されると、URLをブラウザ(Chromeであることが多い)で開く->ブラウザ上でCMD + Cを実行->クリップボードにコピーする->ブラウザを閉じる、という処理を全自動で行います。
ray.soでは見た目のオプションがいくつか用意されています。こちらも初期値として設定できるようにしています。
Future Work
この記事を書いている最中に、ray.soのコードがOSS化されました。
画像生成の実装は完全にTypScriptで書かれているので、これを組み込んでブラウザを開く必要なしに画像を生成できたらいいなぁと思っています。
おわりに
- ray.soをNeovim/Vimから使えるプラグインを作りました
- Denopsはいいぞ
宣伝! vim-jpラジオが始まります！
7/8 (月)より、vim-jpラジオという番組が始まります！
宣伝文を引用します。
エンジニアが集まるインターネット上のコミュニティvim-jpから生まれた初の音声プログラム。
vim-jpはプログラミングから子育てに至るまで無数のチャンネルを抱えたコミュニティです。
そんなコミュニティの面白さを生かして、各分野の様々なゲストを交えながら楽しく雑談していきます。
ぜひ聞いてみてください！
よろしくお願いします！
宣伝2 GitHub Sponsorsを始めました
この度GitHub Sponsorsを始めました。
色々ライブラリ等のメンテナンスをしているので、よろしければサポートしていただけると嬉しいです。
Discussion