今回は普段使っているブラウザであるfirefoxのアドオンや,その一つであるVimperatorに関してまとめてみます。

まず,なぜfirefoxか

Linuxで使用できるブラウザでシェアの高いものと言えば

Firefox, Google Chrome, Chromium, Operaなどだと思いますが,僕がなぜFirefoxを使っているかというと,

プラグインの数が(比較的)多い
- カスタマイズできる範囲も広い
- Vimっぽくキーボードで操作できるようになるVimperatorがある
  - Google Chrome にもVichrome なるものがあるが,カスタマイズ性や使い勝手に微妙に難ありな印象
Google Chromeに比べると軽い(CPU使用率,メモリ使用率)

他にもVimperatorと同じような機能を元々備えているブラウザに, luakitやjumanjiというものがあります。

luakitはかなり気に入ってしばらく使っていたのですが,開いた瞬間落ちるページ(たとえばQiitaのプロフィールページ等)があるときから増えてきて,また表示が崩れることもちょいちょいありまして,結局使うのをやめてしまいました。

(開発が停滞気味というのもある) and (commitするだけの知識が今のところない)

しかし,vimperator的なキーバインドで使える軽量ブラウザとしては申し分ないので,Firefoxと併用しながら使っている感じです。

アドオンの紹介

以下に使っているアドオンの一覧を載せます。

便利そうだと思って入れたり,要らなくなって消したり,というのを繰り返した結果,これくらいの量になりました。

Adblock Plus
- まぁ定番ですね。しかし広告ビジネス的には困った存在であることは間違いなく,ホワイトリストに入れるよう要求してくるサイトが今後増えてくるだろうと思います。
Auto Reload
- 指定したURLが開かれたタブを自動で再読み込みするアドオン
- ローカルファイルが更新されたタイミングで再読み込みするようにして,markdownをHTMLに変換したものをみるのに使っています。
customize_titlebar_v2
- タイトルバーの文字列のフォーマットを指定できます。
- "Vimperatpr - hogehoge"と表示されるのが嫌というのと,"Firefox - hogehoge"となってくれるとウィンドウ名で検索してフォーカスするのが楽になるだろうというので,Custom FormatのFirefox - {pageTitle}としています。
filebrowser-enhanced
- ローカルファイルを扱う機能を強化します
- 実はあまり出番がないアドオン
Google Scholar Button
- 学術論文を検索するのに超便利。
QR Code Image Generator
- 今開いているサイトのURLからQRコードを生成するアドオン
- ほとんど使っていないがなぜか入れっぱなしになっている
Stylish
- 特定のドメインのサイトに対して自分で指定したCSSを適用して表示させることができる
- ただし自分で書く必要はなくて,開いているサイトのスタイルを見たければ,アドオンのボタンを押すことで検索できる
- 見た目をがらっと変えられるので,好きな人はいくらでも触っていられそう
Tile Tabs
- ブラウザの中で複数のタブをタイル型に並べて表示できるアドオン
- キーボードショートカットを使うよりはマウスの右クリックでさっとタイル化出来るところが魅力
- 新しくウィンドウを生成するコストなく,複数サイトをブラウジング
Vimperator
- Vimっぽい操作性を与えるアドオン
- カスタマイズ性も同時に与える
- ~/.vimperatorrcというテキストファイルに設定を書くので,使い回しも簡単

Vimperatorの設定

Vimperatorを使用すると,Vimっぽいキーバインドでブラウザの操作ができるようになるほか,これらの設定を自分でカスタマイズすることができるようになります。

liberator://help/all

その設定は~/.vimperatorrcに書くことで起動時に読み込まれます。

以下に自分の設定ファイルがあるので,参考にしてみてください。

dotfiles/vimperatorrc at master · ssh0/dotfiles

vimppm によるvimperatorプラグイン管理

vimperator内でもさらにJavaScriptを読み込むことで機能を拡張できます。

liberator://help/all#using-plugins

これを自分で管理してもいいのですが,それはめんどくさいと思うので,vimppmというプラグインマネージャを使って管理しています。

See documentation at https://github.com/cd01/vimppm

インストール:

mkdir -p ~/.vimperator/vimppm; cd ~/.vimperator/vimppm
git clone https://github.com/cd01/vimppm.git

source ~/.vimperator/vimppm/vimppm/plugin/vimppm.js

vimppm "appendAnchor.js"
vimppm "copy.js"
vimppm "PDF.js.js"
vimppm "nicontroller.js"

let g:auto_append_anchor = "true"

オプション設定

コメントでオプション内容を説明しています。

" 補完時に履歴のみを参照する
set complete=l

" タイトル文字列の設定
set titlestring=

" 入力領域にフォーカスしない
set focuscontent

" 外部エディタの設定
set editor='urxvt -g 90x15 -title "urxvt_float" -name "urxvt_float" -e nvim'

" activate
set activate=addons,downloads,extoptions,help,homepage,quickmark,paste

" No GUI
set gui=nonavigation

" no scrollbar
set noscrollbars

" `f`キーを押した時の文字列を変更(1文字目(`i`)は無視される)
set hintchars=ifjkasdhguonmerwc

" 最後のタブを削除しようとするときにウィンドウを削除しないようにする
set! browser.tabs.closeWindowWithLastTab=false

" 新しいタブは毎回最後尾に追加する
set! browser.tabs.insertRelatedAfterCurrent=false

見た目の設定

"------------------------------------------------------------------------------
" Appearance
"------------------------------------------------------------------------------

