どうもです。はやちですよ。
今回はjs、html、cssで作られたHyperTermのカスタマイズをご紹介いたします。
導入方法
HyperTermのサイトから直接DLしてくるか、Homebrew Cask経由からコマンドでDLすることも可能です。
brew update
brew cask install hyperWindowsの方はchocolatey経由でDLすることも可能です。
choco install hyperカスタマイズ
デフォルトがこのような感じです。こっからカスタマイズをしていきます。
メニュー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;
}
'
//省略
}
};できたターミナルがこちらになります。
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
まとめ
いかがでしたか？黒い画面のターミナルよりも、カスタマイズした方が愛着が湧きますね。おもしろそうなプラグインもあるので、ちょいちょい入れていじってみようかと思います。ではでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
