Web

ブラウザをキーボードで操作するための拡張機能 Vimium

投稿日:2020年4月16日 更新日:

1. Vimium とは?

Vimium は、キーボードショートカットキーでウェブブラウザを操作するための ブラウザ拡張機能です。Chrome用Firefox用 とが用意されています。

名前が表している通り、vimというテキストエディタのキー操作をベースとしていますが、各操作に対するキーの割当てはカスタマイズすることも可能です。

私は vim の操作に慣れていることもあり Vimium を使い始めたのですが、「キー操作でスクロールする」や「キー操作でリンクを開く」だけでも十分に便利なので、vim に慣れていなくても導入する価値はあるだろうと感じています。

2. Vimium のインストール

Chrome の場合

Chrome で Vimium – Chrome ウェブストア にアクセスし、[Chrome に追加] ボタンを押せばインストールできます。

Firefox の場合

Firefox で Vimium-FF – Get this Extension for 🦊 Firefox (en-GB) にアクセスし、[+ Add to Firefox] ボタンを押せばインストールできます。

3. Vimium のキー操作

Chrome を使って、Vimium の主な操作について説明します。

※ 例えば c-d というのは、Ctrl キーを押しながら d キー押すことを意味しています。

※ 大文字にしてあるキーは、実際には Shift キーを押しながら、その文字のキーを押します。例えば、F は、Shift + f を意味しています。

(1) スクロール操作

キー 操作
j 1行分、下にスクロールする
k 1行分、上にスクロールする
c-d 半ページ分、下にスクロールする
c-u 半ページ分、上にスクロールする
G 一番下までスクロールする
gg 一番上までスクロールする
h 左にスクロールする
l 右にスクロールする

(2) リンクを開く

キー 操作
f リンク箇所に、それを開くためのキー割り当てを表示する(現在のタブで開く)
F リンク箇所に、それを開くためのキー割り当てを表示する(新規タブで開く)

上の説明を補足します。

f もしくは F キーを押すと、以下のようにリンクが貼られている部分に、アルファベットが表示されます。

f もしくは F キーを押したときの画面

開きたいリンクに表示されたアルファベットのキーを押すと、そのリンクが開きます。例えば、「SA」と表示されているリンクであれば、「s キーを押す → a キーを押す」という操作になります。

(3) Vomnibar を使う

Vomnibar というのは 以下の小窓のことを指します。ここからいろいろな項目を検索することができます。

Vomnibar

目的によって、Vomnibar を表示するためのキー操作は異なります。

キー 操作
o URL, ブックマーク, 履歴を開きます(現在のタブで)
O URL, ブックマーク, 履歴を開きます(新規タブで)
b ブックマークを開く(現在のタブで)
B ブックマークを開く(新規タブで)
T 開いているタブを検索して開く

検索エンジンを使う操作

Vimium の設定画面(後述)で、「任意の検索エンジンに文字を割り当てておく」と、Vomnibar からその検索エンジンを使って検索することができます。

例えば、Google検索 (https://www.google.com/search?q=%s) に “g” を割り当てている場合であれば、以下の手順で検索できます。

  1. o もしくは O キーを入力して Vomnibar を表示する
  2. g を入力してから、Space キーを押す
  3. 検索キーワードを入力する
  4. Enter キーを押す

参考

(4) 履歴の操作

キー 操作
H 前のページに戻る
L 先のページに進む

(5) タブの操作

キー 操作
J 左のタブに移動する(Vimium がなくても Ctl + Tab で可能)
K 右のタブに移動する(Vimium がなくても Shift + Ctl + Tab で可能)
x そのタブを閉じる

(6) その他

キー 操作
? ヘルプ(キー一覧)を表示する

こんな画面が表示されます。

参考

4. 設定画面

Vimium の設定画面 (Options) を表示する手順はいろいろありますが、ツールバー上のアイコンを右クリックし [オプション] をクリックするのが一番分かりやすい手順だと思います。

以下が設定画面です。

設定画面 (Options)

各設定についての説明を表にしました。

設定項目 説明
Excluded URLs and keys
(除外するURLとキー)
  • 「Patterns」欄には、Vimium を無効にする URLを入力します。正規表現が使えるようですが、”*” は空もしくは1文字以上の文字列にマッチします。ちなみに、”?” は手前の文字があってもなくてもマッチするという記号です。
  • 「Keys」欄には、無効にするキーを入力します。空にしておくと、すべてのキーが無効になります。
Custom key mappings
(カスタムキーマッピング)
  • 「map {キー} {コマンド}」と書くと、{キー} を押すと {コマンド} が実行されるようになります。これは Vim の記述フォーマットです。
  • 「unmap {キー}」と書くと、{キー} のマッピングが削除されます。
  • 使えるコマンドは、右側にある [Show Available commands] というリンクを開くと確認できます。
Custom search engines
(カスタム検索エンジン)
  • 「{文字}: {URL} {説明}」と書くと、{文字} と {URL} が紐付けられます。
  • 使い方は、本ページ「3 (3) 検索エンジンを使う操作」を参照してください。

何か変更を行った場合は、画面下にある [Save Changes] ボタンを押すのを忘れないようにしましょう。押さないと変更が反映されません。

また、画面下に [Show Advanced Options] というボタンを押すと、高度がオプションが表示されますが、本記事では説明を省きます。

5. ツールバーからの操作

ツールバー上のアイコンから、今見ているページのURLを「除外URL」として追加することができます。

手順は上画面の通りです。

  1. Vimium アイコンをクリックする。
  2. [Patterns] 欄に、現在見てるページのURL(の正規表現)が自動的にセットされます。通常はこのままでよいと思いますが、変更することもできます。
  3. [Save Changes] ボタンを押すと、この設定が保存されます。

6. おわりに

高機能なWebアプリケーション(Webページ)では、専用のキー操作が用意されていたりするので、Vimium が有効になっていると操作ができず困ります。そのような場合は、除外URLとしてそのWebページを登録しましょう。

最初に書いた通り、「スクロール」と「リンクを開く」操作だけに使うとしても便利だと思います。

7. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

HTML

HTMLの雛形 (CSS, JavaScriptも)

コピーして使えます。 目次HTML全体パターン1全体パターン2 CSSnormalizeNormalize.css中央寄せのページ幅を指定する方法Flexbox を使う方法タイトル部分とフッター:その …

HTML

HTML におけるコメントの書き方

HTML におけるコメントの書き方について説明します。 目次1. コメントとは?2. HTML におけるコメントの記述テキストの制限3. 仕様書 1. コメントとは? まず、「コメント」というのは、「 …

Web

Icons8 の Free Icons を使う手順

Icons8 の Free Icons Icons8 というサイトでは、いろいろな種類の無料素材が提供されています。 今回、そのうちの1つである「アイコン(Free Icons)」を使う手順についての …