Surfingkeys カスタマイズ

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

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

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

環境

Windows10 64bit
Google Chrome Portable 97.0.4692.71
Surfingkeys 1.0.3
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に飛べます。

これで自分好みに設定できるようになります。

ちなみに、設定画面で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	api.Hints.setCharacters("asdfgwerxcvuionm");

fなどを押した後に、リンクに表示されるキー。
Surfingkeyの設定画面では、効かないようです。

ヒントキー

キー	説明
f	リンクを開く
af	新しいタブでリンクを開く
cf	新しいタブで複数のリンクを開く
gf	非アクティブな新しいタブでリンクを開く
Shift	ヒントキーが重なっているときに反転
Space	押している間はヒントキーは非表示

押しやすいキーを設定するといいです。
リンクが一つだけのときは、自動で選択します。

移動キー

キー	説明
h	ヒントキー表示中に左にカーソル移動
j	ヒントキー表示中に下にカーソル移動
k	ヒントキー表示中に上にカーソル移動
l	ヒントキー表示中に右にカーソル移動

hjklは元から移動キーですが、ヒントキー表示のときも移動でき、新しいリンクが表示されれば、自動でヒント文字が表示されます。
ヒントキーを表示しながらスクロールしつつ、リンクを新しいタブでたくさん開いて、後でまとめて読む方は便利かと。

移動キーはヒントキーに設定してもエラーになり設定できないです。残念。

ページナビ移動

1 2	settings.prevLinkRegex = /((<<\|prev(ious)?)\|<\|‹\|«\|←\|前へ\|前のページ+)/i; settings.nextLinkRegex = /((>>\|next)\|>\|›\|»\|→\|次へ\|次のページ+)/i;

キー	説明
[[	現在のページの前のリンクをクリック
]]	現在のページの次のリンクをクリック

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

blocklist

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

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

数秒だけSurfingkeys無効

// PassThrough mode 1.5秒間だけsurfingkeys無効
api.mapkey('p', '#0enter ephemeral PassThrough mode to temporarily suppress SurfingKeys', function() {
  api.Normal.passThrough(1500);
});

初期だと1秒ですが、少し短いので1.5秒にしました。
一時的にサイトのキーボードショートカットを使いたいというときに役に立ちます。

cVimのqmarkみたいなもの

surfin2.0 · GitHub

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

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

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

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

1
2
3

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

window.open - Web API | MDN

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

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

検索エンジン登録

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

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

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

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

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

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

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

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

テーマ設定

// style
// theme
settings.theme = `
  .sk_theme {
    font-family: sans-serif;
    font-size: 16px;
}`;

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

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