読者です 読者をやめる 読者になる 読者になる

クマーなひとときv2

雑多なメモ。twitterで書ききれないもの等。

VimFx メモ その2

前の記事。
VimFx メモ - クマーなひとときv2

今は Nightly + VimFxで、e10s有効にして使ってるけど快適。
主にCSSとカスタムコマンドに関するめも。

Vimperatorの今後も怪しいし、もしもの時*1への備えだけはしっかりしておきたい。

ブラックリスト

ZenzaWatchとの兼ね合いのため、nicovideo.jp/watchとかはVimFxを無効化してる。

vimfx.set('blacklist', '*live.nicovideo.jp/* *nicovideo.jp/watch/*')

何となくニコ生も無効化してるけど、正直FirefoxFlashの組み合わせ最悪なので、ニコ生はCentBrowser使ってる。

一部キーのみ無効化

こちらも便利。と思うんだけど、問題があって使ってない。

VimFx/api.md at master · akhodakivskiy/VimFx · GitHub

一部キーだけ無効化出来る。
ただし、全てのモードで無効化されてしまったため、結局使ってない。
以下の例だと、hintモードでもjkが無効化されてしまう。hint文字にjkを使っているため、入力出来なくなった。

vimfx.addKeyOverrides(
  [ location => location.hostname === 'twicli.neocat.jp',
    ['j', 'k']
  ]
)

normalモードでだけ無効化する方法とかありそうなんだけどな。

2016/09/21T20:39:56 追記

Issue投げようと思ったら、他の人が質問して回答貰ってた。
addKeyOverrides & Hints mode · Issue #812 · akhodakivskiy/VimFx

というわけで、以下で動いた。マニュアル読んで、location以外渡せないと思ってたわ…

vimfx.addKeyOverrides(
  [ (location, mode) => location.hostname === 'twicli.neocat.jp' &&
    mode == 'normal',
    ['j', 'k']
  ]
)

通知

VimFx使ってると、右下に色々通知が出てくるけど、そこに好きなメッセージを出せる。

f:id:tonkuma:20160914065512j:plain

vimfx.on('modeChange', ({vim}) => {
  let mode = vimfx.modes[vim.mode].name
  vim.notify(`Entering mode: ${mode}`) // 通知
})

たまーに通知が消えなくなる事を除けば便利と思う。
locationChangeイベント発生時にページURL表示するとか、
スクロール時に現在位置を%で表示させるとか、色々使い道ありそう。(重くならないか心配だけど。

CSS

VimFxの見栄え変更。切っ掛けはヒント文字をもう少し大きくしたいな、という願望から。
以下に大体書かれてる。

VimFx/styling.md at master · akhodakivskiy/VimFx · GitHub

ヒント文字のサイズ変更

パパっと変更。

#VimFxMarkersContainer .marker {
  font-size: 15px !important; /* Specific font size. */
}

ちなみに、デフォルトのCSSは以下にあるので、ここを参考に直すのもあり。

VimFx/style.css at master · akhodakivskiy/VimFx · GitHub

ignoreモードを分かりやすく

ignoreモードかどうかの判断材料がツールバーのアイコンしかなく、判断が難しい。

通常時 ignore時
f:id:tonkuma:20160914071726j:plain f:id:tonkuma:20160914071738j:plain

そのため、分かりやすいように、ignoreモード時はロケーションバーの色を変えた。

状態 ロケーションバー
通常時 f:id:tonkuma:20160914072151j:plain
ignore時 f:id:tonkuma:20160914072211j:plain
#main-window[vimfx-mode="ignore"] #urlbar {
    background: yellow !important;
}

正直、最初から色変わるようにしててくれ、と思った。

ロケーションバーではIMEをOFFにする

VimperatorのコマンドラインIME OFFするようなもの。地味に役立つ。

#urlbar {
  ime-mode: inactive;
}

/押すと出てくる検索boxも同じようにしたいけど、上手く動かん。

カスタムコマンド

色々調べつつ、追加した。Wikiが参考になる。
Custom Commands · akhodakivskiy/VimFx Wiki · GitHub

主にVimperatorで使ってた機能を追加。やはりVimperator、及び、プラギン作者は神。

URLをmarkdown形式でコピー

