36
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VimAdvent Calendar 2015

Day 17

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

Last updated at Posted at 2015-12-17

この記事は、Vim Advent Calendar 2015 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という素晴らしいプラグインが存在しており、Vim(オリジナル)とまではいかないまでも、少なくとも自分が満足できる程には良いVim体験を提供してくれています。

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

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

ここからの内容について

ここから作ったVimプラグインの紹介をしていきますが、どちらのプラグインもJXAに依存しているため、Macでしか動作しません。
(Macユーザー以外の方々すみません:bow:
(私は別に熱狂的なMacユーザーというわけではありませんが、偶然自分のマシン(私物/会社)がMacだったため、手っ取り早くやりたいことが実現できそうなJXAを使用しました:octocat:

vim2browser.vim

vim2browserは、Vimとブラウザ(現状Chromeのみ対応)で、テキストを相互に送り合うためのプラグインです。
インストールすると、以下のようにVimで編集中のテキストを、ブラウザのテキスト編集エリアに送ることが可能となります。
ezgif-2110046198_1.gif

逆にブラウザで編集中のテキストをVimに送ることもできます。
vimqiita2.gif

Vimで範囲選択したテキストをブラウザに送ることもできます。
vimqiita3-compressor.gif

keysender.vim

keysenderは、Vimから対象のアプリケーションに対して、キーイベントを送るためのプラグインです。
例えば、先ほど紹介したvim2browserと、Chromeの拡張機能であるVimiumMarkdown Hereを組み合わせると、Vimで入力したテキストを、Evernoteに送ったり、Markdownプレビュー切り替えや、ブラウザのスクロールを、Vimから実行できるようになります。

ex1. Evernote(vim2browserでテキストを送る + keysenderでMarkdown Here実行)
vimqiita4-compressor.gif

ex2. GitHub Wiki(keysenderでVimium用のキーイベントを送ってプレビュー切り替えたりスクロールさせたり)
ezgif-174280194_5.gif

ex3. 入力フォーム(vim2browserでテキストを送る + keysenderでTabキー入力)
ezgif-4204234001_7.gif

ex4. keysenderとVimiumを組み合わせてブラウジング
ezgif-3048377906_6.gif

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

keysenderはChrome以外のアプリケーションにもキーイベントを送ることができるので、以下の様なことも可能になります。

ex1. Vimを使いながらWunderlistのタスクを完了状態にする
vimqiita8-compressor.gif

ex2. Vimを使いながら電卓で計算する
vimqiita9.gif

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

さいごに

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

36
36
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?