vimperatorの色設定(CSS指定)

vimperatorネタです。vimperatorってなによ?というお話は、先日書いた vimperatorが素敵! – Firefox Add-on にて・・・・。

で、その中で、vimperatorのCSS設定方法で、commandlieの色が変わらん!と嘆いていた。
そしたら、”通りすがり”さんがアドバイスしてくれたので、そのCSS設定メモ。
vimperator1.2preでの色設定です!

結論からいうと・・・下のように見事に色変更できた!

デフォルトの色

vimperator-color-normal

CSS適用後の色

vimperator-color-doya

vimperator CSS設定

CSSの設定を貼り付けておきます。CSSは、profiles配下のuserChrome.cssにて指定します。
H:\mydata\FireFox\Profiles\chrome\userChrome.css

/* bufferwindow style */
#liberator-container{
    color: blue !important; // 指定しないとbufferwindowでcolorが利かない
}
#liberator-bufferwindow, #liberator-completion, #liberator-previewwindow {
    color: blue !important;
    background-color: #eee !important;
}

/* commandline style */
#liberator-commandline{
    /*font-family:"Luxi Mono", monospace !important; // <-- フォントを指定するなら  */
    background-color: #222 !important;
    color: #fff !important;
    font-weight: normal !important;
    font-size: 10pt !important;
}

/* statusline style */
#liberator-statusline {
    /*font-family:"Luxi Mono", monospace !important; // <-- フォントを指定するなら  */
    font-weight: normal !important;
    font-size: 10pt !important;
    padding:3px 0 !important;
}

/* normal page statusline */
.hl-StatusLine {
     background-color: #000 !important;
     color: #B0FF00 !important;
}

/* secure(ssl) page statusline */
.hl-StatusLineSecure {
     background-color: #B0FF00 !important; /* light green */
     color: black !important;
}

#liberator-statuslineのfont-sizeを16px以上にする場合は、注意が必要のようです。
詳しくは→→“通りすがり”さんのコメント

[参考]ついでに・・・vimperator.cssを覗いてみる

そう、そもそもvimperator.jarの中身。vimperator.cssを覗いてみればよかったじゃないの。
ということで、そのデフォルトCSSも貼り付けておきます。これでIDとClassがわかりますね。

/***** BEGIN LICENSE BLOCK ***** {{{
Version: MPL 1.1/GPL 2.0/LGPL 2.1

The contents of this file are subject to the Mozilla Public License Version
1.1 (the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at

http://www.mozilla.org/MPL/

Software distributed under the License is distributed on an "AS IS" basis,
WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
for the specific language governing rights and limitations under the
License.

(c) 2006-2008: Martin Stubenschrott <stubenschrott@gmx.net>

Alternatively, the contents of this file may be used under the terms of
either the GNU General Public License Version 2 or later (the "GPL"), or
the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
in which case the provisions of the GPL or the LGPL are applicable instead
of those above. If you wish to allow use of your version of this file only
under the terms of either the GPL or the LGPL, and not to allow others to
use your version of this file under the terms of the MPL, indicate your
decision by deleting the provisions above and replace them with the notice
and other provisions required by the GPL or the LGPL. If you do not delete
the provisions above, a recipient may use your version of this file under
the terms of any one of the MPL, the GPL or the LGPL.
}}} ***** END LICENSE BLOCK *****/

#liberator-container  {
    font-family: monospace;
}

#liberator-bufferwindow, #liberator-completion, #liberator-previewwindow {
    -moz-user-focus: ignore;
    overflow: -moz-scrollbars-none !important; /* does not seem to work fully */
    border-width: 0px !important;
    -moz-appearance: none !important; /* prevent an ugly 3D border */
}

/* the selected item in listboxes is hardly readable without this */
#liberator-completion    > listitem[selected="true"] > listcell,
#liberator-bufferwindow  > listitem[selected="true"] > listcell,
#liberator-previewwindow > listitem[selected="true"] > listcell {
   background-color: Highlight !important;
   color: HighlightText !important;
}

/* fixes the min-height: 22px from firefox */
#status-bar, statusbarpanel {
    -moz-appearance: none !important;
	min-height: 18px !important;
    border: none !important;
    font-weight: bold;
    font-family: monospace;
}
#liberator-statusline {
    font-family: monospace;
    margin: 0px;
}
#liberator-statusline > label {
    padding: 0px 0px 0px 8px;
}
#liberator-statusline > label:first-child {
    padding: 0px;
}
#liberator-statusline-field-url {
    background-color: inherit;
    color: inherit;
}

