Surfingkeys - Chrome ウェブストア

Vimぽい操作で動かせる拡張機能です。

前は、cVimをカスタマイズして使っていましたが、一部の機能が使えなくなったので乗り換えました。
前に試しに使ったことがあるんですが、そのときはcVimにあってSurfingkeysにない機能があったので結局元に戻ったことがあります。

cVimの一部機能はないですが、機能自体はcVim以上に多いので、全て使いこなせる方はいないんじゃないでしょうか?
設定もやっと一段落したので置いておきます。

環境

  • Windows10 64bit
  • Google Chrome Portable 83.0.4103.97
  • Surfingkeys 0.9.65
  • Magic Keyboard - US

機能

GitHub - brookhong/Surfingkeys: Map your keys for web surfing, expand your browser with javascript and keyboard.

英語ですが、ブラウザの翻訳機能で読めると思います。
機能がかなり多いので、読むだけでも大変ですが。

基本的な機能は他のVim系と似ていますので、基本的な操作についてはそこまで難しくはないと思います。
cVimと同じくjavascriptを動かせるので、かける方は自分好みに動かせるかと思います。

微妙な点

他のVim系に比べて少し重い。

古いPCでないなら大丈夫だと思います。

設定

Surfingkeysクリック > Settings > Key mappings > Advanced modeを有効にする
または、;eでもKey mappingsに飛べます。

これで自分好みに設定できるようになります。
Default mappingsを押すと初期設定が表示されるので、参考にしながら設定していきます。
もう一度押すと自分で設定する表示に切り替わります。

ちなみに、設定画面でInsert modeが動くので注意。
とりあえず、iでモードを抜けられます。

メッセージ

Settings sync may not work thoroughly because of QUOTA_BYTES_PER_ITEM quota exceeded
QUOTA_BYTES_PER_ITEMクォータを超えたため、設定の同期が完全に機能しない場合があります

設定が長くなると表示されます。

バックアップを取っておけばいいと思うので、気にしないことにした。

設定したキー確認

?押すと設定されたキーが表示されます。
初期設定でもかなり多いので、自分が使いそうなキーを少しづつ覚えるしかないです。

Visual mode

Visual mode, the mode for text selection, and actions on the selected text.

v押してVisualモードに切り替えることで、Vimの操作で文字選択ができます。
マウスに比べると遅いと思いますが、慣れれば実用範囲内になるのではないかなと。

キーボードからマウスに持ち替えるのが面倒ですし、持ち替える時間を考えるとそこまで悪くないかも。

Hit-a-Hintの表示文字

1
Hints.characters = 'asdfghjklwertxcvnm';

fなどを押した後に、リンクに表示されるキーです。
押しやすいキーを設定するといいです。

キー説明
fリンクを開く
af新しいタブでリンクを開く
cf新しいタブで複数のリンクを開く
gf非アクティブな新しいタブでリンクを開く

リンクが一つだけのときは、自動で選択します。

ページナビ移動

1
2
settings.prevLinkRegex = /((<<|prev(ious)?)|<|‹|«|←|前へ|前のページ+)/i;
settings.nextLinkRegex = /((>>|next)|>|›|»|→|次へ|次のページ+)/i;
キー説明
[[現在のページの前のリンクをクリック
]]現在のページの次のリンクをクリック

ページ移動するときに探すキーになります。
矢印と日本語を追加しておきました。

blacklist

1
settings.blacklistPattern = /mail.google.com/;

設定したURLでSurfingkeysを無効化できます。
サイトのキーボードショートカットを優先したいときにどうぞ。

数秒だけSurfingkeys無効

1
2
3
mapkey('p', '#0enter ephemeral PassThrough mode to temporarily suppress SurfingKeys', function() {
Normal.passThrough(1500);
});

上の設定だと1.5秒だけ無効になります。
普段はSurfingkeysを有効にしておいて、一時的にサイトのキーボードショートカットを使いたいというときに役に立ちます。

