blog.petitviolet.net

Vimでブラウザを操る

2014-12-22

QiitaVimVimperator

この記事はVim Advent Calendar 2014 - Qiita 22 日目の記事です 21 日目の記事は @mitsuse さんの非英語ネイティブでも Vim で快適に英語を書きたいでした

Vim アドベントカレンダーですが、ちょっと趣向を変えてVimperatorという、(常に vim キーバインドが良い && キーボードから手を離したくない人)に便利なFirefoxのアドオンを紹介します

いいところ

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

  • テキストをコピーする - これはややめんどくさいので
  • 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

ページの移動

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

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

vimperator_link.gif

その他

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

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

個人的には入力ボックスへのフォーカスがめっちゃ便利だと思っていて、こんな感じにフォーカス出来ます vimperator_focus_text.gif

設定

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

設定ファイル

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

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

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

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

” j/k でのスクロール幅を 1 行 から 3 行 に変更 ” map j 3j とかすると無限ループして死ぬ map j 3 map k 3

” dd でタブを閉じる, d では何もしない no dd :tabclose map d

” h/l に戻る/進むを割り当て map H map L

” H/L でタブ移動 map h gT map l gt ” Shift + ←/→ で現在のタブの位置変更 map :tabmove! +1 map :tabmove! -1

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

# プラグイン

これも本家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:title=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

あとよく使うのとして、SlideShareSpeaker DeckのスライドをCtrl-l/Ctrl-hで進む/戻るにマッピングするプラグインを書いたりしました sd.gif

この辺の自分で作ったのはpetitviolet/vimp-pluginsに置いてあります

作り方

更新が止まってしまっていますが、addUserCommand_for2.0pre - Vimperator を参考にプラグイン開発が出来ます

所感

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

ちなみに、GoogleChrome だと

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

明日

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

from: https://qiita.com/petitviolet/items/45973a3bd4878b01a390