vimperatorが素敵! – Firefox Add-on -
Firefox3になったことだし、以前からちょこちょこ触ってきたFirefox Addon “Vimperator” を入れ直してみた。そのインストールと設定まとめメモ。
※ 06/25 CSSの記述を追記&vimperatorの色設定(CSS指定)記事書きました。
Vimperatorとはなんぞや?
Firefoxでvimのキーバインドを使えるようにするアドオン・・・何を言ってるんだ?
と思った人は、結構使うのは厳しいのかもしれないが、TRYしてみる価値はあり。
viとは、Emacsと共にUNIX環境で人気があるテキストエディタなわけなんだが、vimは、更にこのvi から派生したOSSなテキストエディタ。マウスを使わずキーボードのみで操作可能なエディタなので、慣れれば最高に便利。SSHなんかでサーバを操作したことあるなら間違いなく触ったことがあると思う。
話を戻すと、Vimperatorは、Firefoxをキーボードだけで(も)操作できるようにするアドオン。
変態的なAddonと巷では言われているらしい。・・・確かに変態的だと思う。
Vimperatorについて参考にしたサイト
以下の先人達のサイトを参考にインストール&設定した。ただ、バージョンで結構仕様が変わっているので、そのままでは使えないOption設定なんかがあるので、注意したほうがいい。
- Firefox拡張:FirefoxをVim風のキーバインドで操作するVimperator
- FirefoxのVimperatorがすごく便利
- Vimperator凄い!Firefoxがvimキーバインドで操作できるよ
- Firefoxをキーボード操作できるプラグイン「Vimperator」の使い方
- Firefox 3 Beta + Vimperator で最速ブラウジング windows 導入プロセス備忘録
Vimperatorのインストール
ここから本題。早速インストールから始める。
以下からvimperator_1.2pre_2008-06-21.xpi (6/22時点の最新版)をインストール
vimperator snapshot
そして再起動
Vimperatorの設定ファイル作成
おそらくFirefox再起動して衝撃が走ると思う・・・少なくとも僕はかなりの衝撃が走った。
ブラウザ上部のメニューバーが無い!ロケーションバーが無い!ブックマークツールバーが無い!
おいおい、何もできないじゃないか!って。
そう、このVimperator、デフォルトでは、バーを非表示する設定になってる。既に変態的ですね!
(たぶん、巷で変態的といってるのは、この部分を指してるわけじゃないので悪しからず)
これでは気持ち悪すぎるので、この辺の設定とかを変更するファイル.vimperatorrcを作成する。
設定方法は、以下を参考に…というかそのままコピペで。
- 環境変数(HOME)を作成
MacOSXなら設定は不要。Windowsなら環境変数HOMEを作成して、FirefoxのProfilesディレクトリを指定する。

