Vim Vixenを使い始めた

firefox emotional

vim vixenを使い始めた

最近、Vim Vixenというfirefoxの拡張を使い始めました。いわゆるひとつのvim的な操作感をブラウザにもというやつです。元々はvimperatorを使っていたのですが、firefox57(?)からWebExtensions以外のものが動かなくなるらしいという話で乗り換え先を探していたりしていたのでした(一時的にVimFxを使ったりもしていましたがこれも57の壁を超えることができなさそうなかんじです)。

細かな調整

実際使ってみて細かな部分の操作に違いがあるもののそれなりに良さそうという感じです。ただ個人的にちょっとだけ設定を書き換えたい部分があり一部追加でキーバインドを設定していたりします（いつもはデフォルト設定をそのまま利用する派）

記憶と染み付いてしまった手癖によれば、vimperatorは、前のタブや次のタブに移動する操作がgT,gtで行えるのですがその機能がVim Vixenには無いようでした（あとで調べてみるとVim VixenはK,Jで行う派なようです）。このキーバインドを追加するのはとても簡単で拡張の設定部分で読み込まれるJSONに以下を追加するだけです（about:addonsを開いてVim Vixenを選択して表示されるJSONを書き換える）。

@@ -26,6 +26,8 @@
     "u": { "type": "tabs.reopen" },
     "K": { "type": "tabs.prev", "count": 1 },
     "J": { "type": "tabs.next", "count": 1 },
+    "gT": { "type": "tabs.prev", "count": 1 },
+    "gt": { "type": "tabs.next", "count": 1 },
     "r": { "type": "tabs.reload", "cache": false },
     "R": { "type": "tabs.reload", "cache": true },
     "zi": { "type": "zoom.in" },

キーマップの割当を変更していると、当然、この拡張の設定部分で指定できるコマンド(e.g. tabs.prevみたいなやつのことです)がどのようなものかが気になったりするのですが、それに関してはコードを読むとこのあたりのものが使えるようです。

あと、ちょっと覗いてみた限りでは結構読みやすい感じのコードだし。どこかで時間を見つけて全部読んでおいても良いかなみたいな気持ちになりました。

WebExtensions

それはそうと、なんとなく最近は電車の中での暇な時間にmozillaのextensionsのページを見ています。今までブラウザの拡張は使うことのみで開発する気にはとてもなれなかったのですが（これは古い形式のXULとか触るfirefoxの拡張のころもchromeの拡張のときも同様です）。なんとなくの暇つぶしの読み物としては結構面白い感じです。

基本的にはmanifest.jsonをみてエントリーポイントなどを把握したらあとは各自で気になる部分を見ていく感じで、モジュールなどの分け方は普通のjsの開発と同様の感じでやっていくようでした（ちなみにVim Vixenはuiはreactでコードはwebpackでまとめるというよくある感じの構成）。

知らなかったこと

個人的には、開発にはchromeをそれと並行しての通常のウェブサイトの閲覧にはfirefoxみたいな感じで常にブラウザを複数同時に使っていて、開発に関しては基本的にchromeでだけ作業することが多かったので結構知らないことがあったりしました。たとえば、about:debuggingというページの存在など知らない機能の存在を初めて知るなどしてなるほどーと思ったりしていました。

結構、getting startedの記事だけでも得るものはあって、古のgreasemonkeyみたいな拡張は簡単に作れるし。何よりどこかに登録したり良い感じの構成にしてzipにまとめたりなどせずとも、about:debuggingから自分で作った拡張(仮)のmanifest.jsonを読み込むだけで手軽に拡張を有効にしてみたりと簡単にできるのに驚いたりしていました。

あと、どういう感じの実行結果になるかというのが動画になっているあたりに中の人の頑張りを感じたりしました（たしかに操作感(Look and Feel的な)を確認する上ではスクリーンショットの添付よりは動画のほうが全然良い（文章で説明するよりもわかりやすい））。