FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

Solarizedで目に優しいターミナル

こんにちは。エンジニア2年目の大北です!

最近同期がtigを導入していたので、私も入れてみました。 こんな感じです。 f:id:sachipapi423:20170616131239p:plain

tigの機能は素晴らしくて、1行だけgit addしたり、addしたやつを戻したりなどが自由にできるんですが、かなりカラフルで目がチカチカしてきます。。

そこでターミナルの色を綺麗に整えてくれるSolarizedを入れてみることにしました!

Solarizedのポイント

1. 優しいコントラスト

Solarizedの公式サイトによると普通のディスプレイはコントラストが強すぎるらしいです。

晴れた夏の日、私は外で読書をするのが好きだ。太陽が照りつけるところではなく、木の下の影ができたところが良い。影が映った紙にくっきりと文字が映える。もしそのコントラストを測ったとしたら、あなたのディスプレイの白い背景と黒い文字のそれより、ずっと低いだろう…(意訳)

2. 美しいアクセントカラー

コントラストを低く設定しているとはいえ、アクセントカラー(8色)はパキっとしてて綺麗ですね◎ f:id:sachipapi423:20170616133045p:plain

3. LightとDarkどちらを使っても色が変わらない

普段は黒背景だけど、ときどき白背景にしたくなる…Solarizedは文字にグレーを使っているのでコンテンツの色はそのままに背景色のみを変えられます。白背景にするために文字を黒にする、などの作業から開放されますね(やったことはないですが) f:id:sachipapi423:20170616133149p:plain

ダウンロード方法

ではダウンロードしていきます!zipかgit cloneでダウンロードできますが、gitをおすすめします。

zip

公式ページのClick Here To Download Latest Versionからダウンロードできます。

※基本はこれを解凍すれば設定できますが、私のターミナル(Mac OS Sierra)はこれで設定できませんでした。

git clone

gitでは各エディター用のリポジトリと、全てのエディターをまとめてダウンロードできるリポジトリがあります。

ターミナル

ターミナルにSolarizedを入れるには、事前にいくつかインストールする必要があるのですが、これをcloneすると一発で入れられますよ!

git clone https://github.com/tomislav/osx-terminal.app-colors-solarized
Vim
git clone https://github.com/altercation/vim-colors-solarized.git
全てのエディター 

凄く重たいのでおすすめしません。

git clone git://github.com/altercation/solarized.git

設定方法

私が設定した、ターミナル・Vim・InteliJの設定方法を紹介します。

ターミナル

ターミナルの環境設定の歯車マークからsolarizedを読み込みます。 f:id:sachipapi423:20170616175401p:plain

Vim

Vimほぼ使ったことないんですが、、この機会に設定をしてみました。 vim/colorsディレクトリを作ってsolarizedのディレクトリを移動させます。

 $ cd  vim-colors-solarized
 $ mkdir -p ~/.vim/colors/
 $ cp vim-colors-solarized/colors/solarized.vim ~/.vim/colors/

~/.vimrcに書き込みます。(私はこれまで無かったので新しく作りました)

syntax enable
set background=dark "デフォルトのbackgroundのカラーテーマを設定。lightの場合はlight
colorscheme solarized
InteliJ

Preferences > Colors & FontsからSolarizedを選択します。

参考サイト qiita.com

入れてみるとこんな感じになりました

vim

これまで何の設定もしてなかったので、ハイライトが効いて断然見やすくなりました!

f:id:sachipapi423:20170616174652p:plain

git

gitは前から色は付いてましたが、コントラストが減って目に優しくなりました。

f:id:sachipapi423:20170616175921p:plain

tig

相変わらずカラフルですが、これなら目が痛くならなさそうです!

f:id:sachipapi423:20170616174607p:plain

InteliJ

わたしのInteliJが何か設定しているのか、あまり見やすくなかったです。。InteliJ謹製のカラースキーマが十分素敵なのでDarculaに戻しました。

f:id:sachipapi423:20170616175010p:plain

プロンプト表示

プロンプト表示の色を変えている人は、Solarizedの色を新しく設定する必要があります。

プロンプト表示の色を表す部分は、

\[\033[XXXXm\]

なので、XXXXに下記のカラーコードを参考に好きな色を入れてくださいね。

SolarizedのANSIカラーコード f:id:sachipapi423:20170618225538p:plain

※ちなみに、$マークの色設定は入力するテキストの色になります。下記のようにSolarizedのテキストの色と同じにしないと、1行目とそれ以降の色が違う、なんてことになります。

\[\033[1;32m\]$

設定するとこんな感じになりました! f:id:sachipapi423:20170618232134p:plain

感想

Solarizedを入れてみて、ターミナルに愛着が湧いてきました。もっともっと色々な設定ができるようなので、使いやすくしていきたいです!