Hyperでイケてるターミナルをつかおう

# Hyperのプラグイン紹介です

2016年に[お前らのターミナルはダサい](https://qiita.com/kinchiki/items/57e9391128d07819c321)なんて記事がありましたが、2018年のいまとなってはiTermを使っている時点で色々物足りなくなってきます。そうです、いまは「[Hyper:zap:](https://hyper.is)」の時代なのです。技術系ブログのスクリーンショットやカンファレンスのライブコーディングなどでHyperのターミナルを見かけることが多く、結構普及してきていると感じてます。そこで、おすすめのHyperのプラグインを紹介します！こんな感じのターミナルになります。

<img width="771" alt="スクリーンショット 2018-05-18 1.15.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/160451/66aefd11-9605-a948-2594-e27f6fbcda52.png">


なお、Hyperのプラグイン紹介サイトとしては[awesome hyper](https://github.com/bnb/awesome-hyper)があるのですが、最新のHyperでは動作しないプラグインが結構あり、ハマってしまうので要注意です。。

## カラーテーマ：「hyper-material-theme」
Hyperはデフォルトでも真っ黒なターミナルがかっこいいですが、色々なかたがカラーテーマを作っているので、試してみると良いでしょう。例えば[こちらのサイト](https://hyperthemes.matthi.coffee)ではテーマの一覧をまとめて観ることができます。
その中でも私のお気に入りは"[hyper-material-them](https://github.com/dperrera/hyperterm-material)"です。デフォルトよりはちょっと目にやさしいかんじでマテリアルデザインでよくみかけるっぽい色合いです。
<img width="344" alt="スクリーンショット 2018-05-18 0.21.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/160451/763344f3-8237-33b5-503f-6cb31ca5a9de.png">

## ステータスライン：「hyper-statusline」
ターミナルのフッター部に情報を表示させるステータスライン系のプラグインとしては、「[hyperline](https://github.com/Hyperline/hyperline)」が圧倒的に人気で、下の図のような外観を皆さんも見かけたことがあるかと思います。

<img width="1302" alt="スクリーンショット 2018-05-18 0.37.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/160451/6053d98c-69d5-5f8c-752b-c23c7c46ab38.png">

、、が、最新のHyper2系では残念ながら動きません:scream: GitHubで[Issueもでているので](https://github.com/Hyperline/hyperline/issues/158)、対応を待ちましょう。
似たようなプラグインとしては「[hyper-statusline](https://github.com/henrikdahl/hyper-statusline)」がいい感じです。表示項目は多くなく、カレントディレクトリ名と、Gitローカルリポジトリの状態だけですが、こちらはきちんと動きます。Hyperのプラグインは読みやすいので、必要に応じて自分で機能追加すれば良いでしょう。

<img width="800" alt="スクリーンショット 2018-05-18 0.42.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/160451/92a37d45-127f-2c72-b3ad-f621f8db9e9d.png">

## タブ：「hyper-tab-icons-plus」
Hyperのタブ系のプラグインの多くはターミナルの状況に応じたアイコンをタブに表示することができ、iTermとは一線を画す魅力だと個人的に思ってます。タブ系プラグインもたくさんあるのですが、最新版のHyperで動作しないものが結構あります:cry: いろいろ試したところ、「[hyper-tab-icons-plus](https://github.com/dfrankland/hyper-tab-icons)」がいい感じでした。下図のような感じでタブにSVGアイコンが表示されます。

<img width="1076" alt="スクリーンショット 2018-05-18 0.53.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/160451/8d07e4ba-9a43-5c10-e700-247924830d9d.png">

ただし、ターミナルの状況をタブのタイトルに随時反映させるためには、ちょっとした設定が必要になります。

### タブタイトルを動的に反映させる
タブタイトルの設定には規定のエスケープシーケンスで囲ったタイトル文字を送る必要があります。そのため、シェルの設定ファイルに下記を追加します。昔StackOverflowを漁って見つけたと思うですが、出典がわからなくなりました:bow:

 1. **zshの場合**
 
.zshrcに下記を追加

```zsh

precmd() {
   pwd=$(pwd)
   cwd=${pwd##*/}
   print -Pn "\e]0;$cwd\a"
}

preexec() {
   if overridden; then return; fi
   printf "\033]0;%s\a" "${1%% *} | $cwd"
}
```

2.**bashの場合**
 
 .bashrcに下記を追加

```bash
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
```

3.**tmuxの場合**

 tmuxを経由すると、そのままではタブタイトルに反映されなくなります。.tmux.confに次の設定をすることでタブタイトルが反映されるようになりました。

```sh
setw -g allow-rename on
set-option -g set-titles on
set-option -g set-titles-string "#T #{session_alerts}"
```

## バッジ機能：「hyper-ink-badge」

手前味噌で恐縮ですが、私もプラグイン「[Hyper Ink Badge](https://www.npmjs.com/package/hyper-ink-badge)」を作ってみたので紹介させて下さい。iTerm2などにある[バッジ機能](https://www.iterm2.com/documentation-badges.html)を実現するプラグインで、セッションごとに異なるテキストや画像を表示します。これにより、たくさんタブを開いて作業しているとき、誤ったタブでコマンドを実行することを防いでくれます。
こどもの趣味により[スプラトゥーン](https://www.nintendo.co.jp/wiiu/agmj/)っぽい感じの見た目にしてみました。詳細は[こちらのQiita記事](https://qiita.com/vimyum/items/6132438f5b24175382ac)をごらんください。

![overview.gif](https://qiita-image-store.s3.amazonaws.com/0/160451/2841c077-cef5-98db-084b-22c592fdb16c.gif)



## おまけ：日本語を表示する

Hyperは2系になって日本語などCJKの表示に対応しました。ただ、環境変数を適切に設定しておかないと日本語表示が?????になってしましいます。

![lang.png](https://qiita-image-store.s3.amazonaws.com/0/160451/a9adb2b5-ce80-0b28-e932-9fffa1a24f21.png)

.bashrcなどに下記のように環境変数LANGを設定すれば大丈夫です。

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

## 以上
HyperはWeb系の知識(React + Redux)があればプラグインをつくるのも簡単です。プラグインを作ることでReactの知識も深まりますし、ぜひ自分でプラグインを作ることをオススメします。
簡単なプラグインの作り方はこちらの記事「[Hyperターミナルのプラグインを作ってみよう](https://qiita.com/vimyum/items/569280135ee5d4da33bd)」に書きましたのでご参考まで:relaxed: