Help us understand the problem. What is going on with this article?

Vimでブラウザを操る

More than 5 years have passed since last update.

この記事は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に記述できます
自分で使っているものとして

~/.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に大量においてあります
プラグインについてはほんの少しはてブを検索するVimperatorプラグインを作った - petitviolet_blogに書いたことがあります

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

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だと

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

明日

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away