ブラウザのVim体験向上施策について


この記事は、[Vim Advent Calendar 2015](http://qiita.com/advent-calendar/2015/vim) 17日目の記事です。
（なんとか12/18になる3分前にpostできました:sweat_drops:）

皆さんはキーボードで文字を入力する際に、どのアプリケーションを使う機会が多いでしょうか。 

自分の場合だと、Vim（MacVim含む）、Android Studio、WebStorm、ブラウザ（Chrome）等が多いです。
私は、この中の「ブラウザ」に対して常に不満を持っていました。 
なぜなら、それなりの長さの文章を書く機会が多いにもかかわらず、ブラウザでは満足のいくVim体験ができなかったからです。

### 現状のブラウザにおけるVim体験とその改善施策
ブラウザと上で挙げた私が良く使用するアプリケーションのVim体験を比較してみます。
Vimは勿論Vimオリジナルなので、最高のVim体験が可能です。 
IntelliJ IDEAをベースとするAndroid StudioやWebStromには、[IdeaVim](https://github.com/JetBrains/ideavim)という素晴らしいプラグインが存在しており、Vim（オリジナル）とまではいかないまでも、少なくとも自分が満足できる程には良いVim体験を提供してくれています。

では、ブラウザの場合はどうでしょうか。
自分が探した限りだと、満足のいく方法を見つけることができませんでした、、

この状況を何とかしようと考えた結果、以下の二つのVimプラグインを作るに至りました。

* [vim2browser.vim](https://github.com/shikato/vim2browser.vim)
* [keysender.vim](https://github.com/shikato/keysender.vim)

### ここからの内容について
ここから作ったVimプラグインの紹介をしていきますが、どちらのプラグインも[JXA](https://developer.apple.com/library/mac/releasenotes/InterapplicationCommunication/RN-JavaScriptForAutomation/Articles/Introduction.html)に依存しているため、Macでしか動作しません。
（Macユーザー以外の方々すみません:bow:）
（私は別に熱狂的なMacユーザーというわけではありませんが、偶然自分のマシン(私物/会社)がMacだったため、手っ取り早くやりたいことが実現できそうなJXAを使用しました:octocat:）


## vim2browser.vim
[vim2browser](https://github.com/shikato/vim2browser.vim)は、Vimとブラウザ（現状Chromeのみ対応）で、テキストを相互に送り合うためのプラグインです。
インストールすると、以下のようにVimで編集中のテキストを、ブラウザのテキスト編集エリアに送ることが可能となります。
![ezgif-2110046198_1.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/63fc69fc-526b-47b2-6471-c55aa38594fa.gif)


逆にブラウザで編集中のテキストをVimに送ることもできます。
![vimqiita2.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/0cb7386a-9a7e-a1c6-ed6c-df8f10ffebff.gif)


Vimで範囲選択したテキストをブラウザに送ることもできます。
![vimqiita3-compressor.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/b4f64a1b-d029-ca39-656c-865a3bd21109.gif)



## keysender.vim
[keysender](https://github.com/shikato/keysender.vim)は、Vimから対象のアプリケーションに対して、キーイベントを送るためのプラグインです。
例えば、先ほど紹介した[vim2browser](https://github.com/shikato/vim2browser.vim)と、Chromeの拡張機能である[Vimium](https://github.com/philc/vimium)や[Markdown Here](http://markdown-here.com/)を組み合わせると、Vimで入力したテキストを、Evernoteに送ったり、Markdownプレビュー切り替えや、ブラウザのスクロールを、Vimから実行できるようになります。

**ex1. Evernote（vim2browserでテキストを送る + keysenderでMarkdown Here実行）**
![vimqiita4-compressor.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/78ab94b7-d387-4866-3cb0-bc3f019a22b6.gif)

**ex2. GitHub Wiki（keysenderでVimium用のキーイベントを送ってプレビュー切り替えたりスクロールさせたり）**
![ezgif-174280194_5.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/2ab5c30c-ec0a-61a8-7174-24a9bd983b8d.gif)


**ex3. 入力フォーム（vim2browserでテキストを送る + keysenderでTabキー入力）**
![ezgif-4204234001_7.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/a056e1df-cf4e-6aa1-bfbc-5c1580d6a5a7.gif)


**ex4. keysenderとVimiumを組み合わせてブラウジング**
![ezgif-3048377906_6.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/184a766d-2b52-8243-2ced-427c1ba84df2.gif)


なんとなくブラウザとVimの距離が近づいてきたような気もします。

[keysender](https://github.com/shikato/keysender.vim)はChrome以外のアプリケーションにもキーイベントを送ることができるので、以下の様なことも可能になります。

**ex1. Vimを使いながらWunderlistのタスクを完了状態にする**
![vimqiita8-compressor.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/e1639203-75be-8dac-9568-74d8065410e4.gif)


**ex2. Vimを使いながら電卓で計算する**
![vimqiita9.gif](https://qiita-image-store.s3.amazonaws.com/0/47437/786ff3ab-5b09-9169-2653-7619043a4196.gif)


Vimの可能性が色々と広がりそうな気もします。

## さいごに
今回は、私の考えるブラウザのVim体験向上施策について紹介させていただきました。
今回作ったプラグインが、皆様のVim体験向上にも貢献できれば幸いです。
本日期限ぎりぎりに公開したということもあり、**[まだ安定して動作しない](https://github.com/shikato/vim2browser.vim/issues)**かもですが、自分でも使い込んで改善していきたいと思っているので、よろしくお願いします:bow: