WebDesigner's Memorandumウェブデザイナーの備忘録

Chrome拡張機能のVimiumを使ってキーボードだけでブラウザを操作する

Chrome拡張機能のVimiumを使ってキーボードだけでブラウザを操作する

最近ちょっとしたブラウジングであれば、VimiumというChrome拡張機能を使ってキーボードだけで操作するようにしています。

Vimiumのインストール

Vimium

VimiumのインストールはChromeウェブストアからインストールできます。

ちなみにFirefoxの場合はVimium-FFというアドオンがあります。

基本的な操作

Vimiumの基本的な操作は下記の通りです(Vimiumは大文字小文字の区別をします)。

ショートカットキー実行内容備考
j or control + e下へスクロール 
k or control + y上へスクロール 
h左へスクロール 
l右へスクロール 
gg(連続押し)ページの一番上までスクロール 
Gページの一番下までスクロール 
d半ページ分下へスクロールdownの略
u半ページ分上へスクロールupの略
rページの再読込reloadの略
yy表示中のページのURLをコピー 
pクリップボード内のURLを現在のタブで開くpasteの略(?)
Pクリップボード内のURLを新しいタブで開く 
iインサートモードへ切り替え 
vビジュアルモードへ切り替え 
giページ内の最初の入力欄にフォーカスiを先に押してしまうと、
インサートモードになるので注意
f リンクを選択して現在のタブで開く 
F リンクを選択して新しいタブで開く 
gfページ内の次のフレームを選択する 
gFページ内のメイン/トップフレームを選択する 
oブックマークか履歴からURLを現在のタブで開く 
Oブックマークか履歴からURLを新しいタブで開く 
bブックマークを現在のタブで開く 
Bブックマークを新しいタブで開く 
T現在開いているタブを検索する 
/検索モードへ切り替え 
n次の検索一致に進む検索モード時のみ
N前の検索一致に戻る検索モード時のみ
H前のページへ戻る(ブラウザバック) 
L次のページへ進む 
t新しいタブを開く 
J or gT左のタブへ移動する 
L or gt右のタブへ移動する 
^直前のタブへ戻る 
g0最初のタブへ移動する 
g$最後のタブへ移動する 
yt現在のタブを複製する 
option + p現在のタブをピンする 
option + m現在のタブをミュートにする 
x現在のタブを閉じる 
X閉じたタブを復元する 
?ヘルプを表示 

「i」でリンクをクリックできるようにする

Vimiumのアイコンを右クリックして[オプション]をクリックしてオプション画面を開きます。

あとは「Custom key mappings」の部分に下記の設定を追加し、「Save Changes」をクリックします。

map i LinkHints.activateMode
map I LinkHints.activateModeToOpenInNewTab

キーの設定

これで、ページでiを押すとページ内のリンクがハイライトされ、アルファベットが表示されます。

リンクのハイライト

あとはアルファベットを入力するとそのリンクが開かれますし、大文字で入力すれば新規タブで開きます。

デフォルトで設定されているショートカットキーの使用方法

Vimiumをインストールすると、サイト内で設定されている元々のショートカットキーが使用できなくなってしまいます。

例としては下記のサイトです。

  • Backlogで/を押すと検索ボックスにフォーカス
  • Gyazoでcommand + option + Cを押すとMarkdownをコピー

このような元々のショートカットキーを使用したい場合は、fnキーを同時に押すと発火してくれます。

つまり先程の例だと、下記のようにします。

  • Backlogでfn + /を押すと検索ボックスにフォーカス
  • Gyazoでfn + command + option + Cを押すとMarkdownをコピー

元々のショートカットキーが発火しないと混乱してしまいますが、とりあえずfnを押せばいいとだけ覚えておきましょう。

まとめ

ページ内のスクロールとリンクの開き方さえ覚えておけば、マウスを使わずにブラウザの操作ができるようになります。

コードを書いている最中のちょっとした、検索が非常にラクになります。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね