Vim から Chrome をオートリロードする方法

Brogramming with Tom
今回は、Vim から Chrome を自動リロードする方法を紹介したいと思います。

photo credit: ryanoshea via photopin cc

はじめに


Vim から Google Chromeをリロードする方法は、以下の様な方法があります。

Vim Plugin



" http://d.hatena.ne.jp/LukeSilvia/20101025/p1
command! -bar ChromeReload silent !osascript -e 'tell application "Google Chrome" to reload active tab of window 1'
command! -bar ChromeStartObserve ChromeStopObserve | autocmd BufWritePost <buffer> ChromeReload
command! -bar ChromeStopObserve autocmd! BufWritePost <buffer>



AppleScript + vimrc



if application "Safari" is running then
tell application "Safari"
do JavaScript "location.reload(true);" in document 1
end tell
end if

if application "Google Chrome" is running then
tell application "Google Chrome" to reload active tab of window 1
end if


" chrome-reload
" http://qiita.com/items/7f0a0078f4e2fad4245f
augroup MyBrowserReload
command! -bar BrowserReload silent !osascript $HOME/bin/reload.scpt
augroup END
nnoremap <silent> <Leader>rl :BrowserReload<CR>



しかし、今回は、 vimshellの紹介も兼ねて、上とはちょっとだけ異なった方法で Vim から Chrome を自動リロードする方法を紹介して行きたいと思います。


ちなみに、ここで言う自動リロードとは、ファイルの変更があれば、そのたびに自動的にリロードされることを言います。なお、リロードとは、簡単に言うと更新のことです。


ブラウザを使ってファイルをプレビューする時などに便利です。


Vim から Chrome を自動リロードする方法



必要なもの



# タイトル 内容
1 AppleScript Chromeを操作するのに必要
2 watchmedo フォルダを監視するために必要
3 vimshell Vimからコマンドを実行するために必要



AppleScript



mkdir ~/bin/

cd ~/bin/

vim creload.scpt



tell application "Google Chrome" to reload active tab of window 1


ファイルを作成したら、実行権限を与えてください。


chmod +x creload.scpt



watchmedo



watchmedoコマンドは、フォルダやファイルを監視し、その変更をキャッチして、変更があった際に一定の決められた動作を実行できるという便利なものです。


sudo easy_install -U setuptools

sudo easy_install pip

sudo pip install watchdog



このコマンドを使って、特定のフォルダを監視し、そのフォルダ内のファイルに変更が加えられた場合、ブラウザ(Chrome)を自動リロードするようにしたいと思います。これを実行するには、以下のようになると思います。監視するフォルダは、 ~/blog/ フォルダとします。


watchmedo shell-command -c "osascript ~/bin/creload.scpt" ~/blog/



vimshell



vimshellのインストールは、だいたい以下の様な感じになります。ちなみに、下記は Mac の場合の解説です。 Windows の場合の解説は、 こちらになります。

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"



brew install git

git clone https://github.com/gmarik/vundle.git

echo "source ~/.vim/bundle/vundle/test/minirc.vim" >> ~/.vimrc

vim ~/.vim/bundle/vundle/test/minirc.vim



そして、以下を設定ファイルに追記します。ハイライトされた行が追記する内容になります。追記する内容は、インストールするプラグインの記述になります。また、設定ファイルは、わかりやすいように改行を加えても構いません。


set nocompatible
syntax on
filetype off
set rtp+=~/.vim/bundle/vundle/
call vundle#rc()
Bundle 'gmarik/vundle'
Bundle 'Shougo/vimshell'
Bundle 'Shougo/vimproc'
filetype plugin indent on



次に、 Vim を起動して、 :BundleInstallを実行すると、先ほど追記したプラグインがインストールされます。


最後に、 vimshell の動作に必要なvimprocmakeします。


cd ~/.vim/bundle/vimproc

make -f make_unix.mak



ちなみに、以上は OS ごとに手順が異なりますので、注意が必要です。 makeするファイルを調べるには、 こちらを参考にしてください。





Windows using Mingw(32bit Vim):
$ make -f make_mingw32.mak

Windows using Mingw(64bit Vim):
$ make -f make_mingw64.mak

Windows using Visual Studio(32bit/64bit Vim):
$ nmake -f Make_msvc.mak nodebug=1

Mac OS X using LLVM:
$ make -f make_mac.mak

Old Mac OS X(llvm-gcc is not installed):
$ make -f make_mac_old.mak

Linux/BSD:
$ make -f make_unix.mak

Cygwin:
$ make -f make_cygwin.mak

Solaris/Sun OS:
$ make -f make_sunos.mak





これで、 Vim を起動し、:VimShellコマンドを実行すれば、 vimshellが起動します。


私は、 :VimShellPopが非常に気に入っていますので、これを使って、ファイルの変更を監視し、変更があった場合に Chrome をリロードするコマンドを実行してみます。





ちなみに、設定ファイルに現在編集しているファイルを Chrome で開くキーを設定しておくと便利です。

" F5でファイルを Chrome で開く
nnoremap <F5> :!open -a Google\ Chrome %<CR><CR>






vimshellのまとめ情報は、以下が参考になります。

vimshell ドキュメント


vimshell プレゼンテーション


vimshellのキーマップやその他の設定などは、作者さんの vimrcが参考になります。


" vimshell.vim"{{{
" https://github.com/Shougo/shougo-s-github/blob/master/vim/.vimrc
nmap <C-@>  <Plug>(vimshell_switch)
nnoremap !  q:VimShellExecute<Space>
nnoremap [Space]i  q:VimShellInteractive<Space>
nnoremap [Space]t  q:VimShellTerminal<Space>
nnoremap <silent> [Space];  <C-u>:VimShellPop<CR>
"}}}



ちなみに、ここでの }}}という記述ですが、これは、 フォールディングという折りたたみの記述です。折りたたみは、:set foldmethod=markerで使えるようになります。





キー 効果
zi 有効/無効の切り替え
zo 折りたたみを開く
zc 折りたたみを閉じる



参考 :
マーカー文字列を埋め込んで、ソースコードを折り畳み表示する