/* no longer at the window's bottom right corner */
.statusbar-resizerpanel {
    display: none;
}
#statusbar-display, #statusbar-progresspanel {
    display: none;
}

#liberator-commandline {
    padding: 1px;
    /*
    background-color: white;
    color: black;
    */
}
#liberator-commandline-prompt, #liberator-commandline-command {
    background-color: inherit;
    color: inherit;
}

#liberator-visualbell {
    border: none;
    background-color: black;
}

#sidebar {
    max-width: 90% !important;
    min-width: 10% !important;
}

/* highlight groups */

.hl-Normal {
    background-color: white;
    color: black;
}
.hl-ErrorMsg {
    background-color: red;
    color: white;
    font-weight: bold;
}
.hl-ModeMsg {
    background-color: white;
    color: black;
}
.hl-MoreMsg {
    background-color: white;
    color: green;
}
.hl-Question {
    background-color: white;
    color: green;
}
.hl-Title {
    background-color: white;
    color: magenta;
    font-weight: bold;
}
.hl-Warning {
    background-color: white;
    color: red;
}
.hl-StatusLine {
    background: none !important;
    background-color: black !important;
    color: white !important;
}
.hl-StatusLineSecure {
    background: none !important;
    background-color: #B0FF00 !important; /* light green */
    color: black !important;
}
.hl-StatusLineBroken {
    background: none !important;
    background-color: #FF6060 !important; /* light red */
    color: black !important;
}
.hl-URL {
    background-color: white;
    color: green;
    text-decoration: none;
}
/* NOTE: .aClass:hover not supported in quirks mode: http://developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior */
a.hl-URL:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* MOW */

#liberator-multiline-output {
    overflow: hidden;
    background-color: white;
    color: black;
}

#liberator-multiline-output-content {
    white-space: pre; /* -moz-pre-wrap FIXME: Should lines wrap like Vim? */
    font-family: -moz-fixed;
    margin: 0px;
}

#liberator-multiline-output-content * {
    font: inherit;
}

#liberator-multiline-output-content table {
    white-space: inherit;
    border-spacing: 0px;
}

#liberator-multiline-output-content td,
#liberator-multiline-output-content th {
    padding: 0px 2px;
}

/* vim: set fdm=marker sw=4 ts=4 et: */


その他・・・

vimperator0.6系?は下記でもいけるのかもしれない

まとめ

特にまとめることはなし。次回こそ、”plugin導入”と”使い方”の記事を書くつもり。

vimperator設定

開発環境やら設定ファイルやらなんかの置き場

vimperator 1.2pre

firefoxアドオンのvimperator環境

plugins

autoIgnoreKey.js
char-hints-mod.js
copy.js
googlesuggest.js
hatenabookmark_show.js
ldrize_cooperation.js
lookupDictionary.js
twitter.js

.vimperatorrc

" vim: set ft=vimperator:

"+----------------------------------------------------------------------------------------+
" 基本設定
"+----------------------------------------------------------------------------------------+

" ブラウザタイトルの変更
" Firefox デフォルトは 「Mozilla - Firefox」、vimoperatorを入れると「vimoperator」
set titlestring=Firefox
"メニュー/ツール/リンクを表示
"set guioptions=bmT
"set guioptions=mT
"ページ全体で検索語を強調表示
set hlsearch
"ビープ音を鳴らさずビジュアルベルを使用
set visualbell
"ビジュアルベルを無効化
set visualbellstyle=display:none;
"ヒントのスタイルを指定
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;
"ヒント(フォーカス時)のスタイルを指定
"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=l
"set complete+=g

"migemo_hint.js・・・1.2pre動かない??
"set hintmatching=custom

"+----------------------------------------------------------------------------------------+
" キーマップ設定
"+----------------------------------------------------------------------------------------+

"ロケーションバーにフォーカス
map <C-l> <A-d>

"ソースの表示
map <C-u> <C-q><C-u><ESC>

"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 <A-Left>
map L <A-Right>
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>
"メニューバー,ロケーションバー(非)表示
map <A-Down> :set guioptions+=mT<CR>
map <A-Up> :set guioptions-=mT<CR>

