Zenn
⌨️

ブラウザを Vim ライクに操作する Vimium の布教と知見まとめ

2022/02/09に公開
Chrome
Vim
Firefox
Vimium
tech

Vimium というブラウザ拡張があります
The hacker's browser などと銘打たれているもので、その名の通り Vim ライクなキーバインドでブラウザの操作を可能にするものです
ブラウジングにおけるマウス操作を圧倒的に減らすことができます

個人的には4-5年ヘビーユースしており、これなしではブラウザを操作できません
私自身 Vim をまともに使い始めるはるか以前から Vimium を使っているので Vim の経験がなくても慣れれば特に問題ないと思いますし、エンジニアでない方も十分利便を感じられるのではないかと思います

インストール

普通にインストールするだけです
フォークなどの亜種がいくつか存在しますが、本家でユーザーも多いのは以下のものです
Chrome Extension・Firefox Add-on

基本的に Content scripts での実装なので当たり前ではありますが、インストール直後や有効化した直後は各ページリロードしないと効かないので注意

基本的な使い方

  1. キーバインドを覚えます
  2. キーバインドを叩きます

個人的に使用頻度が高そうなキーバインドを挙げておきます
覚えやすくて便利そうなものから使い始めて徐々に増やしていけば十分だと思います

なお、ab のように複数キーが連続して書かれているものは a を押して離してから b を叩くの意味です(基本 Vim と同じですね)
a と b を同時押しではありません

今ここに挙げている中にはありませんが、ヘルプとか Wiki には <a-f> とか <c-f> みたいなキーバインドが書かれていたりします
これはそれぞれ Alt 押しながら f/ Ctrl 押しながら f です

Key Effect
? ヘルプ
j 下にスクロール
k 上にスクロール
d 下に半ページスクロール
u 上に半ページスクロール
h 左にスクロール
l 右にスクロール
gg 最上部までスクロール
G 最下部までスクロール
H 1ページ戻る
L 1ページ進む
x/X タブを閉じる/復元
t 新規タブを開く
r リロード
J 1つ左のタブに移動
K 1つ右のタブに移動
gi 入力欄にフォーカス
入力欄が複数ある場合は Tab で意図したものまで移動
f/F リンクを開く/ボタンを押す(後述)
o/O
b/B 		Vomnibar(後述)
yy 現在のページ URL をクリップボードにコピー
p/P クリップボードの URL を現在のタブ/新規タブで開く

また Vim よろしく数字キーのあとに叩くとその回数繰り返されたりします
3 を押したあとで >> (タブを1つ右と入れ替え)すると3つ移動するみたいなことですね

なおキーバインドは全てカスタム可能なので、必要に応じてどうぞ

ドキュメントに記載がない(僕が知る限りでは)が実は実装されているコマンドというのも存在し(全コマンドの一覧は実装を参照)、これらはカスタムキーバインドとして自分で割り当てない限り使用できません

おすすめの機能/Tips

f でリンクを開く

killer feature その1です

任意のページ上でやおら f を叩いてみると、何やら1-3文字のアルファベットが書かれた小さなラベルがいくつも表示されると思います

例として先ほどの画像左上の Zenn ロゴ周辺を見てみますが、これらのラベルはページ上のリンクやボタンなどクリックできる箇所に表示されています

ここで Following ページを開きたいとすると、対応するラベルは AD となっていますからまず a を叩き、

候補が絞り込まれました
さらに d を叩くと、Following ページを開くことができます!

このように f を使えばページ中のリンク/ボタンクリックもマウスなしで完結できます
Shift を加えて F にすれば新規タブで開くことも可能です

慣れると本当に手放せなくなるのでぜひ使ってみてください

ただ候補たるリンク要素があまりに多いページでは結構重くなるので、マウスのほうが速そうな時は諦めてマウス使いましょう

Vomnibar を使う

killer feature その2です

o とか b で以下のように入力欄が表示され、ブックマークや履歴から incremental に検索して開くことができます
Alfred みたいなイメージですね
o/b の違いは後者がブックマークだけを対象、前者が履歴と任意の URL も対象とする点です
ちなみに O/B にすると確定時に新しいタブで開くことができます

これがめちゃくちゃ便利で、ブックマークバーのディレクトリ構造からちまちま探してクリックするより遥かに速いので個人的に使用頻度が高いです
次項のようにブックマークレットと組み合わせるとさらに強力になります
せっかく incremental な検索ができるので、ブックマークは英数字のそれっぽいキーワードを入れて検索時に変換しなくても候補に出てくるようにしておくのがおすすめです

ちなみに T でタブを検索して切り替えることもできます

ブックマークレットを Vomnibar から呼ぶ

前項で紹介した Vomnibar ですが、ブックマークを検索できるのでブックマークレットを選べばそのまま実行できます

私は以下のような「特定のページでたまに呼びたくなる処理」みたいなのをブックマークレットとして用意し、Vomnibar から検索してサクッと実行することが非常に多いです

  • Google 検索の対象言語を日本語/英語にする
  • コンテンツの幅が広すぎて読みづらいページを無理やり1000pxに狭める
  • ページタイトルをクリップボードにコピーする

