会社で設備更新があり、移行アシスタントを使わずに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 を操作スペースとして表示のチェックを外す

アニメーションを切る

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

戻す時は

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

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

最初はBoxen使おうと思ったけど、どうやら時代はHomebrew Cask + Brewfile らしいので、後者を採用。

Homebrew Cask

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

.bash_profile

export HOMEBREW_CASK_OPTS="--appdir=/Applications --caskroom=/usr/local/Caskroom"

homebrew-cask を fork & git clone

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

Brewfile

自分のBrewfileはこんな感じ

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

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

$ brew bundle

App Store

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

アプリケーション設定

Vim / MacVim

vimrc gvimrc etc はここに

濁点・半濁点について

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

Preferences > Advanced

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

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

iTerm2

カラースキーマ

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

フォント

Source Code Pro

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

Powerline

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

インストール

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

設定

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

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を起動させる。

$ sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist

設定

$ 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 として以下を記述

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

DocumentRoot 変更

httpd.conf

170行目あたり
+#DocumentRoot "/Library/WebServer/Documents"
+DocumentRoot "/Users/[username]/Sites"

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

Perl / PHP 有効化

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/へ向ける

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が有効になるようにする

/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/以下全体で有効になるようにする

/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']`を有効に

/users/[username].conf

</Directory>
+
+<VirtualHost localhost>
+    RewriteEngine On
+</VirtualHost>
+
+<VirtualHost [ip address]>
+    RewriteEngine On
+</VirtualHost>

PHP

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

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

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

$ mysql_config --socket

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 でインストール済み

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

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

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

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

設定ファイルコピー

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

mysql.server start してもエラーが出る場合は、下記コマンドを試してみる。（OSX Lion, Homebrewで入れたmysqlが起動しない夜）

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

rootのパスワード設定

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

phpmyadmin

$ 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

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も必要なので同時にインストール

$ brew install mcrypt
$ brew install autoconf

PHPのバージョン確認

$ 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

ここから該当バージョンのソースをダウンロード・展開

$ 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以下フォルダ名は変わる場合あり）

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の値にすべて合わせる。

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

公式ドキュメント参照してインストール

`DBD::mysql`が無いとエラーが出る場合

Mac OS XにDBD::mysqlをインストール

$ 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

こちらも公式ドキュメント参照してインストール

Sass

$ gem install sass

Compass

config.rbはこんな感じ

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

$ gem install compass --pre

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

`oily_png` インストール

Compassのスプライト画像生成を速くする

$ gem install oily_png

`ruby-growl` インストール

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

$ gem install ruby-growl

CoffeeScript

$ npm install -g coffee-script

Grunt

package.jsonはこんな感じ
Gruntfile.coffeeはこんな感じ

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

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

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

$ brew install libjpeg libjpeg-turbo libpng

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

$ npm install

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

$ npm install hoge -g
$ npm link hoge

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

その他設定

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

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

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

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

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

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

$ qlmanage -r

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

$ defaults write com.apple.finder QLEnableTextSelection -bool TRUE
$ killall Finder

まとめ

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

0から始める Mac 環境構築

システム環境設定

言語を英語に変更

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

マウス

右クリックを有効に

スクロール方向

ファイアーウォール

Dock

キーボード

Shortcuts

Caps Lock をオフに

Mission Control

アニメーションを切る

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

Homebrew Cask

homebrew-cask を fork & git clone

Brewfile

App Store

アプリケーション設定

Vim / MacVim

濁点・半濁点について

iTerm2

カラースキーマ

フォント

Source Code Pro

Powerline

インストール

設定

KeyRemap4MacBook

Key Repeat

Totalfinder

Menues

Visor

File Browser

Tabs

Divvy

Shortcuts

一部アプリについて

開発環境設定

Apache

自動起動

設定

localhost/~[username]/ 有効化

DocumentRoot 変更

Perl / PHP 有効化

CGIを有効に

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

$_SERVER['SCRIPT_URL']を有効に

PHP

MySQL

phpmyadmin

エラーを取り除く

MovableType

DBD::mysqlが無いとエラーが出る場合

Wordpress

Sass

Compass

oily_png インストール

ruby-growl インストール

CoffeeScript

Grunt

libjpeg libjpeg-turbo libpng インストール

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

その他設定

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

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

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

まとめ

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

`DBD::mysql`が無いとエラーが出る場合

`oily_png` インストール

`ruby-growl` インストール

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