Mac
js
Design
hyper

MACのハイパー(hyper)ターミナルの背景を半透明にする

MACbookpro(HighSierra)でターミナルを利用しているのですが、MAC既存のターミナルは味気ないので、ハイパー(hyper)のターミナルを利用しています。

Hyperのダウンロードはこちらから
hyper

既存のターミナルは標準で背景を半透明にしたりできますが、hyperはpluginが必要になるのでこちらを紹介したいと思います。

1.pluginの追加

以下のpluginをhyperに追加します。

module.exports = {
  plugins: [
    'hyperterm-material',
    'hyper-transparent-bg',
  ],
};

ユーザーのカレントディレクトリにある.hyper.jsというファイルのpluginの所に追記します。
以下plugin部を抜粋

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

ファイルを保存すると自動でpluginが適応されます。
ソースはこちらです。
hyper-transparent-bg

2.透過度、ぼかしの設定

デフォルト設定だと透明度が高く、けっこう透けてしまっていたので設定を変更しました。
pluginインストール後には以下のファイルが作成されているので、こちらを編集します。

.hyper_plugins/node_modules/hyper-transparent-bg/index.js

2.1デフォルト設定

  • Default: { WebkitFilter: 'blur(5px)', opacity: '0.3' }
    • blur=ぼかし度
    • opacity=透過度(0が透過無し)

2.2自分の設定

// Default background effects
let transparentBgConfig = {
  WebkitFilter: 'blur(7px)',
  opacity: '0.25',
};

数値はお好みで設定してもらえたらと思います。