黒い画面から脱却!ターミナル Hyper をポケモンデザインにする

よこのじ(@yokonoji_work)です。

プログラミングをやっているとコマンドを入力する黒い画面は避けられないのですが、この黒い画面はできれば見たくない・・・。

そこで、Hyperというターミナルをおすすめしたいと思います。

Hyperは様々な拡張機能が使えるのですが、その中に Hyper Pokemon という画面のデザインを変更する拡張機能があります。

今回はその設定と、さらに画面を賑やかにするHyperpowerを紹介します。

ターミナル本体 Hyper の導入

Hyper公式サイト:https://hyper.is/

HyperはHTML, CSS, JavaScriptで作られているんだそうです。これにより、デザインなどを自由に変更できますので、拡張機能も様々なものが作成されています。

それでは、Hyperの導入を進めていきましょう。

まず、Installationの部分でお使いのOS環境に合ったものをダウンロードしてインストールしてください。

hyperをインストール

インストールできたら、このような画面が表示されます。標準のコマンド プロンプトよりはおしゃれな感じですが、嫌な黒い画面です。

hyperターミナル

ポケモンデザインにする拡張機能 Hyper Pokemon の導入

Hyper PokemonのGitHub:https://github.com/klaussinani/hyper-pokemon

それでは、画面をポケモンデザインにしてみます。

Hyperのメニューより、Edit → Preferences… と進むと設定ファイルが開かれます。

Hyperの設定

そのファイルの中でかなり下側に plugins: [] がありますので、次のように記述します。

plugins: ['hyper-pokemon']

これで、Hyper Pokemonをインストールしてくれます。

次にファイルの上の方にある、config: { の直後に次の記述を行ってください(config: { }の中ならどこでもOKです)。

pokemon: 'pikachu',
unibody: 'false',
poketab: 'false',
pokemonSyntax: 'dark',
pokecursor: 'true',

ここでは pikachu と指定していますので、ピカチュウデザインになっています。デザインが変わらない場合は、一度Hyperを閉じて再起動してください。

hyper-pikachu

用意されているデザインは、初代151匹とミズゴロウ+Missingno(バグ画面?)です。デザインサンプルとネームリストは、次のページで確認できますよ。

https://klaussinani.github.io/hyper-pokemon/

これでターミナルが使いたくなるデザインになりました。

うるさいエフェクトを追加する拡張機能 Hyperpower の導入

HyperpowerのGitHub:https://github.com/zeit/hyperpower

このプラグインは、入力をするたびにクラッカー?花火?のようなエフェクトが出るものです。

hyper power

これで退屈なターミナル画面からは、おさらばです。

Hyperpower は、plugins: [] の部分に’hyperpower’を追加するだけで使用できます。

plugins: ['hyper-pokemon','hyperpower'],

複数のプラグインを扱う場合はカンマで区切って記述します。

 

Hyper Pokemon や Hyperpower 以外にもプラグインやテーマは公式サイトで紹介されていますので、お気に入りを見つけてください。