cVimのqmarkみたいなもの

surfin2.0 · GitHub

cVimにある、設定したURLにすぐに移動できる機能が載っています。
使用頻度が多いサイトは一々ブックマークから開くのは面倒で、非常に重宝していたので助かります。
ありがたい。

そもそも、オンラインブックマーク使っているので、ブラウザのブックマーク使わないのですが。

設定したURLを、現在のタブか新しいタブで開けます。

新しいウィンドウで設定したURLを開く

1
2
3
mapkey("key", "Open New Window", function() {
window.open("url", 'noopener', 'width=1280, height=720');
});

window.open - Web API | MDN

keyに設定したいキーを設定して、urlにウィンドウ表示したいURL入れて、widthとheightの値を省略しないで好みの数値に設定すると、設定されたサイズの新しいウィンドウで表示されます。

この設定で新ウィンドウで開くと、タブと拡張機能が非表示になります。
タブ表示スペースが無くなるので、ブラウザゲームなどで使うと便利だと思います。

検索エンジン登録

1
2
3
4
5
// Google jp 1年以内
addSearchAliasX('1', 'Google jp 1年以内', 'https://www.google.co.jp/search?q={0}&tbs=qdr:y,lr:lang_1ja&lr=lang_ja');
mapkey('o1', '#8Open Search with alias 1', function() {
Front.openOmnibar({type: "SearchEngine", extra: "1"});
});

これで、o1を押すとOmnibarでGoogle1年以内が開くので、検索文字を入力してEnterで検索できます。
また、サイト内の文字を選択した後にs1を押すと、選択した文字でGoogle1年以内の検索ができます。

後は、t1 Spaceでも、Google1年以内が開きます。
これは少しだけ面倒なので忘れていいかな。

ちなみに、gにGoogle検索がデフォルト設定されているので、ogsgでGoogle検索できます。

この機能のおかげで、検索が捗ります。

特定のサイトでSurfingkeysのキーを優先

1
2
3
4
unmapAllExcept(
['p','i','I','q','F','<Ctrl-k>','<Ctrl-j>','T','X','h','l','<','>','L','H','t','b',"'"],
/jp.inoreader.com/
);

キーボードショートカットが設定してあるサイトで、Surfingkeysのキーを優先する設定です。
Surfingkeysで設定したキーが動くようになります。

テーマ設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// theme
settings.theme = `
.sk_theme {
font-family: sans-serif;
font-size: 13pt;
}`;

// Hints style
// Link Hints
Hints.style (`
font-family: monospace;
font-size: 14pt;
font-weight: normal;
text-transform: lowercase;
`);

// Text Hints
Hints.style (`
font-family: monospace;
font-size: 13pt;
text-transform: lowercase;
`,
"text"
);

Omnibar Hit-a-Hint Visual mode

文字は大きくしていて、フォントは小文字表示にしています。
見やすいフォントを使っておけば見間違えないかなと。

ブラウザに設定しているフォント

  • Sans Serif: Noto Sans CJK JP
  • 固定幅: HackGen35 Console

HackGen35は固定幅ではなく、半角3で全角5の比率ですが、見やすいので使っています。

設定ファイル

検索エンジンなどは一部以外を載せています。

まとめ

VIMエディターを開いたり、Markdownプレビューできたり、PDFに対応していたりと、他にも色々と機能があります。
自分が使いそうな機能だけ使用するのがいいと思います。

キーボードだけでかなり操作できるのが嬉しいですね。
ブラウザ操作が捗ります。

追記

2020-03-28

  • 新しいウィンドウで設定したURLを開くの説明 修正

2020-06-05

  • 環境 変更
    • Google Chrome Portable 80.0.3987.116 > 83.0.4103.97へ
    • Surfingkeys 0.9.59 > 0.9.65へ
  • 設定の説明 変更
  • 一部のデフォルトマッピングが変わったので変更