はじめに: この記事について

• キーボードでwebブラウジングしたい人向けの説明です
• キーバインドをカスタマイズ、便利な機能を追加して作業効率アップ

Surfingkeys とは

• Chrome/Firefox の拡張です
  • キーバインドを設定したりコマンド入力ができるようになります
  • 極めればほぼマウスを触らずにブラウザの操作ができます
• JavaScript で設定を書くことができ、柔軟なカスタマイズが可能です
• インストールはこちらから
  • Chrome https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc
  • Firefox https://addons.mozilla.org/ja/firefox/addon/surfingkeys_ff/

※ 以降は Mac, Chrome を前提に書いていますが、他の環境でもおそらく動くと思います。

主な操作

デフォルトの動作です。好みにカスタマイズできます。

スクロール

vimライクに移動できます

• k 上にスクロール
• j 下にスクロール
• e or u 画面半分上にスクロール
• d 画面半分下にスクロール
• gg ページの一番上にスクロール
• G ページの一番下にスクロール

Omnibar

• t ブックマークと履歴を検索して開く
• og Google 検索
  • Open Google の略で覚える
  • もしくは t の後に g スペース で切り替え
• oh 履歴
• Omnibar内での操作
  • ↓ or Tab or Ctrl-n 次の候補へ
  • ↑ or Shift-Tab or Ctrl-p 前の候補へ
  • Enter 別タブで開く
  • Ctrl-Enter バックグラウンドの別タブで開く

マウス操作の代わり

• f Follow links モードへ
  • 続けて出てくる文字を打つとリンクを開くことができる
  • input の場合はフォーカス
  • Shiftキーを押しながら打つと別タブで開く
• cf Follow links モードへ: バックグラウンドの別タブで開く
  • 例えばGoogleの検索結果のページを複数開きたいときなどに使えます
• i input要素にフォーカス
• Esc キー でやめる

検索

• / ページ内検索
  • vimと同じ
  • 単語を入力してEnterで確定
  • n で次の検索結果へジャンプ
  • N で前の検索結果へジャンプ
• Esc キー でやめる

タブ操作

• E 左のタブへ
• R 右のタブへ
• x タブを閉じる
• X 最後に閉じたタブを開く

ヒストリー操作

• S 戻る
• D 進む

他

• yy クリップボードにURLをコピー
• ? すべてのショートカットキーを表示
• Alt-s 一時的にSurfingkeysを無効にする

いろいろできるぞ Surfingkeys

機能が多すぎてあまり把握できていないですが便利そうと思ったものを紹介

詳しい説明は https://github.com/brookhong/Surfingkeys にあります。

• T で タブを切り替え
• v Visual mode
  • 更に v を押して Range mode（選択）
  • ※ 下記の操作はマウスで範囲選択してもできます
  • y でクリップボードにコピー
  • sg で ググる
  • sG で Omnibarを開く
  • 更に v で Normal mode に戻る
• sm Markdown preview
  • クリップボードにあるMarkdownテキストをプレビューできる
  • HTML コードをコピーできる
• yg 画面キャプチャ
  • マウス→右クリックで画像を保存する必要あり
• 2文字以上のコマンドは1文字目を打ったら右下にヘルプメッセージが表示される
  • 忘れても思い出しやすい
• PDFの閲覧も一部キーバインドが使える

カスタマイズについて

Surfingkeys で快適ネットサーフィン（後編） - Qiita へ