Firefox に Tridactyl をインストールしてとりあえずの設定
タイトルの通り Firefox 76 に Tridactyl をインストールして設定まで行う。
farewell, vimperator
Vimperator が使えなくなって久しい。一時期は本当にはまってプラグインも色々使ってカスタマイズしていたのだが、Mac の新規インストールを機にとうとうブラウザの更新を止めたまま Vimp を使い続ける姿勢を解いた。前にも書いたが 2020 年まで使っていた人はもう本当に少ないんじゃないかと思う。
ブラウザの操作をエディタの Vim ライクに行うことができるこの拡張。j,k,l,m のキー入力でのブラウジングに、f キーを押下するとリンクにアルファベットが表示されそれに従ってジャンプできる Hit-a-Hint、それらによりキーボード操作による Web 閲覧を可能にするものだったが、更新が止まって久しい。そこでもう何年も前から、Vimperator 代替として多くの拡張が Firefox および Google Chrome 用に出た。自分も当然色々と試した。
キーボード操作よりもマウス操作の方が早いという事実はわかっている。ただもう Vimp に慣れてしまって両手をホームポジションから動かすのがだるい。その悩みを解消する拡張は数点存在する。ただそれだけじゃないんだ自分にとっては。設定ファイルによる細かい自分好みの設定、有志による豊富なプラグイン、非力な自分にだってちょっと頑張れば JavaScript によるカスタマイズが可能。それに適うものがずっと見つけられなかった。たまに「vimperator から○○に乗り換えました」みたいな記事を見つけては、違うそうじゃないんだと勝手に落胆するということを繰り返していた。しかしそのまま数年が経過し、いよいよ環境を新しくしようというこの段でもう一度しっかり探し直した。vimperator-labs には代替拡張が書かれている。
vimperator/vimperator-labs: Vimperator
候補として次の2つの拡張に絞った。
参考にした記事。
Vimperatorの代替をVim VixenにすべきかTridactylにすべきか - 遠い叫び
結論を言うと Tridactyl に落ち着いた。理由は単純で、「いじれそうだから」。
Tridactyl をローカルでビルドしてインストール
色々やりたいので GitHub から clone してインストールする。
tridactyl/tridactyl: A Vim-like interface for Firefox, inspired by Vimperator/Pentadactyl.
$ git clone https://github.com/tridactyl/tridactyl.git
ビルドの流れは readme の通り。
$ cd tridactyl
$ yarn install
$ yarn run build
build ディレクトリが作成されるので、その中のファイルを全て選択し圧縮、拡張子を .xpi に変更 ( tridactyl.xpi とする ) 。 自分で作成した Add-on をインストールして利用する方法は2通り1。
- 一時的なアドオンとして読み込む
- パッケージ化して署名、もしくは未署名のアドオン許可の設定をして読み込む
手間が少ない前者を使う。アドレスバーに以下を入力し デバッガー画面を開く。
about:debugging
【一時的なアドオンを読み込む】から先程の【tridactyl.xpi】を選択。Tridactyl のチュートリアルが開けばOK。
使い方
f キー押下で Hit-a-Hint。表示されるアルファベットを入力するとリンク先へ遷移。f に ⇧shift キーを加え F を入力すると新規タブで開くヒントモードに。 コマンドも Vim と同様、: を入力するとコンソールが開く。その他チュートリアルはヘルプコマンドで確認可能。
:help
Native messenger のインストール
Tridactyl の機能をさらに拡張する。WebExtension だけでは実装できない機能を、Native Messenger App を経由して可能にする。2
参考
Tridactyl のコマンドで以下を実行。
:nativeinstall
クリップボードにインストール用コマンドがコピーされるので、シェルで実行する。完了後、Tridactyl で次のコマンドを実行しインストール済みのメッセージが出ればOK。
:native
# Native messenger is correctly installed, version X. X. XX
これで source なんかのコマンドが効くようになる。
Tridactyl の設定
Vimperator と同じ要領で、ホームディレクトリに【.tridactylrc】を置く。
$ touch ~/.tridactylrc
このファイルに設定を書いていく。Vimp のときのファイルから必要最低限だけ移行した。
~/.tridactylrc
" 基本設定 general config "============================================================================== colorscheme sweets set smoothscroll true set scrollduration 100 set allowautofocus false " キーマップ Key Mapping "============================================================================== " for TreeStyle Tab " keymap j k " keymap k j bind J tabprev bind K tabnext " for US Keyboard keymap ; : keymap : ; " disabling bookmark-add keymap A <Nop> bind / fillcmdline find bind n findnext 1 bind p findnext -1 bind ,<Space> nohlsearch " default scroll is a bit much bind j scrollline 5 bind k scrollline -5 " use <C-[> as <Escape> bind --mode=normal <C-[> composite mode normal; hidecmdline bind --mode=insert <C-[> composite unfocus | mode normal bind --mode=hint <C-[> hint.reset bind --mode=ex <C-[> ex.hide_and_clear " use clipboard " unbind --mode=normal y " command yy clipboard yankshort " command yt clipboard yanktitle " command ym clipboard yankmd unbindurl www\.tumblr\.com j unbindurl www\.tumblr\.com k unbindurl www\.tumblr\.com l unbindurl www\.tumblr\.com r unbindurl b\.hatena\.ne\.jp j unbindurl b\.hatena\.ne\.jp k unbindurl b\.hatena\.ne\.jp o
コメントアウトしているところは調整中。まだ全然荒い。主な設定としては
- J, K でのタブ移動を Tree Style Tab に合わせて上下を直感的に
- ページ内検索結果を n, p で言ったり来たり
- デフォルトの j, k スクロールはちょっと大幅なので調整
- デフォルトでキーショートカットが用意されている Web サイトではキーをエスケープ
などなど。
カラースキームの作成
Tridactyl にはデフォルトでいくつかのカラースキームが用意されており、次のコマンドで変更できる。
:colorscheme hogehoge
もしくは設定ファイルに次の記述をする。上ではもう追加してるけど。
colorscheme hogehoge
デフォルトで用意されているのは次の数点。
tridactyl/src/static/themes at master · tridactyl/tridactyl
アピアランスは大事。表示されるコマンドやヒントが小さくて見にくいようでは使い物にならない。そこで自分で用意する。
ところで Vimperator 時代にあった sweets というカラースキームをご存知だろうか。snaka72 さんが作成されたように記憶しているが、自分はこれに opacity オプションを加えてプロンプト部分を半透過にしたりして使わせてもらっていた。それに近いものを再現する。
tridactyl ディレクトリ内に新テーマ【sweets】を作成。
$ cd src/static/themes/
$ mkdir sweets
$ cd sweets
$ touch sweets.css
:root.TridactylThemeSweets { /* Generic */ --tridactyl-font-family: monospace; --tridactyl-font-family-sans: sans-serif; --tridactyl-font-size: 14pt; --tridactyl-small-font-size: 14px; --tridactyl-bg: white; --tridactyl-fg: black; --tridactyl-logo: url("data:image/png;base64,REPLACE_ME_WITH_BASE64_TRIDACTYL_LOGO"); /* Mode indicator */ --tridactyl-status-font-family: var(--tridactyl-font-family); --tridactyl-status-font-size: var(--tridactyl-small-font-size); --tridactyl-status-bg: var(--tridactyl-bg); --tridactyl-status-fg: var(--tridactyl-fg); --tridactyl-status-border: 1px lightgray solid; --tridactyl-status-border-radius: 2px; /* Search highlight */ --tridactyl-search-highlight-color: yellow; /* Hinting */ /* Hint character tags */ --tridactyl-hintspan-font-family: var(--tridactyl-font-family-sans); --tridactyl-hintspan-font-size: var(--tridactyl-small-font-size); --tridactyl-hintspan-font-weight: bold; --tridactyl-hintspan-fg: LightYellow; --tridactyl-hintspan-bg: DarkOrchid; --tridactyl-hintspan-border-color: ButtonShadow; --tridactyl-hintspan-border-width: 0px; --tridactyl-hintspan-border-style: solid; /* Element highlights */ --tridactyl-hint-active-fg: Black; --tridactyl-hint-active-bg: rgba(0, 0, 0, 0.7); --tridactyl-hint-active-outline: 1px solid DarkOrchid; --tridactyl-hint-bg: Pink; --tridactyl-hint-outline: 1px solid #8f5902; /* :viewsource */ --tridactyl-vs-bg: var(--tridactyl-bg); --tridactyl-vs-fg: var(--tridactyl-fg); --tridactyl-vs-font-family: var(--tridactyl-font-family); /*commandline*/ --tridactyl-cmdl-bg: rgba(0, 0, 0, 0.7); --tridactyl-cmdl-fg: LightYellow; --tridactyl-cmdl-line-height: 1.5; --tridactyl-cmdl-font-family: monospace; --tridactyl-cmdl-font-size: 14pt; /*completions*/ --tridactyl-cmplt-option-height: 1.4em; --tridactyl-cmplt-fg: LightYellow; --tridactyl-cmplt-bg: rgba(0, 0, 0, 0.7); --tridactyl-cmplt-font-size: 14pt; --tridactyl-cmplt-font-family: monospace; /* i don't think 0.5px is redered */ --tridactyl-cmplt-border-top: 1px solid grey; /* need a better way for naming variables * - .Properties for .HistoryCompletionSource table - .Properties for .BmarkCompletionSource table */ /*sectionHeader*/ --tridactyl-header-first-bg: rgba(146, 24, 146, 0.7); --tridactyl-header-second-bg: rgba(146, 24, 146, 0.7); --tridactyl-header-third-bg: rgba(146, 24, 146, 0.7); /* eg. What if I dont want liner-gradient as bg? * * :root .sectionHeader { background: blue; } * * ???? */ --tridactyl-header-font-weight: bold; /* i don't think 0.5px is redered */ --tridactyl-header-border-bottom: 1px solid bottom; /*url style*/ --tridactyl-url-text-decoration: none; --tridactyl-url-fg: LimeGreen; --tridactyl-url-bg: rgba(0, 0, 0, 0); --tridactyl-url-cursor: pointer; /*option focused*/ --tridactyl-of-fg: var(--tridactyl-fg); --tridactyl-of-bg: rgba(255, 236, 114, 0.7); /*new tab spoiler box*/ --tridactyl-highlight-box-bg: #eee; --tridactyl-highlight-box-fg: var(--tridactyl-fg); --tridactyl-private-window-icon-url: url("chrome://browser/skin/privatebrowsing/private-browsing.svg"); --tridactyl-container-fingerprint-url: url("resource://usercontext-content/fingerprint.svg"); --tridactyl-container-briefcase-url: url("resource://usercontext-content/briefcase.svg"); --tridactyl-container-dollar-url: url("resource://usercontext-content/dollar.svg"); --tridactyl-container-cart-url: url("resource://usercontext-content/cart.svg"); --tridactyl-container-circle-url: url("resource://usercontext-content/circle.svg"); --tridactyl-container-gift-url: url("resource://usercontext-content/gift.svg"); --tridactyl-container-vacation-url: url("resource://usercontext-content/vacation.svg"); --tridactyl-container-food-url: url("resource://usercontext-content/food.svg"); --tridactyl-container-fruit-url: url("resource://usercontext-content/fruit.svg"); --tridactyl-container-pet-url: url("resource://usercontext-content/pet.svg"); --tridactyl-container-tree-url: url("resource://usercontext-content/tree.svg"); --tridactyl-container-chill-url: url("resource://usercontext-content/chill.svg"); --tridactyl-container-color-blue: #37adff; --tridactyl-container-color-turquoise: #00c79a; --tridactyl-container-color-green: #51cd00; --tridactyl-container-color-yellow: #ffcb00; --tridactyl-container-color-orange: #ff9f00; --tridactyl-container-color-red: #ff613d; --tridactyl-container-color-pink: #ff4bda; --tridactyl-container-color-purple: #af51f5; --tridactyl-externaledit-bg: var(--tridactyl-logo) no-repeat center; }
default.css をベースに手を加えた。多分余計なこともたくさん書いてる。
この状態で再度上述の手順でビルド、インストール。
~/.tridactylrc 、もしくはコマンドで作成したテーマを読み込む。こんな感じになる。
statuspanel を非表示にする
リンクにカーソルオーバーするとリンク先の URL がブラウザ左下に表示されるが、これが tridactyl のコマンドと重なってしまって見にくいので、userChrome.css を用いて隠す。
まず userChrome によるカスタマイズを可能にする。アドレスバーに以下を入力。
about:config
toolkit.legacyUserProfileCustomizations.stylesheets を true に。
続いて userChrome。最近の Firefox では次を使わせてもらう。
$ git clone https://github.com/alice0775/userChrome.js.git
README に従ってプロファイルフォルダ内に chrome フォルダを作成し、userChrome.xml、userChrome.js をダウンロードして保存、さらに userChrome.css を作成。UTF-8 BOM 無しテキストにする必要がある点だけ注意。わからなければ CotEditor なんか使うと良い。
userChrome.css
toolbarbutton#alltabs-button { -moz-binding: url("userChrome.xml#js"); }
#statuspanel[type="overLink"] #statuspanel-label
{ display: none !important; }
Firefox を再起動すれば完了。
今後
ここまでやってだいぶ昔の環境が戻ってきた感じがあるものの、まだまだやりたいことは色々ある。
- JavaScript で操作されたテキストフィールドが入力不能になることがあるので解消したい。はてなブログの HTML 編集画面とか CSS 編集画面とかああいう箇所。
- J,K でのタブ移動だけでなく、<,>で閲覧タブ履歴を辿るとかやりたい。
- そもそも J,K でのタブ移動の挙動が未だに少し掴めない。単純に上下の移動なのか、閲覧履歴なのか、開いた履歴なのか、挙動からだけだと不明瞭。時間が作れたらコード読もうと思う。
- ヤンク周りが上手く動作しない。ページのURL、ページのタイトル+URL のコピーとかをストレスなくやりたい。rc ファイルに書いてるけど上手くいってない。
色々いじっていこうと思う。
