petitviolet blog

    Vimでブラウザを操る

    2014-12-22

    QiitaVimVimperator

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

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

    いいところ

    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

    ページの移動

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

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

    vimperator_link.gif

    その他

    • :: コマンドモード
    • gi: 1 つめの入力ボックスにフォーカス - 3giで 3 つめにフォーカス - google 検索など、検索ボックスに瞬時にフォーカス出来て便利
    • 補完の選択: TabとS-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

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

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

    作り方

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

    所感

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

    ちなみに、GoogleChrome だと

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

    明日

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

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