0から始める Mac 環境構築

会社で設備更新があり、移行アシスタントを使わずに0から環境構築をしてみる事に。


**システム領域になるべく手を入れないようにする** 、をコンセプトに進めました。

フロントエンドエンジニア・マークアップエンジニア・Webデザイナー向けです。


基本的には備忘録なので全ての方がこの通りに進めて問題ないか？と言われると分かりかねます。

# システム環境設定
## 言語を英語に変更

日本語の方が圧倒的に使いやすいとは思うものの、英語に触れる機会を強制的に作る意味も込めて英語化する。

```
システム環境設定 > 言語と地域
```

**English** を最上部にドラッグ・アンド・ドロップ & リスタート

## フルキーボードアクセスを有効にする

`Tab`キーでウィンドウとダイアログの全てのボタン等のコントロールにアクセスできるようにする

```
システム環境設定 > キーボード > ショートカット
```

**すべてのコントロール** をクリック

## マウス

### 右クリックを有効に

`option`押してクリックというのが不自由過ぎるので、右クリックを有効にする。

にわかマカーでスイマセン。

```
システム環境設定 > マウス
```

マウス右側のセレクトを **副ボタン** に

### スクロール方向

細かい作業を行う時に逆だとシンドい。

`Scroll direction : Natural`のチェックを外す

## ファイアーウォール

```
システム環境設定 > セキュリティとプライバシー
```

**ファイアウォールを入にする** をクリック

## Dock

```
システム環境設定 > Dock
```

**拡大** をクリック、スライダーを **最大** へ
**位置** : 左

## キーボード

```
システム環境設定 > Keyboard
```

### Shortcuts

Totalfinderのタブの操作感を、Chromeに合わせたいので下記を追加

Application : **finder.app**

**Select Next Tab** : `option + command + →`
**Select Next Tab** : `option + command + ←`

### Caps Lock をオフに

`Modifier keys`ボタンクリック、 Caps Lock Key : **No Action** に

## Mission Control

```
システム環境設定 > Mission Control
```

普段デュアルディスプレイ環境だけど、現状シングルで、複数デスクトップを使う必要性があるので設定する。

`Dashboard を操作スペースとして表示`のチェックを外す

### アニメーションを切る

```bash
$ defaults write com.apple.dock expose-animation-duration -int 0
$ killall Dock
```

戻す時は

```bash
$ defaults delete com.apple.dock expose-animation-duration
$ killall Dock
```


# アプリケーションインストール

