VimでのMarkdownプレビューを快適にする方法を考えてみた


##追記

プラグインを削除していたので、作りなおしました。

[airpreview.vim](https://github.com/syui/airpreview.vim)


##はじめに

VimでMarkdown、HTMLなどをプレビューする方法は､検索すれば､たくさんヒットします。


しかし、どれも個人的にはしっくり来なかったので､VimでMarkdownプレビューする方法を考えてみました。参考になれば幸いです｡


今回､[airpreview.vim](https://github.com/syui/airpreview.vim)をちょっとだけ改良しました。


##Markdownプレビュー
###previm
今回は､[previm](https://github.com/kannokanno/previm)というプラグインを使ったプレビューをしてみたいと思います｡

このプラグインは､依存関係を極力減らすというコンセプトのプラグインです｡

しかし、`previm`は、現在開いているファイルをブラウザでプレビューするのですが､スクロールするには､ブラウザにフォーカスを移動しなければならず､ちょっと不便でした｡


したがって、ここでは、`previm`以外に、いくつかのプラグインを組み合わせることで、Markdown プレビューがより快適になる方法を模索していきたいと思います｡

[Vimでカーソル移動すると、ブラウザのスクロールが連動している様子 *ただし、スクロール幅は連動しません]


###特殊事情

なお、今回の方法は､`AppleScript`を使用したプラグインを利用しますので､`Macユーザー限定`となってしまいます。

###インストール

```
NeoBundle 'vim-scripts/vim-auto-save'
NeoBundle 'kannokanno/previm'
NeoBundle 'syui/cscroll.vim'
NeoBundle 'kana/vim-submode'
```

以下のコマンドを実行してください｡

`:so $MYVIMRC | NeoBundleInstall`

|プラグイン名|用途|
|-----|-----|
|[previm](https://github.com/kannokanno/previm)|Vim で編集した Markdown ファイルをブラウザプレビューするために必要(自動リロード機能付き)|
|[cscroll.vim](https://github.com/syui/cscroll.vim)|Vim から Google Chrome を操作するために必要|
|[vim-submode](https://github.com/kana/vim-submode)|連続スクロールを実現するために必要|
|[vim-auto-save](https://github.com/vim-scripts/vim-auto-save)|編集しているファイルを自動保存するために必要|


###設定

```~/.vimrc
" Markdown プレビュー {{{
nnoremap <silent> <F7> :PrevimOpen<CR>
"nnoremap <silent> <F7> :PrevimOpen \|:Silent open -a it2_f &<CR>
nmap <silent> <Leader>j <Plug>(ChromeScrollDown)
nmap <silent> <Leader>k <Plug>(ChromeScrollUp)
nmap <silent> <Leader>q <Plug>(ChromeTabClose)
nmap <buffer> <Leader>f <Plug>(ChromeKey)

call submode#enter_with('cscroll', 'n', '', '<Leader>j', ':ChromeScrollDown<CR>')
call submode#enter_with('cscroll', 'n', '', '<Leader>k', ':ChromeScrollUp<CR>')
call submode#leave_with('cscroll', 'n', '', 'n')
call submode#map('cscroll', 'n', '', 'j', ':ChromeScrollDown<CR>')
call submode#map('cscroll', 'n', '', 'k', ':ChromeScrollUp<CR>')

"" Auto Scroll
"nmap <silent> <Leader>j <Plug>(ChromeAutoScrollDown)
"nmap <Leader>js <Plug>(ChromeAutoScrollDownStop)
"nmap <silent> <Leader>k <Plug>(ChromeAutoScrollUp)
"nmap <Leader>ks <Plug>(ChromeAutoScrollUpStop)
" }}}
```

###使い方
####補足説明
まず、設定ファイルへ書き込んだ内容の捕捉として､`Auto Scroll`は、実験用の機能ですので､常用は、オススメできません。

また、`:PrevimOpen`コマンドでプレビューを実行した時､フォーカスがブラウザに移ってしまいますので、フォーカスを端末(iTerm2)に戻す方法を提案しています｡

これは、コメントアウトした`"nnoremap <silent> <F7> :PrevimOpen \|:Silent open -a it2_f &<CR>`という記述のことです。


ちなみに、[it2_f](http://mba-hack.blogspot.jp/2013/09/mac.html)の内容としては､以下の様なコマンドになっています。

```
osascript -e 'tell application "iTerm" to activate'
```

####基本操作

`F7`キーを押して､プレビューを実行します｡ここでは、`Google Chrome`でプレビューされるようにしておいてください｡

```~/.vimrc
let g:previm_open_cmd = 'open -a Google\ Chrome'
```
[たぶん、上記のように設定するのだと思います｡間違ってたらごめんなさい]

そして、`<Leader>`+`j`+`j`+`j`...で下スクロール。`<Leader>`+`k`+`k`+`k`...で上スクロールです｡

`<Leader>`+`q`でタブを閉じます｡

`<Leader>`+`f`+`{char}`で任意のキーをブラウザに送ります｡

まとめると以下の様な感じです｡

|キー|効果|
|---|---|
|`<Leader>`+`j`+`j`+`j`...|下スクロール|
|`<Leader>`+`k`+`k`+`k`...|上スクロール|
|`<Leader>`+`q`|タブを閉じる|
|`<Leader>`+`f`+`{char}`|任意のキーをブラウザに送る|

###イメージ画像

####標準

実際には、以下の様な感じでプレビューできます｡(画面がちらつきますが、これを何とかしたい…。

![](http://lh3.ggpht.com/-Y0Y3I1HmEuU/UoozFmraqMI/AAAAAAAAHHw/lFuJKaLhM4k/s640/vim_sh_sc.gif)

欠点としては､操作性はそこそこですが、①画面がちらつくのと、②Vimのカーソル行とプレビューが連動しない点などが挙げられます｡


####オートスクロール

オートスクロールのイメージ画像は､一番上に載せたものになります。


ここでいうオートスクロールとは、Vimのカーソルを動かせば､それに伴って、ブラウザもスクロールしてくれるというものです。


`AutoScroll`機能を有効にすると､画面のちらつきが抑えられていい感じです。


また、Vimでカーソルを動かすと､プレビューのスクロールと連動します(ただし、移動幅は連動しません)。


もし、`AutoScroll`機能を有効にするなら、上記で説明したキーマップのコメントアウトを外してください｡具体的には､以下の部分になります｡

```~/.vimrc
"" Auto Scroll
"nmap <silent> <Leader>j <Plug>(ChromeAutoScrollDown)
"nmap <Leader>js <Plug>(ChromeAutoScrollDownStop)
"nmap <silent> <Leader>k <Plug>(ChromeAutoScrollUp)
"nmap <Leader>ks <Plug>(ChromeAutoScrollUpStop)
```


ただし、コメントアウトを外した場合､同じキーが登録されているので､注意が必要です｡

また、この場合は､`vim-submode`は必要なくなります｡よって、`Auto Scroll`する場合の設定ファイルは以下の様な感じになります｡

```~/.vimrc
" Markdown プレビュー {{{
nnoremap <silent> <F7> :PrevimOpen<CR>
"nnoremap <silent> <F7> :PrevimOpen \|:Silent open -a it2_f &<CR>
"nmap <silent> <Leader>j <Plug>(ChromeScrollDown)
"nmap <silent> <Leader>k <Plug>(ChromeScrollUp)
nmap <silent> <Leader>q <Plug>(ChromeTabClose)
nmap <buffer> <Leader>f <Plug>(ChromeKey)

"call submode#enter_with('cscroll', 'n', '', '<Leader>j', ':ChromeScrollDown<CR>')
"call submode#enter_with('cscroll', 'n', '', '<Leader>k', ':ChromeScrollUp<CR>')
"call submode#leave_with('cscroll', 'n', '', 'n')
"call submode#map('cscroll', 'n', '', 'j', ':ChromeScrollDown<CR>')
"call submode#map('cscroll', 'n', '', 'k', ':ChromeScrollUp<CR>')

"" Auto Scroll
nmap <silent> <Leader>j <Plug>(ChromeAutoScrollDown)
nmap <Leader>js <Plug>(ChromeAutoScrollDownStop)
nmap <silent> <Leader>k <Plug>(ChromeAutoScrollUp)
nmap <Leader>ks <Plug>(ChromeAutoScrollUpStop)
" }}}
```


操作は簡単で､以下の通りになります｡

|キー|効果|
|---|---|
|`<Leader>`+`j`|Vim上のカーソル移動とブラウザの下スクロールの連動を開始する|
|`<Leader>`+`k`|Vim上のカーソル移動とブラウザの上スクロールの連動を開始する|
|`<Leader>`+`js`|下スクロールの連動を停止する|
|`<Leader>`+`ks`|上スクロールの連動を停止する|
|`<Leader>`+`q`|タブを閉じる|
|`<Leader>`+`f`+`{char}`|任意のキーをブラウザに送る|


欠点としては､①Vimのカーソル移動に依存しているという点、②スクロール幅が調整されていないという点、③キーを押さなければ、一方方向へのスクロールに対応しないという点です｡

まだ、実験段階の機能なので､予期せぬ不都合が起こるかもしれません。注意してください｡