自作のブックマークレット集 も必要に応じてご参照ください

FAQ/小ネタ

ページが元から持っているショートカットと競合している

Web ページ/アプリケーションが用意しているショートカットキーが Vimium のキーバインドと競合する場合、基本的には Vimium だけが入力を受け取ります
一時的に Vimium を黙らせてページまで入力を通してほしいときは、i で insert mode に入りましょう(解除する時は Esc)
insert mode の間は右下にその旨表示されます

またそのページで使用頻度が高く Vimium より優先させたいキーなどがある場合、ページ単位(パターンにマッチするページ)で無効化させる Vimium のキーを指定できます
Vimium の設定ページ最上部にある Excluded URLs and keys から設定でき、私は以下のようなものを指定しています

Pattern Keys
https://www.youtube.com/* jklm<>
https://app.slack.com/* p
https://calendar.google.com/* dmwjk

少しわかりづらい挙動として、Keys を空欄にすると全キーを無効化できます

ちなみに Vimium のアイコンを押してポップアップを開くと今開いているページのドメイン配下全ページを対象にした Excluded keys をサクッと指定できたりします

↑ でページ単位で無効化してるキーバインドをやっぱり使いたい

1 のあとに叩くと効きます
数字キーのあとに叩くとその回数繰り返されるというやつを単に1回で使っているだけですね

1 無効化してるページではできませんが…

埋め込みツイートとか動画とかクリックしたあと動かなくなった

埋め込みの類はだいたい iframe が使われており、Vimium は基本的にそのときフォーカス(Vimium が)しているフレーム内でしか動かないのですが、フレーム内をクリックなどするとそのフレームにフォーカスが行ってしまうからです
フォーカスするフレームは gf で順番に切り替えられるのでこれを使って意図したフレームまで戻してくるか、gF でルートのフレームにフォーカスすると大体うまく行きます

逆に埋め込みフレーム内を操作したいときとかは gf でそのフレームまで持っていくことになりますが、そこまでする価値があるかは適宜判断してマウスも使ってください

Web ページが親切心で入力欄にオートフォーカスするのが鬱陶しい

わかる
急に効かなくなったと思ったらページの検索欄に全部入力されてたりするんですよね
設定から Miscellaneous options > Don't let pages steal the focus on load 有効化するとある程度ブロックしてくれます(完璧ではありませんが)

見た目ダサくない?

カスタムテーマ使えます!
Wiki に良さげなテーマがまとまっているので、好きなものを選んで使ってください

私は ysjn/vimium-simply-dark をフォークしてアクセントカラーをピンクから水色に変えたりフォント変えたりしたもの(mkobayashime/vimium-simply-dark)を使っています(イメージ ↓)
利用/改変はライセンス内でご自由にどうぞ


使い方は各テーマのレポジトリに書いてあったりなかったりすると思いますが、基本的には配布されてる CSS ファイルを Vimium の設定ページの CSS for Vimium UI にコピペするだけです

なおサブフレーム内ではテーマ効かなかったりするんですが、個人的にはそこまでこだわりがないので対処があるのかは知りません

アドレスバーにフォーカス行ってしまうと戻ってくるのが面倒

こちらの記事 で紹介されていて目から鱗だったんですが、Chrome の Search Engine に以下のようなものを追加しておくとアドレスバーで j → Enter だけでサクッとアドレスバーから抜けられます

Key Value
Search engine (任意)
Keyword j
(その他好きなキー)
URL javascript:
(末尾セミコロンが必要)

なおアドレスバーの通常の用途はおそらくほぼ全部 Vimium の範疇でカバーできるので、そちらを使う方が綺麗です

  • 検索は t で新タブ開くか Vomnibar にそのまま入れるだけです
  • ちょっと URL 弄りたいときとかは ge 使いましょう
  • 1階層上に上がりたいとかは gu/gU が便利です

Mac だと Alt とか Ctrl とかの挙動が違って設定を共有できない

Mac を爆破しましょう

まあ一応真面目に答えると、私はこんな感じのカスタムを書いています

map <a-π> togglePinTab
map <a-µ> toggleMuteTab

シークレットモードで効かない

Chrome の拡張機能設定から Allow in incognito オンにしてください

ローカルファイルで効かない

Chrome の拡張機能設定から Allow access to file URLs オンにしてください
※PDF ファイルでは効きません

困り

まだうまい対処を見つけられていません、ご存知の方いれば教えてください

GitHub

GitHub が yy に commit hash まで含めたページ URL コピーを割り当てているせいで Vimium の yy が効きません(というか GitHub の方があとにコピーしてクリップボード上書きされる)
あとたまに / で検索しようとして . で Codespaces 開いてしまうのもかなり鬱陶しいです

Scrapbox

Esc 何回か押しても入力フォーカスになっていることがあり、よく k/j とか入力してしまいます

Notion

Vimium との相性が最悪です
最大限の憎しみを持って使いましょう
私は使わないと針山に落とすと脅されない限り使わなくなりました

その他

困ったらとりあえず Wiki に目を通しましょう
結構いろいろ書いてあります

Discussion