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

前編はこちらでSurfingkeysの概要・導入について説明しています。
[Surfingkeys で快適ネットサーフィン（前編） - Qiita](https://qiita.com/hush_in/items/09b549ca8e533340d834)

後半はカスタマイズについて説明していきます。

## カスタマイズ方法

- オプションから設定画面に遷移
- Advanced mode をチェック![Surfingkeys_Settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3464/655d893b-bb99-4ffb-b51f-7a4fec8b9982.png)
- 設定を書き換えてSaveを押す![Surfingkeys_Settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3464/41dc8e01-ae39-1415-aceb-656225d32850.png)


### 自分の設定

参考までにこちらに自分の設定を置いています。

https://github.com/hushin/dotfiles/blob/master/docs/SurfingkeysSetting.js

## カスタマイズでできること

### 自分好みのキーバインドに設定

例えばこのようにキーバインドを書くと、 `h`, `l` で左右のタブに移動できます

```
map('h', 'E') // previousTab
map('l', 'R') // nextTab
```

### 任意のJavaScriptを実行

任意のJavaScript（ブックマークレットのようなもの）をショートカットキーで実行できます。

ほぼ**この機能のためにSurfingkeysを使っています。**

#### ページタイトルとURLをコピー

ページタイトルとURLをクリップボードにコピーします。
Markdownでメモを取るときによく使います。

![copy.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3464/2118a606-8292-c115-564a-0204aa7fc200.gif)

https://www.google.com/?hl=ja で実行した例を載せます。

- `cm` : Markdown `[Google](https://www.google.com/?hl=ja)`
- `cr` : rich text `Google`
- `ch` : human readable `Google / https://www.google.com/?hl=ja`
- `ca` : html `<a href="https://www.google.com/?hl=ja">Google</a>`
- `cb` : scrapbox `[Google https://www.google.com/?hl=ja]`
- `cp` : plantuml `[[https://www.google.com/?hl=ja Google]]`
- `ct` : textile `"Google":https://www.google.com/?hl=ja`

#### 検索機能の追加（サジェスト機能つき）

ブラウザ自体に検索エンジンの追加ができますが、
Surfingkeysだとサジェストを設定したり、選択しているテキストを検索できたりと高性能です。

`t` でOmnibarを開き、 `(alias)` `スペース` で検索できます。

* `tw` : Twitter
![20200304-tw.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3464/4e9968f7-0e9b-2dfb-5d95-738702d8686f.gif)
* `ht` : はてなタグ
* `r` : Yahoo!リアルタイム検索
* `a` : Amazon
* `md` : MDN
![20200304-mdn.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3464/4b52442d-262d-a7d8-486b-dff443ebeb2d.gif)
* `np` : npm
* `dh` : Docker Hub
* `qi` : Qiita
* `wi` : Wikipedia


#### よく使うブックマークを開く

`gn(alias)` でブックマークを開きます。よく使うページを登録しておくと便利です。

例えば `gnm` で Gmail を開きます。

#### 便利系

ショートカットで各種Webサービスを開きます。

* `;t` Google翻訳
  * 文字列を選択しているときはテキストを翻訳
* `;b` はてなブックマークコメントを見る
* `;a` Save to Instapaper
* `;g` 魚拓を開く

#### URL操作

無駄なqueryやhashを取りたいときに使います。

* `=q` Delete query
* `=h` Delete hash
* `=s` (Amazonのみ) URLを短縮する
  * 例 https://www.amazon.co.jp/%E3%82%A8%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88-Architects%E2%80%99Archive-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E3%82%A8%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9/dp/4798121967/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=ddd&qid=1583311236&sr=8-3
    * → https://www.amazon.co.jp/dp/4798121967

### カスタマイズ 参考リンク

- https://github.com/brookhong/Surfingkeys/blob/master/pages/default.js
  - デフォルトの設定
- https://github.com/brookhong/Surfingkeys/wiki/Example-Configurations
- https://github.com/b0o/surfingkeys-conf
- https://github.com/ncaq/surfingkeys-ncaq

## その他の設定

キーボードのみでブラウザのアドレスバーからfocusを戻したいときはこちらの設定をします。

https://brookhong.github.io/2018/11/18/bring-focus-back-to-page-content-from-address-bar.html

## おわりに

ということでSurfingkeysのカスタマイズ例を紹介しました。

任意のJavaScriptを実行できるの便利ですね。

<!-- ## おまけ 自分のキーボードショートカット拡張の遍歴

1. Chrome + Keyconfig : Chrome Version54 から使えなくなる
2. Chrome + Vimium : とりあえず乗り換え
3. Firefox + Vimperator : 本場 Vimperator に乗り換え
4. Chrome + cVim : Vimperatorが使えなくなったので乗り換え
5. Chrome + Surfingkeys : cVim が更新されなくなってきたので乗り換え ← 今ここ -->