Macで快適な作業環境を構築する(Hyper編)

Macで快適な作業環境を構築するためにHyperというターミナルアプリを導入します。

## Hyperとは

[Hyper](https://hyper.is)

Electronベース(HTML+CSS+React+Redux)で作られたターミナルアプリ。
Mac以外にもWindowsやLinuxでも動作します。

<img width="757" alt="スクリーンショット 2018-11-12 14.47.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/52879/f62b33c5-d295-7b34-c027-d708d8bfca26.png">

## Hyper インストール

```
$ brew cask install hyper
```

homebrewを入れていない場合は、[公式サイト](https://hyper.is)からダウンロードできます。

### 日本語文字化け対策

`.bash_profile` や `.zshrc` にLANG環境変数を追記する

```
export LANG=ja_JP.UTF-8
```

## Hyper コマンド

```
$ hyper help
  Usage: hyper [options] [command]

  Commands:

    <default>                    Launch Hyper
    d, docs, h, home             Open the npm page of a plugin
    help                         Display help
    i, install                   Install a plugin
    ls, list                     List installed plugins
    lsr, list-remote, ls-remote  List plugins available on npm
    s, search                    Search for plugins on npm
    u, uninstall, rm, remove     Uninstall a plugin

  Options:

    -h, --help     Output usage information
    -v, --verbose  Verbose mode (disabled by default)
```

hyperをインストールするとhyperコマンドを使用できます。
コマンドからテーマやプラグインのインストールが行えます。

## Hyper テーマのインストール

```
$ hyper i hyperterm-material
```

オススメのテーマは `hyperterm-material` です。
[Hyperテーマ](https://hyper.is/themes)からお好みで選んでください😊

### ポケモンテーマにしたい場合

おもしろいテーマとしてポケモンテーマがあります。

```
$ hyper i hyper-pokemon
```

`~/.hyper.js`

```
  config: {
    pokemon: ["random", "pikachu"],
  },
  plugins: {
    "hyper-pokemon",
  },
```

- [爆速でターミナルをポケモンにする](https://qiita.com/chanuu/items/b5c3d11e089ad0c7356d)
- [klaussinani/hyper-pokemon](https://github.com/klaussinani/hyper-pokemon)
- [ポケモンテーマ一覧]https://klaussinani.github.io/hyper-pokemon

## Hyper プラグインのインストール

```
hyper i hyper-statusline
hyper i hyper-search
hyper i hypercwd
hyper i hyper-opacity
hyper i hyper-pane
hyper i hyper-tab-icons-plus
```

### hyper-statusline

カレントディレクトリ名と、Gitローカルリポジトリの現在のブランチ名が表示されます。
カレントディレクトリ名をクリックするとFinderが表示され、ブランチ名をクリックするとリモートリポジトリがブラウザで表示されます。

とても便利なプラグインです。

### hyper-search

ターミナル上の文字列が検索できるようになります。

### hypercwd

新しいタブを開く際にカレントディレクトリと同じ階層で開いてくれます

### hyper-opacity

背景の透明度を設定できます。

### hyper-pane

control + option + 数字 で分割したタブの切り替えができます。

### hyper-tab-icons-plus

<img width="762" alt="スクリーンショット 2018-11-12 14.30.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/52879/f230b0ed-5338-5a65-8b4b-aa45b9b12a1a.png">

タブタイトルにアイコンが表示されます。
これのメリットはnpmサーバー起動中やphpサーバを起動した時にその言語のアイコンが表示される点です。

サーバを二重に立てようとしてエラーになった時にすぐ気付けます。

#### bash の方

`.bash_profile` や `.bashrc` へ追記

```
case "$TERM" in
xterm*|rxvt*)
    PROMPT_COMMAND='echo -ne "\033]0;${PWD##*/}\007"'
    show_command_in_title_bar()
    {
        case "$BASH_COMMAND" in
            *\033]0*)
                ;;
            *)
                echo -ne "\033]0;${BASH_COMMAND} - ${PWD##*/}\007"
                ;;
        esac
    }
    trap show_command_in_title_bar DEBUG
    ;;
*)
    ;;
esac
```

#### zsh の方

`.zshrc` へ追記

```
# Override auto-title when static titles are desired ($ title My new title)
title() { export TITLE_OVERRIDDEN=1; echo -en "\e]0;$*\a"}
# Turn off static titles ($ autotitle)
autotitle() { export TITLE_OVERRIDDEN=0 }; autotitle
# Condition checking if title is overridden
overridden() { [[ $TITLE_OVERRIDDEN == 1 ]]; }
# Echo asterisk if git state is dirty
gitDirty() { [[ $(git status 2> /dev/null | grep -o '\w\+' | tail -n1) != ("clean"|"") ]] && echo "*" }

# Show cwd when shell prompts for input.
tabtitle_precmd() {
   if overridden; then return; fi
   pwd=$(pwd) # Store full path as variable
   cwd=${pwd##*/} # Extract current working dir only
   print -Pn "\e]0;$cwd$(gitDirty)\a" # Replace with $pwd to show full path
}
[[ -z $precmd_functions ]] && precmd_functions=()
precmd_functions=($precmd_functions tabtitle_precmd)

# Prepend command (w/o arguments) to cwd while waiting for command to complete.
tabtitle_preexec() {
   if overridden; then return; fi
   printf "\033]0;%s\a" "${1%% *} | $cwd$(gitDirty)" # Omit construct from $1 to show args
}
[[ -z $preexec_functions ]] && preexec_functions=()
preexec_functions=($preexec_functions tabtitle_preexec)
```

## 設定ファイル

`~/.hyper.js` に設定ファイルが作成されています。

```js
  config: {
    // hyper-opacityプラグインの設定
    opacity: 0.85,
    // 範囲選択するとクリップボードにコピーされる
    copyOnSelect: true,
  },
  plugins: [
    "hyperterm-material",
    "hyper-statusline",
    "hyper-search",
    "hypercwd",
    "hyper-pane",
    "hyper-tab-icons-plus"
  ],
```

設定ファイルの変更はリアクティブに反映されます。
プラグインも手動でファイルに書き込んでも問題なく、保存と同時にインストールして反映してくれます。
テーマはすぐに反映されない時があるので強制リロードしてみてください。

## Hyper ショートカット

- `Command` + `,` 設定ファイルを開く
- `Command` + `T` 新規タブを開く
- `Command` + `N` 新規ウィンドウを開く
- `Command` + `D` パネルを縦分割
- `Command` + `Shift` + `D` パネルを横分割
- `Command` + `Shift` + `I` Developer Toolを開く
- `Command` + `{` 前のタブへ
  - `control` + `Shift` + `tab` 前のタブへ
- `Command` + `}` 次のタブへ
  - `control` + `tab` 次のタブへ
- `Command` + `[` 前のパネルへ
- `Command` + `]` 次のパネルへ
- `Command` + `K` バッファのクリア
- `Command` + `F` 検索フォームを表示
  - hyper-search プラグインがインストールされていること
  - `Command` + `G` 次のキーワードへ
  - `Command` + `Shift` + `G` 前のキーワードへ
- `Command` + `R` リロード
- `Command` + `Shift` + `R` 強制リロード(テーマ変更の再読込みなど)
- `Command` + `+` 画面拡大
- `Command` + `-` 画面縮小
- `Command` + `control` + `F` フルスクリーン
- `Command` + `M` 最小化

## 設定ファイルまとめ

最終的な私の設定ファイルをまとめてます。

- [.hyper.js](https://github.com/ucan-lab/dotfiles/blob/master/.hyper.js)
- [.bashrc](https://github.com/ucan-lab/dotfiles/blob/master/.bashrc#L108-L127)
- [.zshrc](https://github.com/ucan-lab/dotfiles/blob/master/.zshrc#L121-L150)