Vimiumを使ってChromeをVimのように操作する方法

はじめに

2022年9月から本格的にプログラミングを学習し始め、2023年4月に京都のWeb系ベンチャ企業でフロントエンジニアとして入社しました。現在エンジニア歴は3ヶ月になります。実務では主にWordpress, JavaScript, phpを使用しています。

この記事では、ブラウザ操作を効率化したいと考えている方、特にVimの操作方法に興味がある方に向けて、Google Chromeの拡張機能であるVimiumの使い方について解説します。

この記事の対象者

この記事は、以下のような方々におすすめです。

• ブラウザ操作をより効率的に行いたい方
• Vimの操作方法に興味がある方
• マウス操作を減らし、キーボード操作を増やしたい方
• 新たなブラウザ操作の方法を学びたい方

Vimiumを使うと、マウスをほとんど使わずにブラウザを操作できるようになります。これにより、ブラウザ操作の効率が大幅に向上します。

参照サイト

vimium GitHub
Vimium chromeウェブストア

1. Vimとは

Vimは、テキストエディタの一種で、その特徴はキーボードだけで高速に操作することが可能な点です。VimはUNIX系のシステムで広く使われており、その効率的な操作性から多くの開発者に愛用されています。

2. Vimiumとは

Vimiumは、Google Chromeの拡張機能で、ブラウザをVimのように操作することができます。Vimiumを使うと、マウスをほとんど使わずにブラウザを操作できるようになります。

3. Vimiumのインストール手順

Google Chromeを開き、VimiumのChrome Web Storeページにアクセスします。
「Chromeに追加」ボタンをクリックします。
確認ダイアログが表示されたら、「拡張機能を追加」をクリックします。
これでVimiumがインストールされ、ブラウザの右上にアイコンが表示されます。

4. Vimiumの環境設定

Vimiumの設定を開くには、ブラウザの右上にあるVimiumのアイコンをクリックし、ドロップダウンメニューから「Options」を選択します。ここでは、各種コマンドのキーバインドを変更したり、特定のURLでVimiumを無効にする設定などを行うことができます。

環境設定についてわかりやすく書いているサイトがいくつかありました。

https://zenn.dev/gkz/articles/vimium-beginners-guide
https://qiita.com/satoshi03/items/9fdfcd0e46e095ec68c1

Excluded URLs and keys

この設定では、Vimiumを無効にするURLを指定できます。例えば、特定のウェブサイトでVimiumのショートカットキーが邪魔になる場合などに利用します。

Custom key mappings

この設定では、Vimiumのショートカットキーをカスタマイズできます。以下のように設定すると、指定したキーで特定の操作を行うことができます。

map h goBack
map l goForward
map H previousTab
map L nextTab
map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab

この設定では、hキーで戻る、lキーで進む、Hキーで前のタブに移動、Lキーで次のタブに移動、iキーでリンク選択モードに入る、Iキーで新しいタブでリンクを開く、という操作が可能になります。

Custom search engines

この設定では、Vimiumから直接検索を行うための検索エンジンをカスタマイズできます。例えば、Google以外の検索エンジンを使用したい場合などに利用します。

5. Vimのコマンド一覧

以下に、Vimiumで使用できるVimの基本的なコマンドを紹介します。

現在のページを操作する

• ? : 利用可能な全てのキー一覧を表示するヘルプダイアログを表示
• h : 左にスクロール
• j : 下にスクロール
• k : 上にスクロール
• l : 右にスクロール
• gg : ページの先頭にスクロール
• G : ページの最下部にスクロール
• d : ページを半分下にスクロール
• u : ページを半分上にスクロール
• f : 現在のタブでリンクを開く
• F : 新しいタブでリンクを開く
• r : リロード
• gs : ソースを表示
• i : インサートモードに入る -- Escを押すまで全てのコマンドが無視されます
• yy : 現在のURLをクリップボードにコピー
• yf : リンクのURLをクリップボードにコピー
• gf : 次のフレームに進む
• gF : メインフレーム/トップフレームにフォーカス

新しいページに移動する

• o : URL、ブックマーク、履歴エントリを開く
• O : 新しいタブでURL、ブックマーク、履歴エントリを開く
• b : ブックマークを開く
• B : 新しいタブでブックマークを開く

検索を使用する

• / : 検索モードに入る
  -- 検索クエリを入力してEnterで検索、Escでキャンセル
• n : 次の検索結果に移動
• N : 前の検索結果に移動

履歴を操作する

• H : 履歴を戻る
• L : 履歴を進む

タブを操作する

• J, gT : 左のタブに移動
• K, gt : 右のタブに移動
• g0 : 最初のタブに移動。nを指定してng0でn番目のタブに移動
• g$ : 最後のタブに移動
• ^ : 以前に訪れたタブに移動
• t : タブを作成
• yt : 現在のタブを複製
• x : 現在のタブを閉じる
• X : 閉じたタブを復元 (つまり、'x' コマンドを取り消す)
• T : 開いているタブを検索
• W : 現在のタブを新しいウィンドウに移動
• <a-p> : 現在のタブをピン留め/ピン留め解除

マークを使用する

• ma, mA : ローカルマーク "a" (グローバルマーク "A")を設定
• \`a, \`A : ローカルマーク "a" (グローバルマーク "A")にジャンプ
• `` : 前のジャンプの前の位置にジャンプ
  -- つまり、前のgg, G, n, N, / または `a の前に

その他の高度なブラウジングコマンド

• ]], [[ : リンクラベル 'next' または '>' ('previous' または '<') を追従
  -- ページネーションされたサイトの閲覧に便利
• <a-f> : 新しいタブで複数のリンクを開く
• gi : ページ上の最初 (または n番目) のテキスト入力ボックスにフォーカス。 を使って選択肢をサイクル
• gu : URLの階層を一つ上に移動
• gU : URLの階層をルートに移動
• ge : 現在のURLを編集
• gE : 現在のURLを編集して新しいタブで開く
• zH : 全ての左にスクロール
• zL : 全ての右にスクロール
• v : ビジュアルモードに入る; p/Pを使って貼り付けして進む、yを使ってヤンク
• V : ビジュアルラインモードに入る
  Vimiumはコマンドの繰り返しをサポートしているため、例えば5tを押すと短時間で5つのタブが開きます。 (または )を押すとキューの一部

以上が、Vimiumを使ってChromeをVimのように操作する方法になります。Vimiumを活用して、ブラウザ操作の効率を上げてみてください。