Vimでブラウザを操る


この記事は[Vim Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/vim) 22日目の記事です
21日目の記事は @mitsuse さんの[非英語ネイティブでも Vim で快適に英語を書きたい](http://mitsuse.jp/2014/12/20/vim-ac-2014-writing-english/)でした

Vimアドベントカレンダーですが、ちょっと趣向を変えて[Vimperator](https://addons.mozilla.org/ja/firefox/addon/vimperator/)という、(常にvimキーバインドが良い && キーボードから手を離したくない人)に便利な[Firefox](https://www.mozilla.org/ja/firefox/new/)のアドオンを紹介します


# いいところ

vimキーバインドでブラウジングが出来るようになります
例えばデスクトップアプリのKobitoとかYoruFukurouだと`j`や`k`で上下に移動することが出来ますが、そんな程度ではありません
今のところマウスを使うのは

- テキストをコピーする
	- これはややめんどくさいので
- YouTubeなどのフレーム間移動(Embedモードからの脱出)
	- vimperatorでも出来るはずだが手元ではうまくいかない
		- 誰か教えてください
- 片手で操作したい時
	- ご飯食べながらとか

くらいになりました
もちろん個人差はあります

# 簡単な使い方

## 移動

- `j`, `k`: 上下のスクロール
- `C-f`, `C-b`, `C-d`, `C-u`: 0.5/1画面分の上下スクロール
- `gg`, `G`, `10G`: ページの先頭、末尾、上から10%の所にジャンプ
- `gt`, `gT`: 左右のタブに移動
	- `C-n`, `C-p`でも可能
- `/`: ページ内検索 
	- `n`, `N`でヒットした単語にジャンプできる

移動はこんな感じ
![vimperator_basic.gif](https://qiita-image-store.s3.amazonaws.com/0/280/4c5e7d0b-8f03-bdad-ab93-dafca6407003.gif "vimperator_basic.gif")

## ページの移動
- `f`: 表示領域内のリンクに番号を表示する
	- 表示された番号を入力するとクリックしたことになる
	- `F`だと新しいタブで開く
- `⌥-←`, `⌥-→`: 履歴の戻る/進む
- `d`: ページを閉じる
- `u`: 閉じたページを開き直す
- `t`, `o`: ページを開く
	- `t hoge`とタイプすると`hoge`でWeb検索する
		- urlを入れると、そのurlを開く
	- `o`だと今いるタブに、`t`だと新しいタブに結果を表示する

リンクの開き方はこんな感じ

![vimperator_link.gif](https://qiita-image-store.s3.amazonaws.com/0/280/62b1feea-2ea8-eddb-5b4c-051323c66be6.gif "vimperator_link.gif")


## その他
- `:`: コマンドモード
- `gi`: 1つめの入力ボックスにフォーカス
	- `3gi`で3つめにフォーカス
	- google検索など、検索ボックスに瞬時にフォーカス出来て便利
- 補完の選択: `Tab`と`S-Tab`で選択できる

大体これくらいおぼえておけば普段は問題ないでしょう

個人的には入力ボックスへのフォーカスがめっちゃ便利だと思っていて、こんな感じにフォーカス出来ます
![vimperator_focus_text.gif](https://qiita-image-store.s3.amazonaws.com/0/280/d8bd7c7e-7cd1-e981-8c99-2784eebeaafb.gif "vimperator_focus_text.gif")

# 設定

本家vimと同様、vimperatorもカスタマイズすることが出来ます

## 設定ファイル

`~/.vimperatorrc`に記述できます
自分で使っているものとして

```rc:~/.vimperatorrc
" スクロールの端などの際に出るbeepをoff
set nobeep

" デフォルトの検索エンジン
set defsearch=google

" 検索キーワードのハイライト
set hlsearch

" j/k でのスクロール幅を 1行 から 3行 に変更
" map j 3jとかすると無限ループして死ぬ
map j 3<C-e>
map k 3<C-y>

" ddでタブを閉じる, dでは何もしない
no dd :tabclose<CR>
map d <NOP>

" h/lに戻る/進むを割り当て
map H <A-Left>
map L <A-Right>

" H/Lでタブ移動
map h gT
map l gt
" Shift + ←/→ で現在のタブの位置変更
map <S-Right> :tabmove! +1<CR>
map <S-Left> :tabmove! -1<CR>
```

などがあります
キーバインドを自由に設定できるのはストレスが無くて良いです

# プラグイン

これも本家vim同様、様々なプラグインを導入することが出来ます
こちらはブラウザへの操作をするためにJavaScriptで記述します

`~/.vimperator/plugin`ディレクトリにjsファイルを保存すれば読み込みます
[vimpr/vimperator-plugins](https://github.com/vimpr/vimperator-plugins)に大量においてあります
プラグインについてはほんの少し[はてブを検索するVimperatorプラグインを作った - petitviolet_blog](http://petitviolet.hatenablog.com/entry/20140625/1403695114)に書いたことがあります

例えば、`:ht vim`とするとはてなブックマークでvimタグがついたものを検索できるようにするプラグインだと下のように書けます

```js:hatenaBookmarkTagSearch.js
(function() {
  liberator.modules.commands.addUserCommand(
    ["hatenaTag", "hatena", "ht"],
    "search from hatena bookmarks by tags",
    function(args){
      if (args.length === 0) {
        liberator.echo('input a query!');
        return false;
      }

      // make "and" query
      var query = args.join("+");
      var hatenaTagUrl = 'http://b.hatena.ne.jp/search/tag?safe=on&sort=recent&q='
      // open in a new tab
      liberator.open(hatenaTagUrl + query, liberator.NEW_TAB);
      return false;
    },
    {},
    true
  );
})();
```
![ht.gif](https://qiita-image-store.s3.amazonaws.com/0/280/7120af06-e7b3-f9fa-e60b-71f5b591ecdf.gif "ht.gif")

あとよく使うのとして、[SlideShare](http://www.slideshare.net/)や[Speaker Deck](https://speakerdeck.com/)のスライドを`Ctrl-l`/`Ctrl-h`で進む/戻るにマッピングするプラグインを書いたりしました
![sd.gif](https://qiita-image-store.s3.amazonaws.com/0/280/40a21172-c81a-6e60-6194-4d05263357c0.gif "sd.gif")

この辺の自分で作ったのは[petitviolet/vimp-plugins](https://github.com/petitviolet/vimp-plugins)に置いてあります

## 作り方

更新が止まってしまっていますが、[addUserCommand_for2.0pre - Vimperator](http://seesaawiki.jp/w/shin_yan/d/addUserCommand%5ffor2%2e0pre) を参考にプラグイン開発が出来ます

# 所感

最近はGoogleChromeが人気で、Firefoxをまわりで使っている人がやや少なくなってきているように感じますが、vimperator使ってめっちゃ便利にFirefox使いましょう

ちなみに、GoogleChromeだと

- [Vimium - Chrome ウェブストア](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb)
- [Vichrome - Chrome ウェブストア](https://chrome.google.com/webstore/detail/vichrome/gghkfhpblkcmlkmpcpgaajbbiikbhpdi)

みたいなのがあったりもします

# 明日

明日の記事は @s_of_p さんです