RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

cVimを使ってブラウジングを快適に

はじめに

以前調べることが多い時期があり、効率的にブラウジングするため、cVimというgoogle Chromeで利用できる拡張機能を導入しました。cVimを使うとVimライクにブラウザを使うことができる他、ショートカットを自分で設定することができます。この記事ではcVimを使うとできることを紹介します。

やりたいこと

私がツールを導入しやりたかったことを記載します。

  • できるだけマウスを使わずにブラウジングをしたい
  • command + fのような2キーのショートカットを1キーで行いたかった
  • タブの複製や特定のページを開くといった、存在しないショートカットを使いたい

cVimのダウンロード

ダウンロードページから追加ボタン押してダウンロードします(私は追加済みのため「CHROMEに追加済み」という表示になっていますが)。 f:id:kuwa_38:20180318122758p:plain

cVimでできること(ショートカットキー)

cVimに元から備わっているショートカットキーについて幾つか紹介します。

  • fでページ内のリンクにショートカットを割り振る
    • 恐らくcVim(や似た拡張機能Vimium)を使った際に一番便利な機能です。下記の場合は続けてuを押せばラクスのホームページが開かれます f:id:kuwa_38:20180318122942p:plain
  • jで下、kで上にページスクロール(矢印キーの上下と同じ挙動)、dで下、uで上に半ページ分スクロール
  • ggでページの最上部へ移動、Gでページの最下部へ移動
  • /でページ内検索、Enterで検索文字列を確定後nで次の検索対象、Nで前の検索対象へ移動
  • giでページの一番上の検索欄にフォーカス

cVimでできること(コマンド)

:でコマンドが打てます。例えば:tabnew [URL]で「[URL]を新規タブで開く」、:tabnew [検索文字列]で「新規タブで[検索文字列]を検索した結果を開く」ことができます。また、:でコマンドモード起動した後、文字を入力するとその文字から始まるコマンドを表示してくれます(下記はtを入力した場合)。候補はtabshft + tabで移動できます。 f:id:kuwa_38:20180318123032p:plain

ショートカットのカスタマイズ

:でコマンドを打てると先ほど記述しました。とは言えコマンドを打つくらいならマウスで操作する方が早いという話です。ここではショートカットキーやコマンドを設定する方法をご紹介します。

ショートカットなどのカスタマイズはcvimのマーク > Settingsから設定できます。

f:id:kuwa_38:20180318123104p:plain

cVimrcと書かれた枠に設定を記述していきます。因みにHelpのリンクを押すと、cVimのショートカットキーやCSSの設定方法や例が載っていますので詳しく知りたい方はご参照下さい。

f:id:kuwa_38:20180318123140p:plain

ここでは例として、「ラクスのホームページを新規タブで開く」を設定してみます。

1.cVimrcに設定を記述

map [任意のキー] [挙動]で任意のキーに特定の挙動を設定できるので、下記のように設定します。これでaキーに:tabnew https://www.rakus.co.jp/が割り当てられます。

map a :tabnew https://www.rakus.co.jp/

2.画面下部のsaveボタンから設定を保存

これで設定は完了です。あとは新規のタブを開いて(設定前に開いていたタブだと設定が反映されていないためリロードが必要)、aと押せば下記のような画面が表示されるはずです。さらにEnterを押せばラクスのトップページが開かれるはずです。

f:id:kuwa_38:20180318123218p:plain

上記の例はコマンドを実行するものであったため、ショートカットキーを押したあとにEnterを押す必要がありましたが、cVimで用意されているショートカット(fjkなど)ならキーを押しただけで特定の挙動を実行できます。

設定例

最後に現在の私の設定を紹介します(使い始めて間もないのでそこまで設定してませんが...)

f:id:kuwa_38:20180318123238p:plain

unmap x

  • unmap [キー]と設定することで特定のキーをショートカットで使えなくします
    • Commandと間違ってxを押すとcVimに登録されている「現在のタブを閉じる」(closeTab)が実行されてしまうので無効にしました(タイポしなければいい話なんですけどね)

map w

  • Command + wの「現在のタブを閉じる」をw1つでできるようにしています
    • したかったことの1つ「2キーのショートカットを1キーで行いたい」を実現している設定です

map e :duplicate

  • eと押した後にEnterを押すと「現在のタブを複製する」を実行できます
    • したかったことの1つ「存在しないショートカットを使いたい」を実現している設定です

let hintcharacters "asdfgjklwertuioxcvnm"

  • fでページ内にリンクを割り振る際に使用できるキーを設定しています

set noautofocus

  • 開いた際に入力欄にフォーカスされるページだと、ショートカットを使う前に入力欄からでる(escを押す)必要があります。面倒なので、入力欄にフォーカスしないように設定しています

終わりに

この記事ではcVimについてご紹介しました。ここではCSSなどの設定には触れませんでしたが、他にも色々と設定ができるので気になった方は調べてみてください。

参考

Copyright © RAKUS Co., Ltd. All rights reserved.