Surfingkeys カスタマイズ

in tools
  1. 環境
  2. 機能
  3. 微妙な点
  4. 設定
  5. 設定したキー確認
  6. Visual mode
  7. Hit-a-Hintの表示文字
  8. ページナビ移動
  9. blacklist
  10. 数秒だけSurfingkeys無効
  11. cVimのqmarkみたいなもの
  12. 新しいウィンドウで設定したURLを開く
  13. 検索エンジン登録
  14. 特定のサイトでSurfingkeysのキーを優先
  15. テーマ設定
  16. まとめ
  17. 設定ファイル
  18. 追記

Surfingkeys - Chrome ウェブストア

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

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

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

環境

機能

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

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

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

微妙な点

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

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

設定

Surfingkeys右クリック > Settings > Advanced mode 有効にする

これで自分好みに設定できるようになります。
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の表示文字

Hints.characters = 'asdfghjklwertxcvnm';

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

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

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

ページナビ移動

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

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

blacklist

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

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

数秒だけSurfingkeys無効

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を開く

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

window.open - Web API | MDN

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

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

検索エンジン登録

// 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のキーを優先

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

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

テーマ設定

// 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"
);

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

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

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

まとめ

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

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

設定ファイル

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

追記

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