"+----------------------------------------------------------------------------------------+
" プラグイン設定
"+----------------------------------------------------------------------------------------+
" ldrize_cooperation.js
" http://unsigned.g.hatena.ne.jp/Trapezoid/20080530/1212074680
let g:ldrc_captureMappings = "['j', 'k', 'p', 'o', '?']"
let g:ldrc_intelligence_bind = "true"
let g:ldrc_skip = "0.25"
" googlesuggest.js --- sでグーグル検索
map s :google<Space>
" hatenabookmark_show.js --- bではてブのコメントを表示
map b :hbinfo<CR>
" copy.js --- <C-S-c>でタイトルとURLをコピー
map <C-C> :copy titleAndURL<CR>
map c :copy<Space>
javascript <<EOM
liberator.globalVariables.copy_templates = [
 { label: 'titleAndURL',    value: '%TITLE%\n%URL%' },
 { label: 'title',          value: '%TITLE%', map: ',y' },
 { label: 'url',            value: '%URL%' },
 { label: 'anchor',         value: '<a href="%URL%">%TITLE%</a>' },
 { label: 'selanchor',      value: '<a href="%URL%" title="%TITLE%">%SEL%</a>' },
 { label: 'htmlblockquote', value: '<blockquote cite="%URL%" title="%TITLE%">%HTMLSEL%</blockquote>' },
 { label: 'ASIN',   value: 'copy ASIN code from Amazon', custom: function() content.document.getElementById('ASIN').value}
];
EOM

"+----------------------------------------------------------------------------------------+
" 独自設定
"+----------------------------------------------------------------------------------------+
" feedアイコン表示
"http://d.hatena.ne.jp/teramako/20071205/p1
javascript <<EOF
(function(){
var feedPanel = document.createElement('statusbarpanel');
var feedButton = document.getElementById('feed-button');
feedPanel.setAttribute('id','feed-panel-clone');
feedPanel.appendChild(feedButton.cloneNode(true));
feedButton.parentNode.removeChild(feedButton);
document.getElementById('status-bar').insertBefore(feedPanel,document.getElementById('security-button'));
})();
EOF

" disable accesskey
javascript <<EOM
liberator.options.setPref('ui.key.generalAccessKey', 0);
EOM

" 読み込んだ事を出力
echo ".vimperatorrc sourced"

userChrome.css 2008/06/25更新

/* bufferwindow style */
#liberator-container{
    color: blue !important; // 指定しないとbufferwindowでcolorが利かない
}
#liberator-bufferwindow, #liberator-completion, #liberator-previewwindow {
    color: blue !important;
    background-color: #eee !important;
}

/* commandline style */
#liberator-commandline{
    /*font-family:"Luxi Mono", monospace !important; // <-- フォントを指定するなら  */
    background-color: #222 !important;
    color: #fff !important;
    font-weight: normal !important;
    font-size: 10pt !important;
}
#liberator-toolbar {
    color: green !important;
}

#liberator-statusline {
    /*font-family:"Luxi Mono", monospace !important; // <-- フォントを指定するなら  */
    font-weight: normal !important;
    font-size: 10pt !important;
    padding:3px 0 !important;
}

/* normal page statusline */
.hl-StatusLine {
     background-color: #000 !important;
     color: #B0FF00 !important;
}

/* secure(ssl) page statusline */
.hl-StatusLineSecure {
     background-color: #B0FF00 !important; /* light green */
     color: black !important;
}

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設定なんかがあるので、注意したほうがいい。

Vimperatorのインストール

ここから本題。早速インストールから始める。
以下からvimperator_1.2pre_2008-06-21.xpi (6/22時点の最新版)をインストール
vimperator snapshot
そして再起動

Vimperatorの設定ファイル作成

おそらくFirefox再起動して衝撃が走ると思う・・・少なくとも僕はかなりの衝撃が走った。
ブラウザ上部のメニューバーが無い!ロケーションバーが無い!ブックマークツールバーが無い!
おいおい、何もできないじゃないか!って。
そう、このVimperator、デフォルトでは、バーを非表示する設定になってる。既に変態的ですね!
(たぶん、巷で変態的といってるのは、この部分を指してるわけじゃないので悪しからず)

これでは気持ち悪すぎるので、この辺の設定とかを変更するファイル.vimperatorrcを作成する。

設定方法は、以下を参考に…というかそのままコピペで。

  1. 環境変数(HOME)を作成

    MacOSXなら設定は不要。Windowsなら環境変数HOMEを作成して、FirefoxのProfilesディレクトリを指定する。

  2. FirefoxのProfilesフォルダを開いてその配下に、テキストファイル .vimperatorrcを作成する
  3. .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」の使い方が非常によくまとまっていて、ここを見れば間違いない!?

おしまい。