firenvimを使ってWebでもvimる

cappyzawa

8 min readDec 13, 2019

この記事は 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