- FirefoxのProfilesフォルダを開いてその配下に、テキストファイル .vimperatorrcを作成する
- .vimperatorrcに設定を書く。内容は下記
.vimperatorrcの記述
" vim: set ft=vimperator: " 基本設定 "+----------------------------------------------------------------------------------------+ " ブラウザのタイトル set titlestring=Firefox " メニューバーとツールバーを表示 set guioptions=mT " 検索語のハイライト set hlsearch " ビープを鳴らさない set visualbell "ビジュアルレベルを無効化 set visualbellstyle=display:none; "HintのStyle set hintstyle=z-index:5000; font-family:monospace; font-size:12px; color:white; background-color:blue; border-color:ButtonShadow; border-width:0px; border-style:solid; padding:0px 1px 0px 1px; position:absolute; "HintのStyle(focus時) "set focusedhintstyle=z-index:5000; font-family:monospace; font-size:12px; color:ButtonText; background-color:ButtonShadow; border-color:ButtonShadow; border-width:1px; border-style:solid; padding:0px 1px 0px 1px; position:absolute; "補完設定 set wildoptions=auto set complete=sl " キーマップ設定 "+----------------------------------------------------------------------------------------+ "yで選択範囲をコピー map y :echo 'Yank!'<CR>Y "j/kの移動量を5倍に map j 5<C-e> map k 5<C-y> " 選択文字列のコピーを <C-c> に割り当て map <C-c> Y " 選択文字列のgoogle検索を <C-g> に割り当て map <C-g> YP " H/L や ← → でタブ移動 map H gT map L gt map <Left> gT map <Right> gt map h <C-p> map l <C-n> " Shift + ← → で現在のタブの位置変更 map <S-Right> :tabmove! +1<CR> map <S-Left> :tabmove! -1<CR> "<A-r>でFirefoxを再起動 map <A-r> :restart<CR> "<A-h>でヘルプを表示 map <A-h> :help<CR> echo ".vimperatorrc sourced"
※ ” というのは、コメント行
VimperatorのCSS設定
デフォルトのままだと、ステータスラインの文字が小さい&白背景に黒文字でちょっと見にくいので、CSSで指定する。
H:\mydata\FireFox\Profiles\chrome\userChrome.css に下記を記述
(userChrome.cssがなければ新規に作成する)
※ 6/25追記:こちらに書き直しました.vimperatorの色設定(CSS指定)0.6系は下記でもいけそうなので残しておきます。
#vimperator-statusline {
font-family: "Luxi Mono", serif !important;
font-size: 15px !important;
font-weight: normal !important;
background-color: #000 !important;
}
.hl-StatusLine {
background-color: #000 !important;
color: #B0FF00 !important;
font-weight: normal !important;
font-size: 10pt !important;
}
.hl-StatusLineSecure {
background-color: #B0FF00 !important; /* light green */
color: black !important;
}
.hl-StatusLineBroken {
background-color: #FF6060 !important; /* light red */
color: black !important;
}
これでステータスラインが黒字に黄色と見易くなる。
ただ、コマンド入力する場所まで色が変わってくれない。色々調べたけどわからなかった・・・また追々調べる。
まとめ
これにて、Vimperatorのインストールと設定はOK。で、使い方は?というのは、また追々の記事で書くことにするが、とりあえずは、:helpか、simplicityroad: Vimperator Keyboard Shortcuts Visual Sheにて大体の操作方法はわかる。
というか、ナレッジエースさんのFirefoxをキーボード操作できるプラグイン「Vimperator」の使い方が非常によくまとまっていて、ここを見れば間違いない!?
おしまい。



7 Comments
こんにちは。トラックバックありがとうございました!
私も早くFirefox3に移行したいと思っているのですが、なかなか時間がとれず、いまだに2のままです(^^;
userChrome.cssでの見栄えの変更は思いつかなかったので、3に移行するとき参考にさせてもらおうと思います。
こちらこそ、非常に参考になりました!ありがとうございます。
Vimperator 1.2preだとTABの自動補完ができるようになってます。
set wildoptions=auto
set complete=sl
これからもよろしくです!
[...] original article [...]
/* Vimperator */
#liberator-commandline,
#liberator-toolbar,
#liberator-statusline {
font-size: 16px !important;
font-weight: bolder !important;
}
.statusbarpanel-text {
font-size: 14px !important;
font-weight: bolder !important;
}
> ただ、コマンド入力する場所まで色が変わってくれない。
自分はこんな風にして、フォントサイズ周りだけにとどめていますが、
要素を追加すれば、色の変更も出来ると思います。
なお、.statusbarpanel-text のみ別項にしてサイズダウンしてるのは、
Fx でダウンロードしたときに16pxだとバーが少し動くための対策です。
追伸
自動補完の話題にも触れているので、こちらも一応書いておきますね。
#liberator-container
がコマンドの補完候補の部分です。要素は適当にどうぞ。
おお!色の指定ができました!DankeDankeです!
ただ、bufferwindowの部分は、
#liberator-container{
color: blue !important; // 指定しないとbufferwindowでcolorが利かない
}
#liberator-bufferwindow, #liberator-completion, #liberator-previewwindow {
color: blue !important;
background-color: #eee !important;
}
のようにしないと色が変わってくれなかったです。
あとで記事に追記or新記事にします。ありがとうございました~
これからも通りすがってってくださいね。
[...] Older [...]