😸

【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作するVimiumのオレオレ設定方法をスクリーンショットで解説

4 min read

本記事では、2021年1月24日(日)に開催された(開催される)July Tech Festa 2021 Winter(以下、JTF2021w)の発表資料からはみ出てしまったネタを取り扱っていきます。いわゆる「没ネタの供養」ですね笑。

0. はじめに

こんにちは。都内でエンジニアをしている、@gkzvoiceです。本記事は、Vimライクなキーバインドでブラウザを操作するVimiumの設定方法の解説記事です。

https://twitter.com/gkzvoice/status/1351682676021817344

発表資料と動画

もともとスライド用にスクリーンショットを大量に取っていたので、スクリーンショットが多いです。そのため、Chromeの拡張機能の設定が初めてという方でも、本記事を読めばVimiumをすんなり導入できるのではないか?と思います。

「Vimライクなキーバインド」とは?

そもそもキーバインドとはなんでしょう。JTF2021wの発表資料でいい感じに書いたので取り上げたいと思います。

Vimのキーバインド
↓
Vimのキーに対する機能の割り当て

参考:#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer beginners start with Vimium - Speaker Deck

1. Vimiumとは

※ 当方はChromeユーザーなので、本記事ではChromeのVimiumを使って解説していきます。

1-1. Vimiumでできること

以下のことをVimライクなキーバインドで操作できます。

- ページの上下スクロール
- 左/右隣のタブへ移動
- ページの戻る/進む
- ページ内リンク先移動
- ページ内キーワード検索

2. 本記事における問題点の共有

- 設定したVimiumのキーバインドが動かないことがあり、試行錯誤してややツラかった
- 一部検索バーのハック術と併用するとVimiumの威力が倍増したので、Vimiumのドキュメントで共有してほしかった

3. 環境/バージョン情報

  • ブラウザ
$ google-chrome --version
Google Chrome 87.0.4280.141
  • Vimium
- バージョン 1.66
- 更新 2020年3月2日
- サイズ 258KiB
- 言語 English

4. Vimiumのインストールと初期設定

  • Vimium - Chrome Web Store からVimiumをインストール
    • Add to ChromeAdd extension をクリック
    • Add to Chrome のボタンが Remove frome Chrome に変わっていればインストール完了

  • キーバインドの追加設定
    • ブラウザの右上の方にカーソルを移動させ、 Extension"︙"Option をクリック
    • 表示された設定画面の Custom key mappings に以下の設定をコピペして Save Changes をクリック
# Custom key mappingsの入力タブ
# Insert your preferred key mappings here.
map h goBack
map l goForward
map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab

5. Vimiumのキーバインドのオレオレ一覧

  • ページの上下スクロール
    • jは上
    • kは下
  • タブの移動
    • J(shift + j)は左
    • K(shift + k)は右
  • ページの戻る/進む
    • hは戻る
    • lは進む
  • リンククリック
    • iは現タブ上からリンク先のページへ移動
    • I(shift + i)は現タブの右側に新規タブを作り、そちらでリンク先のページへ移動
  • ページの最上部と最下部
    • ggは最上部
    • Gは最下部
  • ページ内検索は「/」

5-1. Vimiumのキーバインドじゃないけどおすすめ設定

Vimiumはカーソルが検索バーなどページ外にいってしまうとキーバインドが効かなくなってしまいます。そのような場合、「Esc」キーを押すか、検索バーに「javascript:」と入力すると、カーソルをページ内に戻すことが出来ます。検索バーにイチイチ「javascript:」なんて入力してられないので、ChromeのManage search engines(検索エンジンの設定画面でこのように設定しています。

  • カーソルをページ内に戻す
## Search engine(任意)
movePage

## Keyword(任意)
j

## URL with %s in place of query
javascript:

  • タイトルとURLをコピー
## Search engine(任意)
copyTitle

## Keyword(任意)
t

## URL with %s in place of query
javascript:prompt('Title%20+%20URL','['+document.title+']('+location.href+')')();

参考

P.S. Twitterもやってるのでフォローしていただけると泣いて喜びます:)

@gkzvoice

Discussion

ログインするとコメントできます