firenvimを使ってWebでもvimる

cappyzawa
cappyzawa
Dec 13, 2019 · 8 min read

この記事は Vim Advent Calendar 2019 — Qiita 14日目の記事です。

firenvimとは?

GitHub Repository: glacambre/firenvim: Embed Neovim in your browser.

Turn your browser into a Neovim client.

これを利用するとブラウザがNeovim clientに早変わりします。

今回はその設定手順と設定したらどうなるのか?ということを紹介します。

設定手順

init.nvim の記述

firenvim pluginのインストール

詳細は以下に記述してあります。

glacambre/firenvim#Pre-built

ここでは junegunn/vim-plug: Minimalist Vim Plugin Manager を利用した例を紹介します。

Plug 'glacambre/firenvim', { 'do': { _ -> firenvim#install(0) } }

設定

サイトごとにどの要素でfirenvimを起動するか

全てのサイト(ホスト)の textarea にてfirenvimを起動する設定

let g:firenvim_config = {
\ 'localSettings': {
\ '.*': {
\ 'selector': 'textarea, div[role="textbox"]',
\ 'priority': 0,
\ }
\ }
\ }

github.com のみ textarea でfirenvimが起動する設定

let g:firenvim_config = {
\ 'localSettings': {
\ '.*': {
\ 'selector': '',
\ 'priority': 0,
\ },
\ 'github\.com': {
\ 'selector': 'textarea',
\ 'priority': 1,
\ },
\ }
\ }

上記を参考に独自の設定をどんどん追加していくことももちろん可能です。

テキスト保存時にブラウザの要素と同期する

let g:dont_write = v:false
function! My_Write(timer) abort
let g:dont_write = v:false
write
endfunction

function! Delay_My_Write() abort
if g:dont_write
return
end
let g:dont_write = v:true
call timer_start(10000, 'My_Write')
endfunction

au TextChanged * ++nested call Delay_My_Write()
au TextChangedI * ++nested call Delay_My_Write()

任意: 特定サイトでfiletypeを設定する

せっかくブラウザを Neovim クライアントにすることができるなら Playground などで積極的に使いたいところです。

下の表のように filetype を設定していきます。

firenvim は $HOME/.local/share/firenvim 以下に ホスト名_*.txt というファイルを一時的に作成し、それを扱っていきます。

そのため、下記のように記述することで、firenvimを利用しながら filetype を設定することができます。

augroup Firenvim
au BufEnter play.golang.org_*.txt set filetype=go
au BufEnter play.rust-lang.org_*.txt set filetype=rust
au BufEnter github.com_*.txt set filetype=markdown
augroup END

任意: guifontの設定

普段端末のfont設定をそのまま利用している場合、ブラウザ上でその設定が反映されません。

guifont を設定して、お好きなfontでブラウザ上でvimりましょう。

Droid Sans Mono Slashed for Powerlines のfontを利用する例を示します。(font sizeは 14 にします)

let g:firenvim_font = 'Droid\ Sans\ Mono\ Slashed\ for\ Powerline'
function! Set_Font(font) abort
execute 'set guifont=' . a:font . ':h14'
endfunction

augroup Firenvim
au BufEnter github.com_*.txt set filetype=markdown | call Set_Font(g:firenvim_font)
au BufEnter play.rust-lang.org_*.txt set filetype=rust | call Set_Font(g:firenvim_font)
au BufEnter play.golang.org_*.txt set filetype=go |call Set_Font(g:firenvim_font)
augroup END

最終的な init.nvim

let g:firenvim_config = {
\ 'localSettings': {
\ 'github\.com': {
\ 'selector': 'textarea',
\ 'priority': 0,
\ },
\ }
\ }

let g:dont_write = v:false
function! My_Write(timer) abort
let g:dont_write = v:false
write
endfunction

function! Delay_My_Write() abort
if g:dont_write
return
end
let g:dont_write = v:true
call timer_start(10000, 'My_Write')
endfunction


let g:firenvim_font = 'Droid\ Sans\ Mono\ Slashed\ for\ Powerline'
function! Set_Font(font) abort
execute 'set guifont=' . a:font . ':h14'
endfunction

augroup Firenvim
au TextChanged * ++nested call Delay_My_Write()
au TextChangedI * ++nested call Delay_My_Write()
au BufEnter github.com_*.txt set filetype=markdown | call Set_Font(g:firenvim_font)
au BufEnter play.rust-lang.org_*.txt set filetype=rust | call Set_Font(g:firenvim_font)
au BufEnter play.golang.org_*.txt set filetype=go |call Set_Font(g:firenvim_font)
augroup END

拡張のインストール

init.nvim に設定を加える他に、ブラウザの拡張機能をインストールする必要があります。

デモ

The Go Playground

.

Rust Playground

.

普段の開発でLSP Clientを使っていると、ブラウザでもこのように利用できます。

GitHub

.

まとめ

ブラウザを Neovim クライアントにすることができる glacambre/firenvim: Embed Neovim in your browser. とその設定の仕方の例を紹介しました。

    cappyzawa

    Written by

    cappyzawa

    #golang #concourse #vim

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade