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

7691 ワード
Terminal hyper Windows Windows10 Windows テキストリンク

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

以前「Windows Terminal」について記事にしました。いいターミナルアプリだとは思うのですが、Preview版ということもありIMEが動作しないという不具合が8月から続いています。そこで他にWindowsで動作するターミナルアプリにいいものがないか探したところ「Hyper」というものを見つけました。しかもHyperには「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/

早速インストール

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

もしChocolateyを使用している方であれば、GitHubのReadmeにある通り、

choco install hyper

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

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

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

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

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

%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',
  ],
  .
  .

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

どうしてフシギダネ？

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

積み残し

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

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

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

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等にポケモン壁紙を適用することができるPokemon-Terminalというものもあるようなのでそちらも検討するといいかもしれません！

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

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