iTerm2からHyperに移行した際に入れたプラグインまとめ

# はじめに
自分は元々ターミナルに[iTerm2](https://www.iterm2.com)を使用していました。
しかし最近になって見た目とか色々弄りたいなーと思いはじめ、JSやCSS等で簡単にカスタマイズできる[Hyper](https://hyper.is)に乗り換えました。
ただその際にてこずったのがプラグインの導入です。
現在では動かないものや、相性が悪く同時に使うと落ちてしまうようなものがいくつもあり、結構な時間を食われてしまいました。
そのため、現在でも正常に動き、かつ相性も問題のないプラグインをまとめて紹介したいなあと思い、この記事を書きました。

一応内容は基本的なHyperのカスタマイズ方法は知っている前提なので、もしご存知でない方は公式を見ていただくか、↓の記事などで補完をお願いします。
[愛着が湧く！HyperTermで作るMYターミナル！](https://liginc.co.jp/378082)

あと自分はシェル環境をzsh+prezto+pureにしているので、その辺もカスタマイズしたい方は↓の記事の後半を参考にしてください。
[お前らのターミナルはダサい](https://qiita.com/kinchiki/items/57e9391128d07819c321)

# 現状
![hyper-iceberg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/b00bdd17-fceb-ff57-a82c-8f1fc1906379.png)
現状のターミナルはこんな感じで、設定は[GitHub](https://github.com/yamannnu/dotfiles/blob/master/.hyper.js)に上げてあります。
ちなみにmacOS 10.15以外での動作確認はしていないので、WindowsやLinuxの方々は動かなかったらごめんなさい。

# 導入したプラグイン
- [gitrocket](https://www.npmjs.com/package/gitrocket)
- [hyper-confirm](https://www.npmjs.com/package/hyper-confirm)
- [hyper-custom-touchbar](https://www.npmjs.com/package/hyper-custom-touchbar)
- [hyper-dark-scrollbar](https://www.npmjs.com/package/hyper-dark-scrollbar)
- [hyper-highlight-active-pane](https://www.npmjs.com/package/hyper-highlight-active-pane)
- [hyper-iceberg](https://www.npmjs.com/package/hyper-iceberg)
- [hyper-opacity](https://www.npmjs.com/package/hyper-opacity)
- [hyper-search](https://www.npmjs.com/package/hyper-search)
- [hyper-tabs-enhanced](https://www.npmjs.com/package/hyper-tabs-enhanced)
- [hyperborder](https://www.npmjs.com/package/hyperborder)
- [hypercwd](https://www.npmjs.com/package/hypercwd)
- [hyperline](https://www.npmjs.com/package/hyperline)
- [hyperlinks](https://www.npmjs.com/package/hyperlinks)
- [hyperterm-overlay](https://www.npmjs.com/package/hyperterm-overlay)

移行にあたって導入したプラグインは↑の通りです。
ちなみにプラグインを探す際は[awesome-hyper](https://github.com/bnb/awesome-hyper)や[npmjs](https://www.npmjs.com)で探すと捗るのでオススメです。
順番に紹介していきます。

## [gitrocket](https://www.npmjs.com/package/gitrocket)
![gitrocket.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/905a9081-1893-5c8e-b5f6-ce895aa01245.gif)
gitでpushするとロケットが飛ぶやつ。
和むので入れました。

## [hyper-confirm](https://www.npmjs.com/package/hyper-confirm)
![hyper-confirm.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/d3394162-a74f-8004-7f01-b9a103581db0.gif)
`Cmd`+`q`した際に本当に終了するか確認してくれるやつ。
たまに事故るので入れています。

## [hyper-custom-touchbar](https://www.npmjs.com/package/hyper-custom-touchbar)
<img width="1085" alt="hyper-custom-touchbar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/725b1af6-7537-4fa8-3a97-4fa8c080d198.png">
Touch Barに色んなコマンドを仕込めるやつ。
アイコンとかも設定できて面白いので導入しましたが、正直エイリアスで良いのと最近はHHKBなので全く使用していません...
紹介するか迷いましたが、微妙に可能性を感じるので一応載せました。

## [hyper-dark-scrollbar](https://www.npmjs.com/package/hyper-dark-scrollbar)
![hyper-dark-scrollbar.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/a5cc021e-3619-55bc-d956-23e261e096d2.gif)
右端に暗めのスクロールバーを表示するやつ。
あまり主張しないやつが良かったのでこれにしました。
逆に目立たせたいなら[hyper-fading-scrollbar](https://www.npmjs.com/package/hyper-fading-scrollbar)とかもあります。

## [hyper-highlight-active-pane](https://www.npmjs.com/package/hyper-highlight-active-pane)
![hyper-highlight-active-pane.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/09c740b8-a76f-2753-ffe9-0ec91789e945.gif)
`Cmd`+`d`などで分割したペインのうち、アクティブなものを分かりやすくするやつ。
これがないと結構パッと見で分からないので入れています。

## [hyper-iceberg](https://www.npmjs.com/package/hyper-iceberg)
![hyper-iceberg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/66d31a2b-a19f-a132-3d04-122774cddb7a.png)
HyperのテーマをIceberg（元々はVim用）に変えられるやつ。
落ち着いた色使いでとても見やすいので入れています。

## [hyper-opacity](https://www.npmjs.com/package/hyper-opacity)
<img width="1024" alt="hyper-opacity.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/389567ef-869a-366e-1bb4-002ccef944f0.png">
Hyperを任意の透過率にできるやつ。
結構他のアプリの上で写経することがあるので入れています。
ただ背景だけでなく文字も透過されるので、あまりやりすぎると見えづらくなるため注意が必要です。

## [hyper-search](https://www.npmjs.com/package/hyper-search)
![hyper-search.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/41320fcc-a38c-c756-13b7-d1e3ebf33dbc.gif)
`Cmd`+`f`でターミナル内を検索できるやつ。
右端の`↑`で大文字と小文字を区別するかどうか切り替えられます。

## [hyper-tabs-enhanced](https://www.npmjs.com/package/hyper-tabs-enhanced)
<img width="1024" alt="hyper-tabs-enhanced.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/c7c4f09a-53d4-cda1-9961-36119bd4bc53.png">
各タブの内容に応じて先頭にアイコンを付けてくれるやつ。
有名どころだと[hyper-tab-icons](https://github.com/dfrankland/hyper-tab-icons)や[hyper-tab-icons-plus](https://github.com/sangdth/hyper-tab-icons-plus)などがありますが、自分はシンプルな感じが好きなのでこちらを入れています。

## [hyperborder](https://www.npmjs.com/package/hyperborder)
<img width="1024" alt="hyperborder_default.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/7db44da5-ce07-10c0-3cdd-6245a162c100.png">
ウィンドウの周りにカラフルなボーダーを付けられるやつ。
デフォだとピンクとオレンジのグラデーションになっています。
色はもちろんグラデーションの角度を調整したりアニメーションさせたりと非常に細かい設定ができるため、ぜひご自身の好みに合わせてカスタマイズしてください。

## [hypercwd](https://www.npmjs.com/package/hypercwd)
![hypercwd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/2b57a91c-8492-9d34-0024-c80815f85a4d.gif)
新規でタブやペインを開く際に、同じディレクトリで開いてくれるやつ。

## [hyperline](https://www.npmjs.com/package/hyperline)
<img width="1024" alt="hyperline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/2ee93549-dc59-35a6-cde5-8995a2ed36c9.png">
ウィンドウの下部に様々なステータスを表示してくれるやつ。
PCの状態はもちろん、なぜかSpotifyも表示できます。

ちなみに↓の画像のように、hyperlineは先ほど紹介したhyperborderと微妙に被ります。

<img width="1024" alt="hyperline_conflict.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/c7b01dc7-a856-9018-0029-677537abeac7.png">
そのため、気になる方は適当なスタイルを当てるなどして調整する必要があります。
自分の場合はcssにmargin-bottomを追加して調整しています。

## [hyperlinks](https://www.npmjs.com/package/hyperlinks)
![hyperlinks.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/ba5f0b93-d609-6f7e-333b-365c643634f9.gif)
リンクをクリックするとブラウザを開いてくれるやつ。

## [hyperterm-overlay](https://www.npmjs.com/package/hyperterm-overlay)
![hyperterm-overlay_hotkeys.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/0560d686-58f8-e274-5bb1-5de9f58dd212.gif)
本記事のメインディッシュ。
グローバルなホットキーを設定し、どこでもHyperを呼び出せるやつ。
呼び出し系は他にも沢山ありますが、自分が調べた中ではこれが一番高性能だったので採用しました。
設定項目が結構多いため細かく挙動を制御できて便利ですが、公式の説明ではイメージがつきづらい項目もあるので、実際の挙動と共に補足しようと思います。

### alwaysOnTop
![hyperterm-overlay_alwaysOnTop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/98cc8521-2083-a769-1bec-6460a9772bc9.gif)
ウィンドウを常に最前面に表示できます。
デフォルトはtrueです。

### animate
![hyperterm-overlay_animate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/6ef8155d-6af7-bc0b-1d8a-a46130985a6f.gif)
Hyperを呼び出した際に、後ほど紹介するpositionに合わせてアニメーションさせることができます。
デフォルトはtrueです。

### hasShadow
<img width="1024" alt="hyperterm-overlay_hasShadow.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/8a209146-6bc8-156e-742d-c4d17ab2b776.png">
ウィンドウの周囲に影をつけることができます。
デフォルトはfalseです。

### hideOnBlur
![hyperterm-overlay_hideOnBlur.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/281cec31-ac15-014c-3fbd-38024a81d5df.gif)
Hyperがアクティブでなくなった際に、ウィンドウを隠すことができます。
デフォルトはfalseです。

### hideDock
<img width="312" alt="hyperterm-overlay_hotkeys-tips.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/32800e68-b553-2f2d-5bd2-0dad36591487.png">
Dockに表示されるHyperのアイコン（↑）を非表示にできます。
ただし、非表示にできるのは後ほど紹介するuniqueがtrueの時だけです。
デフォルトはfalseです。

### hotkeys
![hyperterm-overlay_hotkeys.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/0560d686-58f8-e274-5bb1-5de9f58dd212.gif)
グローバルなホットキーを設定し、どこでもHyperを呼び出すことができます。
デフォルトは`Option`+`Space`です。

**ちなみに特定のデスクトップに割り当てられていると、後ほど紹介するprimaryDisplayと同じような挙動になってしまいます。
そのため、↓のように全てのデスクトップに割り当てる必要があります。**

<img width="312" alt="hyperterm-overlay_hotkeys-tips.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/32800e68-b553-2f2d-5bd2-0dad36591487.png">

### position
![hyperterm-overlay_position.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/45ec5121-4774-fb4a-dd53-c79e3deca341.gif)
Hyperを呼び出す際に、画面の上下左右端を起点として設定できます。
デフォルトはtopです。

### primaryDisplay
<img width="780" alt="hyperterm-overlay_primaryDisplay.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/e3fa5fc6-729f-67cf-b48c-65f244ba280e.png">
Hyperを呼び出す際に、常にプライマリディスプレイで呼び出すようにできます。
プライマリディスプレイとは、↑の2画面のうち上部に白いバーがある方のことです。
デフォルトはfalseです。

### resizable
![hyperterm-overlay_resizable.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/dd8851a5-6432-5a9a-93a9-ee0b4ea6912a.gif)
ウィンドウのサイズを変更可能に設定できます。
デフォルトはtrueです。

### size
<img width="1024" alt="hyperterm-overlay_size.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/e3619a8f-61f8-1317-15ec-829ee3b8a0d1.png">
ウィンドウの高さを設定できます。
numberだと固定サイズ、floatだと割合で設定できます。
デフォルトは0.4です。

### startAlone
<img width="1024" alt="hyperterm-overlay_startAlone.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/d4387650-02eb-7963-99ef-d695cf966622.png">
Hyperを起動する際に、Overlayウィンドウ以外も立ち上げるかどうか設定できます。
Overlayウィンドウとは、左上に閉じる・最小化・拡大縮小のボタンがないウィンドウです。
デフォルトはfalseです。

### startup
Hyperを起動する際に、Overlayウィンドウを立ち上げるかどうか設定できます。
デフォルトはtrueです。

### tray
![hyperterm-overlay_tray.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181079/9ecce80d-15cf-b7b9-f54e-29cb5fad919c.gif)
通知領域、Macだとメニューバーに呼び出し用のアイコンを表示できます。
デフォルトはtrueです。

### unique
Overlayウィンドウ以外のウィンドウを開かないように設定できます。
デフォルトはfalseです。

### で、結局どう設定すれば良いの？
参考までに、現状自分の設定は↓のようになっています。

```javascript:.hyper.js
overlay: {
  alwaysOnTop: false,
  animate: false,
  hasShadow: false,
  hideDock: false,
  hideOnBlur: false,
  hotkeys: ['Control+Space'],
  position: 'top',
  primaryDisplay: false,
  resizable: true,
  startAlone: true,
  startup: true,
  size: 1,
  tray: true,
  unique: true
},
```
自分は正直`Control`+`Space`を使って任意のデスクトップで出したり消したりできれば良いので、それ以外はデフォルトかfalseにしています。
あとHyper起動時にOverlayウィンドウ以外は消すしそれ以降も使わないので、startAloneとuniqueをtrueにしています。
それ以外は適当で良いと思います。

# おわりに
今回はiTerm2からHyperに移行した際に入れたプラグインのうち、現在でも正常に動き、かつ相性も問題のないプラグインをまとめて紹介しました。
ちょっとhyperterm-overlayの説明を丁寧にやり過ぎたせいでかなり長くなってしまいましたが、最後まで読んでいただきありがとうございました。
これで少しでもHyperを使う人が増えてくれると嬉しいです。