Hyperを使ってイケメンなターミナルに乗り換えよう！【Windows・Mac対応】

Terminalやコマンドプロンプトを使う機会のある方は思いませんか？

なんでこんなにダサいのかと。
ターミナルでコマンドを打っていて私は思っていました。

最近、Node.jsを使うことが多いので、よくターミナルを開いています。

Macの標準ターミナルは白ベースに黒文字、フォントもデフォルト。
Windowsだとフォントが崩れかかったコマンドプロンプト。

これではモチベーションも上がりませんよね、それにSNS映えもしないでしょう。

もっと他人から見てもカッコいいターミナルはないものか…
好きなテーマに変えれて拡張機能もあってフォントも細かく設定できるターミナル…

そんなものあるはず・・・。

ありました。その名も「Hyper」
最近、巷で話題のElectronというWebの技術で作られたソフトウェアです。

私が実際に使っているターミナルはこんな感じ。

初めて使ったときはコレを求めてた！！！って感じでしたね。
テーマや拡張機能、フォントを変えることで自分らしさを出せるターミナルです。

ということで、この記事では私が恋したターミナル「Hyper」を紹介します。
MacだけでなくWindowsのコマンドプロンプトの代わりにも利用することができます。

私が恋したターミナル「Hyper」とは

(出典 : hyper.is)

HyperはHTML/CSS/JSの技術を使って作られたElectron製のターミナルです。
通常のターミナルと同じようにコマンドを実行することができます。
またテーマや拡張機能も豊富で、自由にカスタマイズが可能なオープンソースソフトウェアです。

ただ、ひとつだけ問題がある。初期設定では日本語のファイル名が??????と文字化けします。
これを修正する方法は別の記事で解説しているので参考にしてほしい。
2018年9月19日ターミナル「Hyper」で日本語入力・文字化けを解消する方法！

「Hyper」のインストール方法

HyperはWindows macOS Linuxに対応しています。
ここでは、WindowsとmacOSでのインストールの方法を解説します。

通常のソフトウェアのインストールと変わりませんので、
インストール方法ぐらい知ってるという方は以下のサイトから可能です。

リンク : Hyper.isからダウンロードする

「Hyper」にテーマを導入しよう！

Hyperはテーマを変更することでターミナルの色や背景を変えることができます。
テーマのリストはHyperの公式サイトのStoreに用意されています。
リンク : Hyper Store – Themes

Hyperthemesという非公式のテーマやプラグインが配布されているサイトもあるようです。
ただ最新版での動作保証はできませんので、導入は自己責任でお願いします。

この記事ではHyper Storeにあるテーマのインストール方法を解説します。
ちなみに私が使っているのは「hyper-material-theme」というテーマです。

テーマをインストールするには2つの方法があります。

コマンドでインストールする方法

1つ目の方法はコマンドでインストールする方法です。
この方法にはhyperコマンドを使う必要があるのですが、Homebrewが入っていないと動作しないようです。

既に導入しているという方は、以下のコマンドでインストールすることが可能です。
環境によっては動作しないこともあるようなので、使えない場合は設定プロファイルを書き換える方法を使いましょう。

hyper i theme-name

各テーマのインストールコマンドは右下のInstallボタンを押せば表示されます。

コマンドをコピーしてターミナルに貼り付ければダウンロードが開始されます。
インストールが終わるとテーマが適用されます。もし適用されない場合は、Hyperを再起動してみてください。

インストールがうまくいかない場合は、使っているHyperのバージョンに対応していない可能性があります。

設定プロファイルからインストールする方法

書き換えると言ってもそんなに難しいことではありません、テーマの名前を追記するだけです。
メモ帳などで開くと予期せぬトラブルが起きる可能性があるので、VSCodeやSublime Textなどで開くことをおすすめします。

Windows、Macでの設定プロファイルのhyper.jsを開く方法を解説します。

Windowsで開く方法

Windowsでhyper.jsを開くには以下の手順を行ってください。

Macで開く方法

Macでhyper.jsを開くには以下の手順を行ってください。

開けましたか？
開けたら、次に設定プロファイルのどこに追記すればいいのかを解説します。
追記するのはインストールコマンドのhyper -iの後ろにあるテーマの名前です。

plugins: ["theme-name"],

hyper.jsにあるplugins: []の中に入れたいテーマの名前を追記しましょう。
”(ダブルクォーテーション)で囲むのを忘れないように注意してください。

追記できたらファイルを保存してHyperを再起動しましょう。
テーマが無事読み込まれたら成功です。

ついでに拡張機能も入れてみる？

Hyperは拡張機能もインストールすることができてしまう優れものなんです。
拡張機能を入れるとディレクトリをTabで補完、ステータスを表示、ということが可能になります。

拡張機能のリストもHyperの公式サイトに用意されています。
リンク : Hyper Store – Plugins

拡張機能もテーマと同じようにhyper.jsに名前を追加するだけで導入できます。

私が使っているターミナル下にステータスを表示する拡張機能はhyper-statuslineというものです。

これはHyper Storeには載っていないのですが、せっかくなのでこの拡張機能を導入する方法を紹介したいと思います。
非公式の場合はコマンドでのインストールには対応していません。
なので先程、テーマのインストール方法で紹介したhyper.jsに追記する方法を使います。

hyper.jsのpluginsに2つ以上のテーマや拡張機能を追加する場合は、追記の仕方が変わってきます。
2つ以上導入するときは、前の文字列の後ろに,と半角スペースを入れる必要があります。

plugins: ["plugin-name"],

plugins: ["theme-name", "plugin-name"],

既になにかを導入していたらその名前がtheme-nameに入ってると思います。

hyper-statuslineを導入する場合は、plugin-nameをhyper-statuslineに変更して保存してください。

これで拡張機能のインストールは完了です。
拡張機能によっては最新バージョンで動作しないものもありました。

まとめ

今回は、「Hyper」というターミナルアプリを紹介しました。
素敵なターミナル、あなたも是非使ってみてくださいね。
テーマはCSSで、拡張機能はJavaScriptやReactで開発することもできます。

君もオリジナルのターミナルでコマンド打とぜ！！！

最後までお読みいただきありがとうございました。