Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5608

ChromeをVim風にキーボードで操作するcVimエクステンションのススメ

$
0
0

Vim風操作エクステンションとは?

普通の人はブラウザはマウスを使って操作しますが、できればキーボードから手を離さないで操作できた方がハッカーみたいでかっちょいいですよね、仕事サボってネットサーフィンをしていても周りからはまるで仕事してるかのようにみえます
で、そもそもChrome自体にもキーボードショートカットはいっぱいあるわけですが、それほど使い勝手がよくありません
Vimを愛用する者ならVimのノーマルモードのような指使いで操作したくなるのが当然なわけです、そしてそれを実現したのがVim風操作エクステンションです
そのようなエクステンションは結構たくさんあって、VimperatorとかVimiumとかVichromeとかを過去に使ってきましたが、それぞれ微妙に一長一短があったり、最近のchrome54へのアップデートで使えなくなったりしてしまったりしていて、新しいのを探していたらcVimというのを見つけ、今までで一番調子が良かったので紹介する次第です

cVim操作の基本

  • jkhlで上下左右にページをスクロールできます
  • Gで画面の一番下、ggで一番上にとびます
  • fキーを押すと画面のリンクがある場所に下のようにアルファベットのマークがでます、例えばこの場合fキーに続いてaキーを押せば投稿画面に進むことができます スクリーンショット 2016-11-10 16.00.04.png
  • tを押すと画面の上部にコマンドラインが出てきて:tabnew と表示されます、それに続いてURLを入れれば新しいタブでそのページが開かれます、URLでなく言葉を入れればGoogle検索の結果が新しいタブで開かれます
  • Hで戻る、Lで進む
  • xでタブを閉じる
  • gt、gTでタブを移動
  • /で検索、n、Nで検出場所に移動
  • 他にも機能は山ほどあって、私もまだ全然使いこなしていませんが、そのへんは公式ページを参照してください、好きなだけカスタマイズもできます

除外サイトを登録する

最近のサイトではもともとキーボードショートカットが豊富なサイトがあります
例えばgmailなんかはキーボードショートカットが充実してるので、cVimの機能が逆に邪魔だったりします
その場合はブラウザ右上のcVimアイコンから「Disable cVim on this domain」を選びましょう、今後は自動的にcVimが適用されないようになります

カスタムする

詳細なカスタムのやり方は公式ページを見てもらうとして、個人的にカスタムした部分の一部をさらしてみます
cVimアイコンからsettingsをクリックしてあらわれる画面でカスタマイズをします
カスタマイズが終わったら右上の「save」を押すのを忘れずに

cVimrc
let autofocus="false"let scrollstep=50let blacklists = ["https://feedly.com/*","https://mail.google.com/*"]
map u lastClosedTab
map <C-f> scrollFullPageDown
map <C-b> scrollFullPageUp
iunmap <C-k>

上から説明すると

  • 自動的にインプットフィールドにフォーカスが合うのを中止
  • スクロール具合を調整
  • ブラックリストは自分でcVimrcに書く必要はなく、前述のやりかたで除外すると自動的にここに書かれます
  • uキーで最後に閉じたタブを開く(undoの感覚)
  • Ctrl+f、Ctrl+bで大きくスクロール
  • LinuxやOSXのユーザーはCtrl+kは「カーソルより後ろを消す」機能として使いたいですよね、なので、cVimの割当を解除、インプットフィールドでの機能なので、unmapじゃなくてiunmapとするようです

cssも少しだけいじりました

css
<中略>#cVim-link-container,.cVim-link-hint,#cVim-hud,#cVim-status-bar{font-family:Helvetica,HelveticaNeue,Neue,sans-serif,monospace,Arial;font-size:18pt!important;-webkit-font-smoothing:antialiased!important;}<中略>.cVim-link-hint{margin:-0.5em00-0.5em;position:absolute;color:#302505!important;<中略>

フォントサイズを大きくしたのと、リンクのマークが出る場所がなんか下にズレてでるので少し上に表示するようにしただけです

とりあえず紹介まで


Viewing all articles
Browse latest Browse all 5608

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>