twitterで呟いたやつ+α。
はてなブログにTwitter埋め込めるみたいなので、それを試してみたかった。
cVim とは
chrome系ブラウザで使用可能な、Vim拡張。他に Vimium, Vichrome, Vrome, 等がある。
公式の文面を超意訳するなら、
「Vimium, Vichrome, Vrome達はpentadactyl等にある機能が欠けているけど、私なら大丈夫。
そう、cVimならね」
原文はこっち
GitHub - 1995eaton/chromium-vim: Vim bindings for Google Chrome.
https://github.com/1995eaton/chromium-vim
機能
メインで使ってるのがVimiumなため、Vimiumが比較の基準。
vim-likeなキーバインド
h
, j
, k
, l
による移動、d
, e
による半ページ移動、/
, ?
による検索、等々。もちろん全てカスタマイズ可能。
※APIによる制限はある。ブラウザのショートカットが優先される(<C-n>
等は使用不可)、等。
他の拡張と違い、imap
も設定出来る。
twitter.comimapを設定出来るのは便利。今、mapとimapで<C-o>が被ってるけど、ちゃんと、通常なら履歴を1つ戻って、文字入力中ならカーソル位置から行末まで削除してくれる。 #cVim pic.twitter.com/yXM7VSc2TN
— tomimori (@typetonk2) July 9, 2016
コマンドラインの実装
色んなコマンドを実行可能。
- タブを開く、閉じる、別ウィンドウで開く、別ウィンドウにマージする。
- セッションを保存する/読み込む。
- バッファ、ブックマーク、履歴を検索する。
chrome://
画面を開く。- cVimのオプションを設定する。
twitter.comviChromeにもコマンドラインっぽいのあったけど、cVimは更にそれっぽくていいと思います。 #cVim pic.twitter.com/sVExRmBGaZ
— tomimori (@typetonk2) July 8, 2016
設定ファイルを作れる。
vimっぽく設定ファイルを作れる。
twitter.com自分で設定ファイル(.cvimrc)書けるのはvimperatorっぽくていい。javascript書いて拡張も出来るみたいだし。あと、要素上にヒント出して、マウスオーバーイベント起こせるのは他のVim拡張で見たことない機能。使い道限定されるけど。 #cVim
— tomimori (@typetonk2) July 8, 2016
要素へのマウスオーバーイベントも発生させることが出来るのは、今の所cVimだけ(使い道は知らない。
入力フォームに簡単移動
gi
で現在いるフレームの最初のinput要素に移動、gI
で最後にフォーカスしたinput要素に移動。
twitter.comgiで入力フォームにフォーカス合うけど、押すたびに毎回最初の入力フォームに合うの使いづらい。gIで前回のフォームに合うけど、vimium見たいにgiだけで操作したかった。 #cVim
— tomimori (@typetonk2) July 8, 2016
URLのインクリメント/デクリメント
例えば、現在のURLが example.com/5.html
の場合、g+
を押せば example.com/6.html
に、g-
を押せば example.com/4.html
へ移動出来る。
example.com/6.html
↑g+を押すと、6.htmlへ移動する。
example.com/5.html
↓g-を押すと、4.htmlへ移動する。
example.com/4.html
twitter.comURLのincrement/decrement(vimperatorの<C-a>, <C-x>がある。これ凄い便利。全体的にキーマッピング多めで覚えるの大変だわ。?でヘルプ見れたらよかったのに #cVim
— tomimori (@typetonk2) July 8, 2016
CSSで見栄え変更
最初からあるCSSを、自由に変更出来る。
右側の文字が見辛いので、緑色に変更してる。
twitter.com要素のCSSを色々弄れるのはいい。設定画面にCSS全部乘ってるので直しやすいし。ただ、標準だと凄く見辛いので、ほぼ変更必須なのは頂けないけど。 #cVim pic.twitter.com/WwHozMbW8t
— tomimori (@typetonk2) July 9, 2016
セッションの保存
開いているタブを保存して、いつでも自由に開ける。
twitter.commksessionコマンドでセッション保存出来る。保存後はsessionコマンドで保存したセッションを「新しいウィンドウに」開ける。現在のウィンドウならよかったのに… #cVim pic.twitter.com/1SMAM4VdUR
— tomimori (@typetonk2) July 9, 2016
<C-n>
, <C-p>
で補完候補選択
他の拡張では出来ない。あいにく、私の環境でも出来なかったけど。
twitter.comcncpcompletionとextensionのショートカットを設定すると、<C-n>,<C-p>で補完候補選択出来るらしい。CentBrowserで試して駄目だったけど。 #cVim pic.twitter.com/eSW1fAfiSm
— tomimori (@typetonk2) July 9, 2016
設定ファイルは自動で読込可能
configpathとlocalconfigを設定する。問題もある。
twitter.com自分用の設定ファイルを作り、読み込んで使用出来る。ただし、自動で読み込むためのオプション(set localconfig)を設定ファイル内に書くと、正しく反映されなくなる。 #cVim pic.twitter.com/B6RARKZdmn
— tomimori (@typetonk2) July 9, 2016
自動で読み込まれる様子。画面更新と同時に、ローカルの設定ファイルが読み込まれ、内容が更新されているのが分かる。
twitter.comてst pic.twitter.com/gsQgpPDKzV
— tomimori (@typetonk2) July 9, 2016
Gist から設定を引用可能
試したことないので詳細は不明。こっちの方が管理しやすいのかも。
twitter.com設定ファイル、Gistから引っ張ってもこれるみたいだけど、使ったことないのでよく分からん。こっちなら特に難しく考えることなくいけるのかな。 #cVim
— tomimori (@typetonk2) July 9, 2016
上記ツイートに貼ったアニメーションGIFにある、https://gist.github~
の場所を任意のURLに変更し、Sync
ボタンを押せば、内容が更新されるらしい。
ここからは、ツイートしてないやつ。
ブラックリスト
任意のURLではcVimを無効化するように設定出来る。サンプルから抜粋。
let blacklists = ["https://mail.google.com/*", "*://mail.google.com/*", "@https://mail.google.com/mail/*"]
" blacklists prefixed by '@' act as a whitelist
https://mail.google.com/*
ではcVimを無効化*://mail.google.com/*
ではcVimを無効化- ただし、
https://mail.google.com/mail/*
に一致する場合、cVimを有効化
- ただし、
に、なる。
サイト固有の設定
任意のURLでは設定を変更出来る。サンプルから抜粋。
" this will enable the config block below on the domain 'reddit.com'
site '*://*.reddit.com/*' {
unmap j
unmap k
set numerichints
}
に、なる。
検索エンジンの追加
任意の検索エンジンを追加出来る。こんな感じ。
let searchengine gimage = "https://www.google.com/search?tbm=isch&q=%s"
let searchalias gi = "gimage"
後はコマンドラインを開いて tabnew gi <keyword>
と入力してEnter押せば、google画像検索から <keyword>
の画像を探せる。
%sが入力した <keyword>
に置換される。
クイックマーク
Vimのマークや、Vimperatorのqmarkと同じ機能。こんな感じ。
let qmark t = ["https://twicli.neocat.jp/twicli.html"]
後はおもむろに gn<keyword>
や go<keyword>
と打てばいい。例えば、
gnt
なら新しいタブにtwicliが開く。
got
なら現在のタブにtwicliが開く。
一時的な無効化
今はcVim動くな!って時は、i
を押す。INSERTモードに入り、ESCを押すまで、cVimが無効化される。
一部キーのみ無効化
passKeys を使う。こんな感じ。
site 'http://twicli.neocat.jp/twicli.html' {
map j passKeys
map k passKeys
}
指定したURLでは、j
, k
がそのままページに渡される。
他にも機能あると思うけど、とりあえずここまで。
「Vimperatorみたいにゴリゴリ設定ファイル書きたい!」って人にはお勧め出来そう。
Javascriptで機能拡張とかも出来るみたいだし。
" Code blocks (see below for more info)
getIP() -> {{
httpRequest({url: 'http://api.ipify.org/?format=json', json: true},
function(res) { Status.setMessage('IP: ' + res.ip); });
}}
" Displays your public IP address in the status bar
map ci :call getIP<CR>
" Script hints
echo(link) -> {{
alert(link.href);
}}
map <C-f> createScriptHint(echo)
最後に適当に作った.cvimrc貼って終わり。
"============================================================================= " Description: .cvimrc settings " Last Modified: 2016-07-11 19:24:197 "============================================================================= "mappings"{{{ "navigate map j scrollPageDown map k scrollPageUp mapgoBack map goForward map b :buffer map B :bookmarks unmap g- g+ map incrementURLPath map decrementURLPath unmap ; ;* map m* setMark "tab move unmap R E map h previousTab map l nextTab map u lastClosedTab map # lastUsedTab "tab hint unmap mf mr my gy gr map ;f createMultiHint map ;t createActiveTabbedHint map ;b createTabbedHint map ;R multiReverseImage "yank url map ;Y multiYankUrl map ;y yankUrl map ;r reverseImage "}}} "insert mappings"{{{ " imap beginningOfLine " imap endOfLine " imap deleteToBeginning " imap deleteToEnd " imap deleteWord " imap deleteForwardWord imap deleteChar " imap deleteForwardChar " imap backwordWord " imap forwardWord " imap forwardChar " imap backwardChar " imap forwardLine " imap backwardLine " imap selectAll " imap editWithVim "}}} "settings(boolean)"{{{ set hud set noscalehints set noautofocus set smoothscroll set cncpcompletion "}}} "settings(non-boolean)"{{{ let locale = "ja" let hintcharacters = "asdfglkjh" let barposition = "top" let searchengine gimage = "https://www.google.com/search?tbm=isch&q=%s" let searchalias gi = "gimage" let searchengine trans = "http://translate.google.com/?source=osdd#auto|auto|%s" let searchalias tl = "trans" let qmark m = ["https://mail.google.com/mail/#inbox"] let qmark T = ["https://tweetdeck.twitter.com/"] let qmark t = ["http://twicli.neocat.jp/twicli.html"] "site-specification settings"{{{ "twicli site 'http://twicli.neocat.jp/twicli.html' { map 1 passKeys map 2 passKeys map 3 passKeys map 4 passKeys map 5 passKeys map 6 passKeys map 7 passKeys map 8 passKeys map 9 passKeys map 0 passKeys } "}}} ".cvimrc end