デザイナーが学ぶコマンドライン環境作り

[最近転職しました。]
(http://blog.smarteducation.co.jp/archives/903)

環境が変わるついでに、エンジニア見習いデザイナーが本格的なエンジニアを目指してコマンドライン環境を調べました。

半分自分用メモです。コマンドの使い方とかではなく、あくまで環境をイイ感じにすることが目的です。

# 準備
[Homebrew](http://brew.sh/) と [Homebrew Cask](http://caskroom.io/) を使用するので、未インストールの場合は以下を行う。

## Commandline Tools for Xcode のインストール
Homebrewをインストールするのに必要。

- ターミナルで以下コマンドを実行

```:ターミナル
$ xcode-select --install
```

- 確認画面が開くので「インストール」をクリック
- 使用許諾契約画面が開くので「同意する」をクリック
- インストール完了

## Homebrew のインストール
- ターミナルで以下コマンドを実行

```:ターミナル
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
- 途中「Press RETURN to continue or ~」と出たら Returnキーを入力。
- 「Password:」と出たらパスワードを入力
- インストール完了後、以下のコマンドを実行し、エラーが出なければ成功

```:ターミナル
$ brew doctor
```

## Homebrew Cask のインストール
- ターミナルで以下コマンドを実行

```:ターミナル
$ brew install caskroom/cask/brew-cask
```

準備完了。環境づくりスタート
---

# iTerm2

Mac標準のターミナルでもいいと思いつつも、形にこだわりたいのはデザイザーだけの性でもないはず。iTerm2は今までの経験した職場でも多くのエンジニアさんが使ってたので、舐められないように素直に真似てみます。

ちなみに、iTerm2にするメリットは以下のようです。

- http://www.iterm2.com/features.html
- ざっくり言うと 
    - ターミナルより多機能
    - 細かくカスタマイズできる

## インストール

- ターミナルにて以下のコマンドを実行

```:ターミナル
$ brew cask install iterm2
```

# zsh + oh-my-zsh
macの標準コマンドシェルであるbashより、zshのほうが見易くて高機能。さらにzshの設定を管理するフレームワーク[oh-my-zsh](https://github.com/robbyrussell/oh-my-zsh)でより簡単に設定できるらしい。

## インストール

### zsh
- 以下のコマンドを実行

```:iTerm2
$ brew install zsh
```

### oh-my-zsh
- 以下のコマンドを実行

```:iTerm2
$ curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh
```

## シェルをzshに切り替える
- 以下コマンドで、管理者権限に切り替え

```:iTerm2
$ su -
```

- 以下コマンドで、「/etc/shells」を開く

```:iTerm2
$ vi /etc/shells
```
- こういう内容が表示されるはず

```vim
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
```

- 最終行に「/usr/local/bin/zsh」を追加して保存

```vim
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
/usr/local/bin/zsh
```

- 以下コマンドで、シェルをzshに切り替え

```:iTerm2
chsh -s usr/local/bin/zsh
```

- iTerm2を立ち上げ直すと、こんな感じになる。（なんかダサい。）

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/33fc9dc8-4f8b-9cca-26cb-99a313d28054.png)


# カスタマイズ

ここからは好み次第。とりあえず個人的に便利そうなものをやってみた。

## テーマを変える
oh-my-zsh には豊富なテーマが含まれており、.zshrcで好きなテーマに変更できる。なんとなく「wedisagree」にしてみた。

> https://github.com/robbyrussell/oh-my-zsh/wiki/Themes

- .zshrc を開く

```:iTerm2
vi ~/.zshrc
```

- 「ZSH_THEME="robbyrussell"」を好みのテーマ名に書き換えて保存

```:iTerm2

ZSH_THEME="wedisagree"

```
- iTerm2を立ち上げ直すと、テーマが変わってる

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/109175cf-6abf-4a40-0eec-578b9ba236e6.png)

## ショートカットキーで表示/非表示

- [iTerm] > [Preferences..] から設定ウィンドウを開く

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/45399a7a-657d-beb2-7b87-c1d50dc932ec.png)

- [Key]タブ > [Hotkey]エリア > [Show/hide iTerm2 with a system-wide hotkey] にチェック

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/86dad19b-8256-d3b8-1b53-67cb08c5acd4.png)

- option + Space キーでiTerm2の表示/非表示が切り替わる

## テキストの太文字表示とアンチエイリアシングを切る

- [iTerm] > [Preferences..] から設定ウィンドウを開く
- [Profile]タブ > [Text]タブをクリック
- 「Draw bold text in bold font」をオフ
- 「Anti-aliased」をオフ

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/f99d9efc-c90b-a560-6929-78d27e406c58.png)

## ウィンドウを固定 & 半透明化
- [iTerm] > [Preferences..] から設定ウィンドウを開く
- [Profile]タブ > [Window]タブをクリック
- [Window Appearance] > [Transprency] で透明度を調整
- [Settings for New Window]でウィンドウを固定
    - [Style: Left of Screen] で 画面左付
    - [Column: ] で画面幅を調整

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/e651f518-ab5d-750e-9886-9ac8a91c0d23.png)

- こうなった。いい感じ。

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/be672e17-ad91-6a10-8da8-5d1f603cd948.png)

## カラーカスタマイズ

### iTerm2 カラー

iTerm2のカラーテーマはいろいろなところで配布されている。
例えば、こことか

> https://github.com/baskerville/iTerm-2-Color-Themes

今回は以下にある「hybrid」にしてみる。

> https://gist.github.com/luan/6362811

- 上記ページから「Hybrid.itermcolors」をダウンロードしてダブルクリック
- iTerm2 の設定ウィンドウにて [Profile]タブ > [Colors]タブをクリック
- [Load Presets...] から「Hybrid」を選択

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/8e174c40-faa4-fa53-38cf-398ff99a1764.png)

- 落ち着いた見易い配色になった

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/c86ded85-393c-bc9f-880e-c55a3fab3c82.png)

### vim カラー
上記の設定だけだと、vimには色がつかないので、vimにもhybrid色を設定する。

- 以下から「hybrid.vim」をダウンロード

> https://github.com/w0ng/vim-hybrid

- ダウンロードした「hybrid.vim」を「~/.vim/colors」に移動

```:iTerm2
mkdir -p ~/.vim/colors
mv hybrid.vim ~/.vim/colors
```

- .vimrc を開く

```:iTerm2
vi ~/.vimrc
```

- 以下のように記入して保存(ついでに行数表示とカーソルライン表示も行う)

```:.vimrc
let g:hybrid_use_iTerm_colors = 1
colorscheme hybrid
syntax on

set number
set cursorline
```

- 以下コマンドで.vimrcの変更を反映する

```:iTerm2
source .vimrc
```

- vimにも色がついて見易い

![image](https://qiita-image-store.s3.amazonaws.com/0/47457/1a5c5684-b6ba-c867-b63e-6ba61522e6d4.png)


## alias
コマンドラインからでもアプリを立ち上げたいときに、aliasにコマンドを登録しておくと便利

### 例えば「atom」でAtomエディタを起動しいとき

- .zshrcに以下を追記

```:.zshrc
alias atom="open -a /opt/homebrew-cask/Caskroom/atom/latest/Atom.app"
```

- .zshrc の変更を反映

```:iTerm
source .zshrc
```

- 以下のように使える。（index.htmlをAtomエディタで開く）

```:iTerm2
atom index.html
```

--- 
 
 
 
とりあえず以上。あとは経験を積みつつ良くしていく。

# 参照
- https://codeiq.jp/magazine/2014/01/5143/
- http://www.lifehacker.jp/2011/11/111116maciterm2.html
- http://qiita.com/mochizukikotaro/items/def041700846adb903fe
- http://qiita.com/harapeko_wktk/items/47aee77e6e7f7800fa03
- http://mollifier.hatenablog.com/entry/20101009/p1