copy.js にはいつもお世話になってました。
VimFxでも同じ機能が欲しい…欲しくない?

  vimfx.addCommand({
    name: 'copy_markdown',
    description: 'c_"[title](URL)"でURLコピー',
    category: 'location',
  }, ({vim}) => {
    let url = vim.window.gBrowser.selectedBrowser.currentURI.spec
    let title = vim.window.gBrowser.selectedBrowser.contentTitle
    let fmt = "["+title+"]("+url+")"
    gClipboardHelper.copyString(fmt)
    vim.notify("Copied String: "+ fmt)
  })

fmt = xxx の箇所変更して複数フォーマットでコピー出来るようにしてる。
gClipboardHelperについては以下参考。
Using the clipboard - Mozilla | MDN

URLインクリメント

もっといい書き方があると思うけど動いてるからもうこれでいいです(諦め

vimfx.addCommand({
  name: 'url_increment',
  description: 'c_URLインクリメント',
  category: 'misc',
}, ({vim}) => {
  let url = vim.window.gBrowser.selectedBrowser.currentURI.spec;
  if (url.match(/(\d+)(\D*)$/)) {
    var alter = String( Number(RegExp.$1) +1);
    var blank = "";
    for (i=0; i < RegExp.$1.length-alter.length; i++) {
      blank += "0";
    }
    var next = RegExp.leftContext + blank + alter + RegExp.$2;
    vim.window.gBrowser.loadURI(next);
  }
})

デクリメントも同じ要領で,xに割り当ててる。

URL置き換え

引数取得させて、任意指定出来るようになると便利なんだけど。今は固定値。

vimfx.addCommand({
  name: 'toggle_japanese',
  description: 'c_"-all-"を"-japanese-"に変更して再読込',
  category: 'misc',
}, ({vim}) => {
  let url = vim.window.gBrowser.selectedBrowser.currentURI.spec
    if ( url.includes('-all-') ) {
      url = url.replace(/-all-/, '-japanese-');
      vim.window.gBrowser.loadURI(url);
    }
})

ズームイン

CTRL + +CTRL + -で操作出来るけど、Vimperatorと同じ操作にしたかった。

vimfx.addCommand({
  name: 'zoom_in',
  description: 'c_ズームイン',
}, ({vim}) => {
  vim.window.FullZoom.enlarge();
})

enlarge()で拡大。reduce()で縮小。reset()で元に戻す。

ツールバーボタンをクリック

eを使えばいい?e押した後にヒント文字を入力しなきゃいけないじゃないですかヤダー
というわけで、これは必要です。

vimfx.addCommand({
  name: 'click_toolbar_feedly',
  description: 'Feedly_notifierをクリック',
}, ({vim}) => {
  vim.window.document.getElementById('toggle-button--jid1-bojn8b0im7kh2wjetpack-main-button').click();
})

ツールバーのIDをDOM Inspectorとかで調べて、必要な分だけ作ろう。

Stylishの編集画面を開く

CSS編集時に使う。
idは環境によって変わる。

vimfx.addCommand({
  name: 'stylish_edit',
  description: 'c_VimFxのcssを編集',
}, ({vim}) => {
  vim.window.switchToTabHavingURI('about:stylish-edit?id=2', true);
})

選択文字列をGoogle翻訳

  • 今まで
    caretで選択→yでコピー→t<C-t>で新しいタブ開いてgt <C-v><Enter>
  • 現在
    caretで選択→t

とても楽になった。

config.js:

vimfx.addCommand({
  name: 'search_selected_translate',
  description: 'c_選択文字列をGoogle翻訳',
  mode: 'caret',
}, ({vim}) => {
  vimfx.send(vim, 'getSelection', null, selection => {
    vim.window.switchToTabHavingURI('http://translate.google.co.jp/?source=osdd#auto|auto|'+selection, true)
  })
})

frame.js:

vimfx.listen('getSelection', (data, callback) => {
  let selection = content.getSelection().toString()
  callback(selection)
})

ARCでも検索出来るようにしてるので、単語もサクサク調べられる。


終わり。少しずつ便利になってる。
後は、フレーム操作、タブグループ操作、 文字入力時のマッピング*2 とか欲しいかな。

*1:Vimperatorのe10s対応不可とか、WebExtension対応不可とか

*2:非公式なら、海外のユーザが設定例公開してるけど、公式で欲しい