52
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

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

準備

HomebrewHomebrew Cask を使用するので、未インストールの場合は以下を行う。

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にするメリットは以下のようです。

インストール

  • ターミナルにて以下のコマンドを実行
ターミナル
$ brew cask install iterm2

zsh + oh-my-zsh

macの標準コマンドシェルであるbashより、zshのほうが見易くて高機能。さらにzshの設定を管理するフレームワーク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
  • こういう内容が表示されるはず
# 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」を追加して保存
# 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

カスタマイズ

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

テーマを変える

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

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

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

image

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

image

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

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

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

image

ウィンドウを固定 & 半透明化

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

image

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

image

カラーカスタマイズ

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

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

image

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

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

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

参照

52
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?