Windows 10にHyperをインストールしてポケモンテーマを適用するまで【ポケモン剣盾発売記念】

最近Twitter等でやたらポケモン見る気がするなと思ったら、どうも先週ポケモン最新作が発売していたようです。購入した方も多いのでは？？自分はポケモンやり始めるとキリがないので購入見送り予定です…。

以前「[**Windows Terminal**](https://qiita.com/hideki0145/items/04582a26baf3d81632c1)」について記事にしました。いいターミナルアプリだとは思うのですが、Preview版ということもあり[IMEが動作しない](https://github.com/microsoft/terminal/issues/2213)という不具合が8月から続いています。そこで他にWindowsで動作するターミナルアプリにいいものがないか探したところ「[**Hyper**](https://hyper.is/)」というものを見つけました。しかもHyperには「[**Hyper-Pokemon**](https://klaussinani.tech/hyper-pokemon/)」というポケモンテーマを適用するプラグインがある！ということで、ポケモン発売記念でセットアップしてみたいと思います。

> 今回はネタ記事ですが、もう少しHyperのプラグイン等調べて次回も記事書ければと思います。

## 参考

> ■記事を書こうと思ったきっかけ
> 爆速でターミナルをポケモンにする
> https://qiita.com/chanuu/items/b5c3d11e089ad0c7356d

## 自分の環境

- Windows 10 Pro 1909

## Hyperって？

Hyper is on Electron-based Terminal. Built on HTML/CSS/JS. Fully extensible!

> [引用元]
> https://hyper.is/

## 早速インストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78896/dc39e28c-e383-45d9-3bd4-4c56ab49e262.png)

https://hyper.is/#installation からWindows版のインストーラーをダウンロードして実行するだけでインストール完了です。超簡単！

もし**Chocolatey**を使用している方であれば、[GitHubのReadme](https://github.com/zeit/hyper)にある通り、

```powershell
choco install hyper
```

としてもインストールすることができます。

> [Chocolatey参考]
> Windows10でChocolateyを使ってみた
> https://qiita.com/hideki0145/items/e760eebcc5019275ae6a

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78896/4f9abdda-95b1-26ce-e7da-0cdce7fd71b2.png)

インストールが完了すると、初期設定のHyperが立ち上がります。

## hyper-pokemonプラグインを適用する

Windows版Hyperの設定ファイルは`%USERPROFILE%\AppData\Roaming\Hyper\.hyper.js`に存在します。
これを次のように編集すると…

```javascript:%USERPROFILE%\AppData\Roaming\Hyper\.hyper.js
  .
  .
    // for advanced config flags please refer to https://hyper.is/#cfg
    pokemon: 'bulbasaur',
    unibody: 'false',
    poketab: 'true',
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [
    'hyper-pokemon',
  ],
  .
  .
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78896/989931fd-bc12-8e10-5138-fb14402330db.png)

この通り、ポケモン図鑑No.001 フシギダネに出会えます！
ポケット モンスターの せかいへ！レッツ ゴー！

## どうしてフシギダネ？

自分の最初の相棒だったからです。やどりぎのタネとはっぱカッターつえー！

## 積み残し

ポケモンテーマは無事に適用できたのですが、デフォルトシェルがZshのWSLを使用すると 自動補完で候補が出てきた時のフォントカラーが見づらいです…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78896/025e5380-b77f-be14-9232-9b73bfaefd1a.png)

プラグインによるカラースキーム変更を、設定ファイルで上書きする方法を調査しなきゃいけないです。

[2019/11/26 追記]
hyper-pokemonプラグインがどうやってカラースキーム変更を行っているのか、[公式ドキュメント](https://hyper.is/#hyperyellow)とhyper-pokemonのGitHubソースコードを読んで見てみました。

```javascript:hyper-pokemon/index.js
  .
  .
  return Object.assign({}, config, syntax, {
    termCSS: config.termCSS || '',
    css: `
      ${config.css || ''}
      .terms_terms {
        background: url("file://${imagePath}") center;
        background-size: cover;
      }
  .
  .
```

上記箇所で「設定ファイルに指定したcssの後に、hyper-pokemonのカラースキーム用cssを追記する」という趣旨の記述があるので、設定ファイルで上書きする ということはできないようです。そもそもフォントカラーも含めて一括して良しなに設定してくれるのがテーマプラグインのいいところなので 今回自分がやろうとしていることはちょっと道を外れていそうです…。

ポケモンテーマ、といいつつ「壁紙だけ変えたい！」という場合は、Hyperからは離れてしまいますが[ConEmu](https://conemu.github.io/)等にポケモン壁紙を適用することができる[Pokemon-Terminal](https://github.com/LazoCoder/Pokemon-Terminal)というものもあるようなのでそちらも検討するといいかもしれません！

別件で、WindowsのHyperにhyper-pokemonを適用した場合、たまーに描画が残る(？)ような挙動をすることがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78896/e19ac5b6-baf0-50e4-405f-917fc1e15509.png)

色々設定を弄って試していたのですが、opacityの設定が絡むと起きるような気がしています。(要検証)
[このissue](https://github.com/zeit/hyper/issues/1638)とか設定ファイルコメントにもありますが、opacity設定はmacOSのみサポートしているので注意です。