2018夏のweb制作無料相談会(名古屋当日)
2018夏のweb制作無料相談会(名古屋当日)
2018.02.28

愛着が湧く!HyperTermで作るMYターミナル!

はやち

どうもです。はやちですよ。
今回はjs、html、cssで作られたHyperTermのカスタマイズをご紹介いたします。

導入方法

HyperTermのサイトから直接DLしてくるか、Homebrew Cask経由からコマンドでDLすることも可能です。

brew update
brew cask install hyper

Windowsの方はchocolatey経由でDLすることも可能です。

choco install hyper

カスタマイズ

デフォルトがこのような感じです。こっからカスタマイズをしていきます。

HyperTermカスタマイズスクリーンショット1

メニューhyperの中のPreferenceから呼び出すか、ショートカットキー⌘,で.hyperterm.jsのJSONファイルからカスタマイズしていきます。

設定プロパティ

以下のことが設定できます。

プロパティ 説明
fontSize 表示するフォントサイズ
fontFamily オプションのフォールで使用するフォントの設定
uiFontFamily UIに使用するフォントファミリーの設定
cursorColor ターミナルのcursorの色
cursorShape UNDERLINEで_, BLOCKで █ にカーロルの変更が可能
cursorBlink カーソルの点滅
foregroundColor テキストの本文のカラー
backgroundColor 背景の色と不透明度の設定
borderColor メインウィンドウの境界線とタブバーの色
css メインウィンドウに含めるカスタムCSS
termCSS 端末ウィンドウのカスタムCSS
padding パディングの設定
colors デフォルトのカラー設定
shell Hyperが新しいセッションを開始したときに実行されるカスタムシェルへのパス
npmRegistry プラグインのインストール時に使用するnpmレジストリURLを上書きする
windowSize 新しいウィンドウのピクセル単位のデフォルトの幅/高さ(例:[540,380]
copyOnSelect trueの場合、選択したテキストが自動的にクリップボードにコピーされます
bell システムベル構成
bellSoundURL “bell”が “SOUND”に設定されている場合にのみ使用するベル音のURL
modifierKeys メタキーとして動作する修飾キーの動作を変更する
showHamburgerMenu ハンバーガーメニューの表示を変更します
showWindowControls ウィンドウコントロールの位置/表示を変更します

これに基づいて、以下の様にカスタマイズしてみました。cssでも編集ができるので背景のimageも問題なく設定することができます。

module.exports = {
  config: {
    updateChannel: 'stable',
    fontSize: <span class="number">12</span>,
    fontFamily: 'Menlo, <span class="string">"DejaVu Sans Mono"</span>, Consolas, <span class="string">"Lucida Console"</span>, monospace',
    cursorColor: '<span class="comment">#7294c2',</span>
    cursorShape: 'BLOCK',
    cursorBlink: <span class="constant">false</span>,
    foregroundColor: '<span class="comment">#585d61',</span>
    backgroundColor: '<span class="comment">#dfecf5',</span>
    borderColor: '<span class="comment">#fff',</span>
    css: '
    .terms_terms{
            background:url(<span class="type">file</span>:path/hayachi.png) no-<span class="keyword">repeat</span> bottom right;background-size:<span class="number">222</span>px auto;
        }
    '
    //省略
  }
};

できたターミナルがこちらになります。

HyperTermカスタマイズスクリーンショット2

themeとプラグインの紹介

JSONで設定する以外にもさまざまなプラグインがあります。

打つとアニメーションするプラグイン
https://github.com/zeit/hyperpower

ポケモンのテーマの配布
https://github.com/klauscfhq/hyper-pokemon

ボーダーをグラデーションにするプラグイン
https://www.npmjs.com/package/hyperborder

hyperからグーグル検索が出来るプラグイン
https://www.npmjs.com/package/hypergoogle

hyperの画面上でyoutubeを再生できるプラグイン
https://github.com/bnb/awesome-hyper

まとめ

いかがでしたか?黒い画面のターミナルよりも、カスタマイズした方が愛着が湧きますね。おもしろそうなプラグインもあるので、ちょいちょい入れていじってみようかと思います。ではでは。