1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WindowsでMacのターミナルを再現する方法 – Hyper.jsを使ったカスタマイズ手順

Posted at

こんにちは。
WindowsのターミナルをMacのターミナルぽくしたかったので、手順をまとめます。

最終的にはこんな感じになります。
image.png

それではいってみよう!

動機

Windowsのコマンドプロンプト or Powershell使いづらい。。。
と思ったのがきっかけです。

転職を機に業務用PCがMacになったのですが、
やっぱり既存のターミナルがLinuxベースだととても使いやすいと改めて感じました。

使いやすいと感じた理由は以下の通りです。

  • Windowsのターミナルの場合、コマンドプロンプト or Powershellのコマンドを別途覚える必要がある
    • Powershell側は、Linuxコマンドに近いエイリアスがあるもののオプションはまるで違うのでいちいち調べる必要がある。
  • 結局、開発は、Dockerで環境作ることになることが多いので、Linuxのコマンドを覚える必要がある
  • 何よりLinuxコマンドは、使いやすいものが多い。
    • 最近は、Rust製のLinuxコマンドも出てきて、さらに使いやすくなってきた。

ということで、WindowsのターミナルをMacっぽくしてみたいと思います。

Hyper.jsのインストール

まずは公式サイトからhyperをダウンロードしてきて、インストールします。
https://hyper.is/

Hyper.jsは、Electronベースのターミナルアプリケーションです。
高度な機能を備えており、コマンドラインツールを使用して、Linux、macOS、Windowsなどのプラットフォームで簡単にコマンドを実行できます。
豊富なテーマとプラグインを提供し、非常にカスタマイズ性が高く、高速なパフォーマンスを実現します。

今回はlinuxコマンドが使いたいので、wslを利用しますが、コマンドプロンプトやPowershellでもHyper.jsは利用できます。

この後、いろいろ設定をしていきますが、とりあえずどんな感じになるか試したい方や いちいち設定するのは面倒という方は、
githubに設定ファイルおいてるので、そちらをお使いください。
https://github.com/nogu3/settingsForWindows/tree/main/hyper

pluginの追加

次にHyperを使いやすくするため、pluginを入れていきます。
まずはテーマをMacぽくするためのプラグインを入れます。

入れるテーマは、以下の通りです。

hyper-iceberg
ターミナルをより見やすくカスタマイズできるようになります。
コマンドを入力するときに表示されるテーマを変更したり、ターミナルの背景色を変更したり、フォントを変更したりなどができます。
公式サイト:https://github.com/cocopon/hyper-iceberg

hyper-opacity
Hyper.jsで使用できるプラグインで、ターミナルの背景の透明度を変更することができます。
背景の透明度を調整することで、ターミナルの見た目をカスタマイズすることができます。
参考サイト:https://matcha-choco010.net/2018/07/01/wsl-hyper-terminal/

設定ファイルは、以下パス配下の.hyper.jsのことを指します。
エクスプローラー(Windows + e)で以下パスを開いて、任意のエディタでhyper.jsを開いてください。

%APPDATA%\Hyper

具体的な設定値は、以下の通り

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 起動時のシェルをwslに変更する
    shell: 'c:\\Windows\\System32\\wsl.exe',

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // hyper-opacityの設定
    opacity: {
      focus: 0.9,
      blur: 0.65,
    }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // pluginのinstall
  plugins: [
    // iceberg theme
    'hyper-iceberg',
    // half transparent plugin
    'hyper-opacity'
  ],

wslの導入

最近のmacはデフォルトでzshが使えます。
windowsでは、コマンドプロンプト or Powershellなので、wslを導入してよりMacに近づけます。

wslの仕組みについては、以下の漫画がとてもわかりやすかったです。
windows側のディレクトリまでwslでいけるんか?やwslのインストールなどわかるので、一読をおすすめします。
https://system-admin-girl.com/comic/begins/sp-wsl/

ただ、自分のWindowsバージョンでは、Windows Subsystem for Linuxがありませんでした。
調べたところ、 それはバージョンが新しいためで、今はLinux用Windowsサブシステムという名称になっているようです。
※私の場合、デフォルトでLinux用WindowsサブシステムがONになっていました。
https://qiita.com/taraka/items/0b5919ac8ee02d81f7ff

wsl上でディレクトリがめちゃくちゃみづらい

インストールしたてほやほやの状態だとlsしてもディレクトリ部分がとても見づらいです。

そのため、以下サイトを参考に設定することで、ディレクトリ部分にハイライトされず見やすくなります。
https://arakan-pgm-ai.hatenablog.com/entry/2022/11/07/000000

キーバインドの変更

windowsのhyperでは、コピペのショートカットが通常のコピペ+shiftのキーマップになっています。

copy -> ctrl + shift + c
paste -> ctrl + shift + v

通常のctrl+cには、コマンドの中断(break)が鎮座しているので、ctrl + .(ドット) に変更します。
(macのターミナルでは、ctrl+cだけではなく、ctrl + .も使えるので、そちらに合わせます)

いちいちshiftを使うのは、不便なので、設定ファイルに以下のようなキーマップ設定を入れます

~~~~~~~~~

  keymaps: {
    "editor:copy": "ctrl+c",
    "editor:paste": "ctrl+v",
    "editor:break": "ctrl+.",
  },
};

他のキーマップを変更したい場合、Windows標準のキーマップは以下に定義されているので、参考に定義してみるとよいかと思います。
ただし、同じキーマップを別のコマンドに割り当てるとうまくいかないようなので、そのあたりは注意してください。
(競合したコマンドをほぼ使わないのであれば、絶対つかわないようなキーマップに割り当ててしまうのも一つの手です。)
https://github.com/vercel/hyper/blob/master/app/keymaps/win32.json

まとめ

いかがでしたでしょうか?
個人的には、割と満足のいく出来になったかなと思います。

開発に使うソフトが自分好みにカスタマイズされていると使うたびにテンションがあがるので、
早めに時間をつくって、カスタマイズしてみることをおすすめします!

ちょっとだけ生産性もあがるかもですね。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?