最初は[Boxen](https://boxen.github.com/)使おうと思ったけど、どうやら時代は[Homebrew Cask](http://caskroom.io/) + Brewfile らしいので、後者を採用。

## Homebrew Cask

デフォルトのインストールパスが微妙なので、まず`.bash_profile`に設定を書き込む。

```bash:.bash_profile
export HOMEBREW_CASK_OPTS="--appdir=/Applications --caskroom=/usr/local/Caskroom"
```

### homebrew-cask を fork & git clone

デフォルトでもメジャーなアプリケーションは用意されているけど、独自にインストールしたいアプリケーションがあった場合、別途設定ファイルを作成する必要があるので、リポジトリをfork / clone しておく。

## Brewfile

自分の`Brewfile`は[こんな感じ](https://github.com/ysakmrkm/dotfiles/blob/master/homebrew/Brewfile)

Homebrewの実行したい各種コマンドを列挙していくだけ。

`Brewfile`のあるフォルダまで移動

```bash
$ brew bundle
```

## App Store
App Storeにあるアプリケーションは、Homebrew Caskを使わないでインストールする。
（まれにどちらにも存在するアプリケーションがある為）

# アプリケーション設定

## Vim / MacVim

`vimrc` `gvimrc` etc は[ここ](https://github.com/ysakmrkm/dotfiles/tree/master/vim)に

### 濁点・半濁点について

濁点・半濁点付き文字のせいで表示崩れが起きる場合

```
Preferences > Advanced
```

**Use Core Text renderer** のチェックを外す

GVimについては、これで対応可能だけど、CUIでの解決方法はまだ分かっていない。

## iTerm2
### カラースキーマ

molokai風 https://github.com/larssmit/iterm2-getafe

### フォント
#### Source Code Pro

Homeberw Cask経由でインストール。

### Powerline

ターミナルがカッコよくないとテンションが上がらないので入れる。

#### インストール

```bash
$ pip install pygit2
$ pip install mercurial
$ pip install psutil
$ pip install i3-py
$ pip install git+git://github.com/Lokaltog/powerline
```

#### 設定

`~/.tmux.conf` に下記を追加

```bash
source /usr/local/lib/python2.7/site-packages/powerline/bindings/tmux/powerline.conf
```

## KeyRemap4MacBook
### Key Repeat
```
Basic Configurations > Key Repeat
```

Delay Until Repeat : **0** ms
Key Repeat : **25** ms

暫定なので、気持ちいい所に落ち着いたら変更予定

## Totalfinder

### Menues

**Hide icon in Menu Bar** にチェック

### Visor

**Activation:** `option + v`
**Animation:** なし

### File Browser

**Show System Files** にチェック

### Tabs

**Use narrow Tabs Bar** にチェック

## Divvy

### Shortcuts

全て **Global Shortcut** にチェック

**全画面** : `option + 1`
**左半分** : `option + 2`
**右半分** : `option + 3`
**上半分** : `option + 4`
**下半分** : `option + 5`

## 一部アプリについて

シンボリックリンクでは正常に動作しない物も中にはあって、
**Applicationsフォルダに移動させる** 必要があるものについては、
移動後、`cask install hoge --force` で、2重に存在させている。
あまりにも同じ様なアプリが増えてきたら方針を変える予定。

# 開発環境設定

## Apache

### 自動起動
**Mavericks(Mac OS X 10.9)**から、 **Web共有** の項目が無くなったので、起動時にApacheを起動させる。

```bash
$ sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist
```
### 設定

```bash
$ cp /etc/apache2/httpd.conf /etc/apache2/httpd.conf.orig
$ sudo vim /etc/apache2/httpd.conf
```

#### localhost/~[username]/ 有効化

**DocumentRootの変更が必要なければやらなくていいかも**

`~/Sites` 作成

`private/etc/apache2/users/` 以下に `[username].conf` として以下を記述

```apache
<Directory "/Users/[username]/Sites/">
    Options Indexes
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>
```

#### DocumentRoot 変更

```diff:httpd.conf
170行目あたり
+#DocumentRoot "/Library/WebServer/Documents"
+DocumentRoot "/Users/[username]/Sites"

198行目あたり
+#<Directory "/Library/WebServer/Documents">
+<Directory "/Users/[username]/Sites">
```

#### Perl / PHP 有効化

```diff:httpd.conf
LoadModule alias_module libexec/apache2/mod_alias.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
-#LoadModule perl_module libexec/apache2/mod_perl.so
+LoadModule perl_module libexec/apache2/mod_perl.so
-#LoadModule php5_module libexec/apache2/libphp5.so
+LoadModule php5_module libexec/apache2/libphp5.so
LoadModule hfs_apple_module libexec/apache2/mod_hfs_apple.so

<IfModule !mpm_netware_module>
```

#### CGIを有効に

`http://localhost/cgi-bin/`へのアクセスを`~/Sites/cgi-bin/`へ向ける

```diff:httpd.conf
334行目あたり

    # client.  The same rules about trailing "/" apply to ScriptAlias
    # directives as to Alias.
    #
+    #ScriptAliasMatch ^/cgi-bin/((?!(?i:webobjects)).*$) "/Library/WebServer/CGI-Executables/$1"
+    ScriptAliasMatch ^/cgi-bin/((?!(?i:webobjects)).*$) "/Users/[username]/Sites/cgi-bin/$1"
```

`~/Sites/`以下全体でCGIが有効になるようにする

```diff:/users/[username].conf
<Directory "/Users/[username]/Sites/">
+    AddHandler cgi-script .cgi
-    Options Indexes MultiViews
+    Options Indexes MultiViews ExecCGI
-    AllowOverride None
+    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
```

#### シンボリックリンクを有効に

`~/Sites/`以下全体で有効になるようにする

```diff:/users/[username].conf
<Directory "/Users/[username]/Sites/">
    AddHandler cgi-script .cgi
-    Options Indexes MultiViews ExecCGI
+    Options Indexes MultiViews ExecCGI FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
```

#### `$_SERVER['SCRIPT_URL']`を有効に

```diff:/users/[username].conf
</Directory>
+
+<VirtualHost localhost>
+    RewriteEngine On
+</VirtualHost>
+
+<VirtualHost [ip address]>
+    RewriteEngine On
+</VirtualHost>
```
## PHP

```bash
$ cp /etc/php.ini.default /etc/php.ini
$ sudo vim /etc/php.ini
```

タイムゾーンの設定と、MySQLの設定。

MySQLのソケットの場所は下記コマンドで確認

```bash
$ mysql_config --socket
```

```diff:php.ini
[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
;date.timezone =
+date.timezone = Asia/Tokyo

; http://php.net/date.default-latitude
;date.default_latitude = 31.7667

...
; Default socket name for local MySQL connects.  If empty, uses the built-in
; MySQL defaults.
; http://php.net/pdo_mysql.default-socket
+;pdo_mysql.default_socket=
+pdo_mysql.default_socket= /tmp/mysql.sock

[Phar]
; http://php.net/phar.readonly

...

; Default socket name for local MySQL connects.  If empty, uses the built-in
; MySQL defaults.
; http://php.net/mysql.default-socket
+;mysql.default_socket =
+mysql.default_socket = /tmp/mysql.sock

; Default host for mysql_connect() (doesn't apply in safe mode).
; http://php.net/mysql.default-host

...

; Default socket name for local MySQL connects.  If empty, uses the built-in
; MySQL defaults.
; http://php.net/mysqli.default-socket
+;mysqli.default_socket =
+mysqli.default_socket = /tmp/mysql.sock

; Default host for mysql_connect() (doesn't apply in safe mode).
; http://php.net/mysqli.default-host
```

ファイルアップロードサイズを大きくする

## MySQL

Homebrew でインストール済み

```bash
$ ln -sfv /usr/local/opt/mysql/*.plist ~/Library/LaunchAgents
```

起動時にMySQLを起動させる。

```bash
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist
```

ダブルクリックして、`KeepAlive`を **NO** に

設定ファイルコピー

```bash
$ cp /usr/local/Cellar/mysql/5.6.17_1/my.cnf ~/.my.cnf
```

`mysql.server start` してもエラーが出る場合は、下記コマンドを試してみる。（[OSX Lion, Homebrewで入れたmysqlが起動しない夜](http://d.hatena.ne.jp/nistetsurooy/20120628/1340896989)）

```bash
$ chown [ユーザ名] /usr/local/var/mysql/[PC名].local.err
```

`root`のパスワード設定

```bash
$ /usr/local/Cellar/mysql/[version]/bin/mysqladmin -u root password 'new-password'
```

## phpmyadmin

```bash
$ brew tap josegonzalez/homebrew-php 
$ brew tap homebrew/dupes
$ brew install phpmyadmin
$ cd /usr/local/Cellar/phpmyadmin/[version]/share/phpmyadmin/
$ cp config.sample.inc.php config.inc.php
```

```diff:config.inc.php
17行目あたり
 * This is needed for cookie based authentication to encrypt password in
 * cookie
 */
+//$cfg['blowfish_secret'] = 'a8b7c6d'; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */
+$cfg['blowfish_secret'] = '[任意の文字列]'; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

32行目あたり
+//$cfg['Servers'][$i]['host'] = 'localhost';
+$cfg['Servers'][$i]['host'] = '127.0.0.1';

47行目あたり
-// $cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
+ $cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';

58行あたり
-// $cfg['Servers'][$i]['userconfig'] = 'pma__userconfig';
+ $cfg['Servers'][$i]['userconfig'] = 'pma__userconfig';
```

`http://localhost/phpmyadmin/`にアクセス・ログイン

**Username** : `root`
**Password** : MySQLの`root`のパスワード

### エラーを取り除く

`create_tables.sql`インポート

`/usr/local/Cellar/phpmyadmin/[version]/share/phpmyadmin/examples/create_tables.sql`

をインポートする。

`mcrypt`インストール
`autoconf`も必要なので同時にインストール

```bash
$ brew install mcrypt
$ brew install autoconf
```

`PHP`のバージョン確認

```bash
$ php -v
PHP 5.4.24 (cli) (built: Jan 19 2014 21:32:15)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies
```

[ここ](http://www.php.net/releases/)から該当バージョンのソースをダウンロード・展開

```bash
$ cd ~/Downloads/php-5.4.24/ext/mcrypt
$ sudo phpize
$ ./configure
$ sudo make install
```

`/usr/lib/php/extensions/no-debug-non-zts-20100525/mcrypt.so`が生成されていることを確認。
（`extensions`以下フォルダ名は変わる場合あり）

```diff:php.ini
737行目あたり
; disabled on them.
; http://php.net/enable-dl
+;enable_dl = Off
+enable_dl = On

1860行目あたり
+extension_dir = "/usr/lib/php/extensions/no-debug-non-zts-20100525/"
+extension = mcrypt.so
```

バックアップした`sql`ファイルのサイズが大きい場合はアップロードできるファイルサイズの上限を広げる。

とりあえず`memory_limit`の値にすべて合わせる。

```diff:php.ini
673行目あたり
; is disabled through enable_post_data_reading.
; http://php.net/post-max-size
+;post_max_size = 8M
+post_max_size = 128M

801行目あたり
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
+;upload_max_filesize = 2M
+upload_max_filesize = 128M
```

## MovableType

[公式ドキュメント](http://www.movabletype.jp/documentation/)参照してインストール

### `DBD::mysql`が無いとエラーが出る場合
[Mac OS XにDBD::mysqlをインストール](http://shibayu36.hatenablog.com/entry/20100605/1275754485)

```bash
$ brew install cpanminus
$ cpanm DBD:mysql
--> Working on DBD::mysql
エラー発生
$ cpanm DBD::mysql --force
--> Working on DBD::mysql
エラー発生
$ sudo cpanm DBD::mysql
Password:
--> Working on DBD::mysql
エラー発生
$ cd .cpanm/latest-build/DBD*
perl Makefile.PL --testuser='root' --testpassword='[password]'
エラー発生
$ sudo perl Makefile.PL --testuser='root' --testpassword='[password]'
$ make
エラー発生
$ sudo make
$ sudo make test
$ sudo make install
```

## Wordpress

こちらも[公式ドキュメント](http://wpdocs.sourceforge.jp/WordPress_%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)参照してインストール

## Sass

```bash
$ gem install sass
```

## Compass

`config.rb`は[こんな感じ](https://github.com/ysakmrkm/templates/blob/master/config.rb)

Sass 3.3を使う為に、 `--pre` 付けてインストール。
付けないと、3.3の機能でエラーが出る。

```bash
$ gem install compass --pre
```

CSS3PIEを必要とするmixin / functionを使うと **WARNING** 出るけど、とりあえずスルー。
Compass がメジャーアップデートされた時にIEの対応ブラウザバージョンを再考。

### `oily_png` インストール

[Compassのスプライト画像生成を速くする](http://qiita.com/t32k/items/f3223782cb19f472ade6)

```bash
$ gem install oily_png
```

### `ruby-growl` インストール

コールバック関数でGrowl通知系の処理を入れているので、必要なgemをインストールする。

```bash
$ gem install ruby-growl
```

## CoffeeScript

```bash
$ npm install -g coffee-script
```

## Grunt

`package.json`は[こんな感じ](https://github.com/ysakmrkm/templates/blob/master/package.json)
`Gruntfile.coffee`は[こんな感じ](https://github.com/ysakmrkm/templates/blob/master/Gruntfile.coffee)

```bash
$ brew install node
$ npm install -g grunt-cli
```

### `libjpeg libjpeg-turbo libpng` インストール

`grunt-image`に必要なパッケージのインストール

```bash
$ brew install libjpeg libjpeg-turbo libpng
```

### npmパッケージインストール

```bash
$ npm install
```

全て`-g`でインストールしても構わない場合、

```bash
$ npm install hoge -g
$ npm link hoge
```

とかしても良いと思います。

# その他設定

## スクリーンショット保存先変更

デスクトップがスクリーンショットまみれになるのが嫌なので、スクリーンショットの保存先を変更

```bash
$ mkdir ~/Screenshots
$ defaults write com.apple.screencapture location ~/Screenshots
$ killall SystemUIServer
```

## QuickLook用プラグインインストール

下記ページを参考に、QuickLook用プラグインをインストール。

* [Macをより便利にするQuick Look無料プラグイン10選+α](http://macwin.org/mac/quicklook/)
* [MacのQuickLookを快適にするプラグインや小技など17個のTips](http://tukaikta.blog135.fc2.com/blog-entry-252.html)

プラグインは`~/Library/QuickLook`に保存後、下記コマンドでQuickLookを最新の状態へ

```bash
$ qlmanage -r
```

## QuickLookで表示されるテキストのコピーを有効化

```bash
$ defaults write com.apple.finder QLEnableTextSelection -bool TRUE
$ killall Finder
```
# まとめ

ここまでできれば、`MovableType`をCMSとして使いつつ、`WordPress`でブログ運営しながら、`Sass`/`Compass`で`CSS`・`CoffeeScript`で`JavaScript`生成して、`Grunt`で諸々自動化してくれるんじゃないでしょうか。