はじめに
動機
ブラウザをマウスで操作するのが面倒くさい。
特にブラウザと日夜格闘しているWeb開発者は、コードをキーボードで書いて、動作テストをキーボードとマウスの両方でして、の繰り返しというのはマウスを使用する手の移動量が多くなり疲れるのだ。別にマウスでの操作が悪いわけではないが、ただただ面倒なのだ。
ThinkPadの赤いアレなどはまあまあよい解決策なのだが、代わりにキーボードが決まってしまってよろしくない。
最近はマウスの方が操作早くね？ とかいう記事もあった(実際、人によっては事実である)が、キーボードの最大の利点はあまり視覚に頼らずに入力を行えるということである。
ということでできるだけキーボードでブラウザの操作を行えるようにしたくなったところ、Vimperatorの存在を聞いて今に至るというわけだ。
以前から利用はしていたのだが、やっとそれなりに知見も得られ、まとまったため公表しようと思う。
目的
ブラウザで使う主な操作をキーボードでも「できるだけ腕を多く動かさず簡単に」行えるようにする。
ただし100％キーボードでの操作までは求めず、楽さと速さのバランスを重視するものとする。(flashなどで一部キーボードでの操作が困難なものがある)
アドオンについてはよく使う一部のアドオンのみ、コマンドを追加する。
動作環境
Windows7/8.1(Macは一部ショトカが違うが、それ以外はそのまま使えるかと思う)
Firefox 37.0.1
Vimperator 3.9
Vimperatorを使ってみよう
Vimperatorとは？
Vimperatorとは何かというと、FirefoxのアドオンでキーバインドをVimライクにしたりコマンドが入力できるようにしたりその他諸々の機能を実装しているものである。
Vimと聞くと、「え、あの__崇高すぎてよくわからない__エディタ？」と身構える人もいるかもしれないが、あくまで「ライク」であるし、操作はいかようにもカスタマイズできるので心配は無用だ。まずはVimperatorをインストールしよう。
といっても、インストール方法は通常のアドオンと変わらないので省略する。ぐぐれ。
インストールして何が変わったか？
さっそくFirefoxを再起動すると、一番下に見慣れないバーが追加されていると思う。
これはコンソールのようなもので、入力中のコマンドやその応答、サジェストなどが表示される。
また、実は既にVimっぽい操作が可能となっていて、テキストフィールドなどにフォーカスがない状態でなら、たとえばjやkを押し続けることでスクロールができるはずだ。
余談になるが、その昔はこのアドオンを導入しただけでバーやらタブやらが全部非表示になったり、コピーやペーストのOSのキーバインドが全て無効になったりという崇高すぎる状況だったらしい。平和になったものである。
モードとは？
さて、先ほどjやkでスクロールができるなどと書いたが、「じゃあ入力したいときはどうするの」という話になるわけである。
そこでモードの出番である。テキストフィールドなどにフォーカスを合わせると、下に追加されたバーの左に緑色のバックで「INSERT」という文字が出てくる。これがINSERTモードで、このモードになっている間は、先ほどのスクロール操作などは無効化され、代わりに通常の文字列入力が可能になるというわけだ。
このモードから抜け出すときはEscキーを押そう。そうすると「INSERT」の文字が消え、通常モードに戻る。
INSERTモードと同じように、Vimperatorには他にもいくつかのモードが存在する。詳しくは後述するが、基本的にはいずれもEscキーでそのモードを抜け出すことが可能だ。
基本的な操作方法の一部(デフォルト)
←↓↑→：hjkl
タブを開く：oもしくはt(関連キーワード入力で絞り込み可能。Tabで候補を選択してEnterで確定)
タブを閉じる：d
直前に閉じたタブを開く：u
前のタブ：gT(2gT、3gTなどで複数移動可能)
次のタブ：gt(同上)
ヒントモード(リンクを開く)：f(その後表示された数字を押す)
拡張ヒントモード：;(その後モードを選択する。モード選択によりファイルに保存やURLのコピーなどが可能。その後はfと同じように数字を押す)
CARETモード：c(F7を押したときのような挙動になる)
IGNOREモード：i(直後の入力1回は、Vimperatorの操作を無効化する)
コマンドモード：:(その後様々なコマンドを入力できる。コマンド入力途中で候補が上方に表示されるが、候補から選ぶ場合はTabで選択してEnterで確定する)
Vimperatorのカスタマイズ
Vimperatorはカスタムしてなんぼ
さて、ここまでで基本的な操作をざっと記載したが、はっきり言って__そのままでは非常に使いにくい。__
- 左右スクロールなんて全然使わない。タブ移動の方がしょっちゅうつかうけど操作面倒ぃ
- キャレットが迷子です……
- ヒントモードの数字入力はさっと打ちにくい。入力しやすい他の文字にならないのか？
など、不満を挙げればきりがない。
だが、Vimperatorの真価はこういった__不満をカスタマイズによりほぼ解決できてしまう__ところにあるのだ。
コマンドを叩けばそういったカスタマイズを行えるのだが、毎回設定のためにコマンドを叩くのは面倒にもほどがあり本末転倒である。
そこで登場するのがvimperatorrcである。
vimperatorrcとは？
vimperatorrcとは要はVimperatorの設定ファイルである。
Firefoxの起動時などに、このファイルに書いた内容が読み込まれ、カスタマイズが行われるという感じである。
設置場所は環境によって異なる。環境変数によって変更が可能(詳細は調べてほしい)だが、特にこだわりがない人は、Vimperatorインストール後に「:cd ~」と打ち込みEnterを押して、下のバーに表示されたパスに置けばよい。
ファイル名はUNIX系の場合「.vimperatorrc」だが、Windowsでは「_vimperatorrc」となる点に注意したい。
プラグインで機能追加も
また、こういった設定をプラグインとしてロードすることも可能である。
便利になる設定を全部1から書くというのはかなり手間がかかるため、是非利用させていただこう。
現在利用可能なプラグインの多くが、vimpr/vimperator-plugins · GitHubに公開されている。普通に検索すると意外とここ以外では旧バージョンの情報ばかりしか出ないこともあるので注意だ。
vimperatorrcのあるフォルダ以下にpluginというフォルダを作り、これらのプラグインを設置して、ブラウザ再起動もしくは :loadplugins でプラグインが有効化される。
個人的におすすめしたいプラグイン
・caret-hint.js
拡張ヒントモードに「キャレットを指定位置に移動」が追加される。キーボードでのテキスト選択はこれなしにはままならないレベルで必須。
・copy.js
ページのタイトルやURLをコマンド一発でコピーする。あらかじめフォーマットを登録できる。記事を書くのに便利。
・fms_switcher.js
これは完全にWeb開発者向けだが、FireMobileSimuratorの端末切り替え～リロードをコマンド1つで行える。
なお、プラグインはfms_switcher.jsだが、最新のvimpだと、PLUGIN_INFO の所でエラーが出るので修正されたものがあるのでこちらを使うとよい。
・multi_requester.js
バッファ出力(下の部分)にリクエストを出力する。URLやどの部分を表示するかが指定でき、いくつかデフォルトで登録されている。
選択部分を指定したサイトで検索してその結果を表示するなど、特に調べながら読む必要がある記事を読むときに便利。
アドオンの機能もVimperatorから呼び出す
Firefoxのアドオンはxpiという形式で配布されている。
実のところこいつはzipで圧縮されていて、ソースコードはjavascriptで書かれている。
そしてvimperatorにはjavascriptもコマンドに追加が可能である。
つまりアドオンの機能もVimperatorから呼び出せるのだ。(一部難しいものもあるようだが)
アドオンの拡張子をzipに変更して展開し、clickなどのイベントにバインドされている関数を見つければ、あとはそいつを実行するコマンドを登録してmapで割り当てて、ホットキーの完成である。
vimperatorrc晒し
パクった参考にしたところは主に以下になる。
vimperatorの、えっていう
突然だけどVimperatorrcを晒してみる - そのねこが学ぶとき
Vimperator 経由で evernote のクリップをする | 心想事成
Vimperator で Evernote Clearly... | BLOG.QuelLENcode
なお、私はVimを使い慣れているわけではないので、かなり独自の設定となっているが、その点はどうかご容赦いただきたい。
むしろこのrcを元に、更に自分の手になじむようにカスタマイズしていただきたい。
" タイトル文字列
set titlestring=Firefox
" スクロールの端などの際に出るbeepをoff
beep off
" エラー時にベルを鳴らさない
set noerrorbells
" アドオンインストール時の待ち時間カット
set! security.dialog_enable_delay=0
" プライベートブラウジング
noremap <C-p> :winopen -private<CR>
" Ctrl+r で再起動
map <C-r> :restart<CR>
" R で.vimperatorrcを再読込み
map R :source ~/_vimperatorrc<CR>
"=======================================================
" h,lに前のタブ,次のタブを割り当てる
map h <C-PageUp>
map l <C-PageDown>
" H/Lに左右を割り当てる
map H <Left>
map L <Right>
" Ctrl+h/Ctrl+lに戻る/進むを割り当てる
map <C-h> <A-Left>
map <C-l> <A-Right>
" j,kによる上下スクロールの移動量を5倍に設定
noremap j 5<C-e>
noremap k 5<C-y>
" Ctrl+aで全選択になるようにする
noremap <C-a> i<C-a>
inoremap <C-a> <insert><C-a><insert>
" Uで最近閉じたタブを表示する
map U :u<Space>
" 検索時、大文字が含まれている場合にのみ case sensitiveにする
set ignorecase
set smartcase
" デフォルトの検索エンジン
set defsearch=google
" sでぐぐる
nnoremap s :tabopen<Space>google<Space>
" 選択文字列でぐぐる(マウスとVISUALモードの選択時に対応)
nmap S <C-c>:tabopen<Space>google<Space><C-v><CR>
vmap S <C-c><Esc><Esc>:tabopen<Space>google<Space><C-v><CR>
" pは文字列によってURLと判断されて誤爆するので明示的にGoogle検索を指定する
nnoremap p :tabopen<Space>google<Space><C-v><CR>
" 自動補完の候補
set complete=sl
" コマンドモードではIMEをOFFに
style! -name=commandline-ime chrome://* #liberator-commandline-command input {ime-mode: inactive;}
" 入力欄に自動フォーカスしない
set focuscontent
" ヒントに使用する文字。ここの設定は0からスタートだが表示は1から
set hintchars=;asdfghjkl
" ヒント表示色
highlight Hint font-family: Arial; font-size: 16px; font-weight: bold; text-shadow: -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px black, 1px 1px 2px black; color: #33cccc;
highlight HintElem color: gray; background-color: #a1e4e6;
highlight HintActive color: black; background-color: #ff8700;
" エラー色
hi ErrorMsg color:white; background-color: #ec6aa1;
" キャレット幅を変更
set! ui.caretWidth=2
"=======================================================
" qmarks
:qmark d https://www.dropbox.com/home
:qmark e https://www.evernote.com/Home.action
:qmark f http://feedly.com/i/latest
:qmark h http://b.hatena.ne.jp/
:qmark m https://mail.google.com/mail/u/0/#inbox
:qmark p http://getpocket.com/a/queue
"=======================================================
" Evernote Clearly(アドオン前提。動作確認：10.2.1.7)
command clearly javascript __readable_by_evernote.context_menu__call()
noremap <C-q> :clearly<CR>
" Evernote Web Clipper(アドオン前提。動作確認：5.9.1。Ver6.0はキーボード操作との相性が悪い)
" 既にアップデートしている場合はアドオンのバージョン履歴からインストールし直すことができる
command clip javascript evernote_doAction()
noremap <C-e> :clip<CR>
" DNS Flusher(アドオン前提。動作確認：3.1.1)
command flush javascript dnsFlusher.refreshdns()
noremap <C-d> :flush<CR>
" Google Transrator(アドオン前提。動作確認：2.1.0.3m)
command transrate javascript zol_bod_google_translator.ToolBarTranslatorClick()
noremap <C-y> :transrate<CR>
"=======================================================
" copy.js
javascript <<EOM
liberator.globalVariables.copy_templates = [
{ label: 'title', value: '%TITLE%' },
{ label: 'url', value: '%URL%' },
{ label: 'anchor', value: '<a href="%URL%">%TITLE%</a>' },
{ label: 'markdown', value: '[%TITLE%](%URL%)' },
];
EOM
map CT :copy title<CR>
map CU :copy url<CR>
map CA :copy anchor<CR>
map CM :copy markdown<CR>
"=======================================================
" feedSomeKeys_3.js
"Gmail
lazy fmaps -urls='mail\.google\.com/mail' c / j k n p o u e x s r a # [ ] z ? gi gs gt gd ga gb gc gl b <S-i> <C-h> <C-Enter>
"Google Calendar
lazy fmaps -urls='www\.google\.com/calendar' -events=vkeydown k j r t d w m c <Del> / + q s ?
"Google Docs
lazy fmaps -urls='docs\.google\.com/' <Del> <C-x> <C-d> <C-v> <C-c> <C-y> <C-z> <C-a>
"Feedly
lazy fmaps -urls='feedly\.com/' gm ga gg r j k n p o v m x s e t ? <S-m>
"=======================================================
" fms_switcher.js
" 事前に対象端末を追加しておく必要あり
map MI :fms apple\ iPhone\ 6\ iOS8<CR>
map MA :fms Xperia\ Z3\ SOL26<CR>
map MN :fms off<CR>
"=======================================================
" multi_requester.js
nmap K <C-c>:mr<Space>wikipedia-ja<Space><C-v><CR>
vmap K <C-c><Esc><Esc>:mr<Space>wikipedia-ja<Space><C-v><CR>
nmap A <C-c>:mr<Space>alc<Space><C-v><CR>
vmap A <C-c><Esc><Esc>:mr<Space>alc<Space><C-v><CR>
nmap T <C-c>:mr<Space>googletrans-ja<Space><C-v><CR>
vmap T <C-c><Esc><Esc>:mr<Space>googletrans-ja<Space><C-v><CR>
"=======================================================
" 読み込み完了メッセージ
echo "Loaded from vimperatorrc."
上記rcを入れたときの主な操作(デフォルトのままのものもあり)
全般、タブ
新しいタブを開く：t
新しいタブでURL、ブックマークを開く：t[関連キーワード]
タブを閉じる：d
直前に閉じたタブを開く：u
前のタブ：h
次のタブ：l
戻る：Ctrl-h
進む：Ctrl-l
更新：r
Google検索：s[キーワード]
クリップボードからGoogle検索：p
スクロール
←↓↑→：HjkL
先頭へ：gg
末尾へ：G
テキスト
検索：/[検索語]
次候補へ：n 前候補へ：N
(テキスト選択後)google検索：S
(テキスト選択後)google翻訳：T
(テキスト選択後)alc：A
(テキスト選択後)wikipedia(jp)：K
ページタイトルをコピー：CT
ページURLをコピー：CU
ページタイトルとURLをmarkdown形式でコピー：CM
ヒントモード
リンクを開く：f
リンクをバックグラウンドのタブで開く：F
拡張ヒントを開く：;[モード]
モード選択
- 新しいタブで開く：t
- ファイルを保存：aもしくはs(sはダイアログなしで保存)
- ソースを表示：v
- キャレットを移動してキャレットモードに移行：c
- URLをコピー：y
qmark
見ているページをマークする：:qmark [短縮コード]
マークしたページに移動する：:gn[短縮コード]
マーク一覧：:qmarks
マークを削除する：:delqmarks
その他
デフォルトの操作ヘルプを見る：:h index
ソースを見るトグル：gf
vimperatorrcのリロード：R
Clearyトグル：Ctrl-q
Evernote Web Clipperで保存：Ctrl-e
プライベートブラウジングウィンドウを開く：Ctrl-p
再起動：Ctrl-r
DNS Flusher：Ctrl-d
FireMobileSimulatorをiPhone6に切り替え：MI
FireMobileSimulatorをXPERIA Z3に切り替え：MA
FireMobileSimulatorをリセット：MN
まとめ
これでブラウザ上で行う操作のほとんどをキーボードで行うことが可能になるはずだ。
だがキーボード操作に固執するのもそれはそれで効率が悪いものだ。その場その場で適度に使い分けるのがよい判断だろう。
この記事が、皆様の快適なブラウジングライフの一助となれば幸いである。