" set colorscheme
" [vimpr/vimperator-colors](https://github.com/vimpr/vimperator-colors)
"     git clone https://github.com/vimpr/vimperator-colors.git ~/.vimperator/colors
colorscheme darkness

" Hint font, font-size, and colors
hi Hint font-family: "Droid Sans Mono"; font-size: 12px; font-weight: bold; background-color: #1c1c1c; color: #fefefe; padding: 2px 2px;
hi HintElem background-color:#e4efff; color:;
hi HintActive background-color:#cedef8; color:;

キーバインドの設定

" `v`: キーでタブバーを表示
noremap v :set<Space>gui=tabs<CR>
" `V`: ナビゲーションバーを表示
noremap V :set<space>gui=navigation<CR>
" `<F11>`: タブバーとナビゲーションバーを非表示に
noremap <F11> :set<Space>gui=nonavigation,notabs<CR>

" `Y`: 現在のサイトのタイトルをコピー
nnoremap Y :js util.copyToClipboard(buffer.title, true)<CR>

" Alt + h(Left)/l(Right) でタブ間移動
noremap <A-h> <C-p>
noremap <A-l> <C-n>
noremap <A-Left> <C-p>
noremap <A-Right> <C-n>
" Alt + Shift + h(Left)/l(Right) でタブを移動
noremap <A-S-h> :tabmove! -1<CR>
noremap <A-S-l> :tabmove! +1<CR>
noremap <A-S-Left> :tabmove! -1<CR>
noremap <A-S-Right> :tabmove! +1<CR>

" `U`: 削除したタブを一覧表示
nnoremap U :undo<Space>

" コマンドラインでVimライクに補完
cnoremap <C-n> <Tab>
cnoremap <C-p> <S-Tab>
" コマンドラインでのカーソル移動
cnoremap <C-h> <Left>
cnoremap <C-l> <Right>

" 入力モードでのカーソル移動
inoremap <C-h> <Left>
inoremap <C-l> <Right>

" `<ESC>`: 検索ハイライトを削除
nnoremap <ESC> :nohlsearch<CR><ESC>

" `Ctrl + r`: 設定ファイルを再読み込み
nnoremap <C-r> :source<Space>~/.vimperatorrc<CR>

" ステータスバーを非表示にする
" >* [firefox - Hide status line / bottom bar in vimperator? - Super User](http://superuser.com/questions/704015/hide-status-line-bottom-bar-in-vimperator)

noremap <silent> <F8> :js toggle_bottombar()<CR>
noremap : :js toggle_bottombar('on')<CR>:
noremap o :js toggle_bottombar('on')<CR>o
noremap O :js toggle_bottombar('on')<CR>O
noremap t :js toggle_bottombar('on')<CR>t
noremap T :js toggle_bottombar('on')<CR>T
noremap / :js toggle_bottombar('on')<CR>/
cnoremap <CR> <CR>:js toggle_bottombar('off')<CR>
cnoremap <C-c> <C-c>:js toggle_bottombar('off')<CR>
cnoremap <Esc> <Esc>:js toggle_bottombar('off')<CR>
cnoremap <C-o> <CR>

:js << EOF
function toggle_bottombar(p) {
    var bb = document.getElementById('liberator-bottombar');
    if (!bb)
        return;
    if (p == 'on'){
        bb.style.height = '';
        bb.style.overflow = '';
        return;
    }
    if (p == 'off'){
        bb.style.height = '0px';
        bb.style.overflow = 'hidden';
        return;
    }
    bb.style.height = (bb.style.height == '') ? '0px' : '';
    bb.style.overflow = (bb.style.height == '') ? '' : 'hidden';
}
toggle_bottombar('off');
EOF

特定のサイトでキーバインドを無効に

サイトによっては,独自のキーバインドを指定していて,そちらを利用できないのは不便なので,ignorekeysコマンドを使ってサイトごとに設定を行います。

Google+やfeedly,それからJupyter Notebookはlocalhost:8888で起動するのでそちらも設定しています。

"------------------------------------------------------------------------------
" Ignorekeys
"------------------------------------------------------------------------------

ignorekeys add plus\\.google\\.com -except f,F,o,t,;,:
ignorekeys add mail\\.google\\.com -except f,F,o,t,;,:
ignorekeys add www\\.google\\.com/calendar -except f,F,o,t,;,:
ignorekeys add twitter\\.com -except F,v,V,d,;,:
ignorekeys add feedly\\.com -except f,F,;,:
" for jupyter notebook
ignorekeys add localhost:8888 -except :

ブックマークの設定

ブックマークの設定を行うことで,たとえば:open mfh 東京スカイツリーなどとすると自宅から東京スカイツリーまでの検索結果を現在のタブで表示出来るようになります。

dotfiles/vimperatorrc at 5f534224258ab32c8acfd345f5a704e3833a08a6 · ssh0/dotfiles · GitHub

(追記: "Bad Request"がでて公開できなかったが,このブックマークの中にあるURLのどれかが不適切と見なされていたと踏んでファイルの該当行へのリンクに変更したところ投稿できた。せめてエラー内訳でも教えてくれればいいものを・・・)

まとめ

Firefoxの設定と,Vimperatorにおける設定の紹介をしました。

参考になれば幸いです。

$ service ssh0 start

from everything import *

Firefox - アドオン，Vimperatorについて【自分のPCで使用しているソフトウェア，設定の紹介 #13】