タイトル長いですが。

これまでGUIアプリで操作してきたことをコマンドラインで操作出来るようにするMacでのセットアップメモ。
いつも忘れるので、現時点での覚え書きです。
自分の手順だけをざっくり書くので、わからなかったりエラーが出たらその内容で検索して調べてください。

やることリスト

  1. Xcode(iPhoneやiPadのエミュレーターなど)
  2. Homebrew(パッケージ管理ツール)
  3. Gruntbowergulp.js(cssメタ言語のコンパイル、css・JavaScriptのminifyなど)
  4. Sass + Compass、Less(cssプリプロセッサ)、Foundation5(cssフレームワーク)
  5. Git(バージョン管理)
  6. gettextWordPress i18n Tools( .po .mo 翻訳ファイル系)
  7. wp-cli (WordPressをコマンドラインから操作)
  8. Virtualbox、Vagrant(仮想マシン・サーバー)
  9. bash-completion(ssh実行時のホスト名の補完など)

スポンサーサイト

1. Xcode(iPhoneやiPadのエミュレーターなど)

Xcodeは App Store から検索してインストール。
続いてコマンドラインツールを入れる。

※Xcode 5.0.1 では Preferences > Downloads の components に Command Line Tools が無い。

xcode-Preferences

でダイアログが出る。

xcode-select--install

「インストール」をクリック後は規約などのダイアログが出るのでよく読んで進めること。

2. Homebrew(パッケージ管理ツール)

http://brew.sh/index_ja.html

※3. 以降の操作をアプリなどで行う場合は不要。

Homebrew のインストール

(2015.10.6追記:インストール時のパスが変わったようです)

※2015.10.6追記:Mac OS X El Capitan の場合、SIP/rootlessの影響で素直にインストールできないようですので以下の記事を参考にインストールしてください。

バージョンチェック

Homebrew の状態チェック

ここで Warning などのエラーメッセージがある場合はつぶす。
なお、Command Line Tools がインストールされていない場合もここで警告が出る。

さらに Homebrew でインストールしたパッケージがある場合、それを優先するようにパスを通しておく。
(Facebookで教えてもらいました。thx. 宮 @miya0001 さん)
~/.bash_profile に追記、なければ新規作成。

保存したら

や、ターミナルの終了・再起動後にもう一度 $ brew doctor

3. node.js、Grunt、bower、gulp.js(Sass(Compass)のコンパイル、minifyなど)

node.js
http://nodejs.org/

Grunt
http://gruntjs.com/

gulp.js
http://gulpjs.com/

※ CodeKit などのアプリを使う場合はいらない。

Grunt 0.4.x では node.js 0.8.0 以上が必要。

バージョンチェック

(なければ)node.js のインストール

~/.bash_profile に追記、なければ新規作成。

Node Packaged Modules(grunt, grunt-cli, grunt-init, bower, gulp)のインストール

バージョンチェック

Yosemite + node.js + Homebrew でエラーが出るようになったら
https://github.com/Homebrew/homebrew/issues/33484
このページの最後のコメントを参考に、一度 node.js の削除と再インストールをテストしてみること。
また、sudo しないと npm コマンドが使えないのはたいていパーミッションが原因なので、そこを見直すこと。

この節の参照

4. Sass + Compass、Less(cssプリプロセッサ)、Foundation5(cssフレームワーク)

Sass
http://sass-lang.com/install

Compass
http://compass-style.org/

Less
http://lesscss.org/

Foundation
http://foundation.zurb.com/

※ CodeKit などのアプリを使う場合はいらない。

Sass(Compass)には Ruby が必要だが、公式にMacはOS付属(プリインストール)のRubyでOKと書いてある。

Mac
If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you’re using a Mac, congratulations, Ruby comes pre-installed.

Ruby のバージョンチェック

※2015.10.20追記:Mac OS X El Capitan の場合、SIP/rootlessの影響があるのインストールディレクトリを変更したほうが良い。

RubyGem を最新版にアップデートするには「rubygems-update」というパッケージを使うのがいいらしいのでインストール

アップデートは

※Macの場合、gem コマンドは sudo で実行するように。途中パスワード聞かれるので入力。

Sass のインストール

バージョンチェック

Compass のインストール(RubyGemのアップデートはSassで行ったので割愛)

バージョンチェック

Foundation 5 のインストール

http://foundation.zurb.com/docs/sass.html

2013.12.13 追記:Foundation 5 からインストール方法が変わりました。Git、Ruby 1.9+、NodeJS が必要な上、先に書いた bower、grunt-cli のインストールも必要です。

バージョン確認

プロジェクトを作成

アップデートは各プロジェクト単位で

このとき、RubyGem でインストールした Foundation4 が元になるが、しばしバグが見受けられるので、心配な人は「Sass Standalone」を使ってプロジェクトを作ること。

2013.12.13 追記:
Foundation 5 からスタンドアロン版がなくなりました(スタンドアロン版は4で停止)。
また Foundation 4 からアップグレードする方法は
http://foundation.zurb.com/docs/upgrading.html
を参照に。
(リンク先の最初の節(Upgrade your Rails project)は Rails を使っている人向けなので、ホームページ向けの場合はその次以降を参考に)

Lessのインストール

※まだ Less やってないんですけどね。
要 node.js。

バージョンチェック

この節の参照

5. Git(バージョン管理)

Mac OS X やアプリケーションに内蔵されているが、最新版を使いたい時は HomeBrew でインストール・管理するように。

※ SourceTree などのクライアントソフトを使っても良い。
なお、SourceTree は環境設定でアプリ内蔵の Git かシステムの Git かを選択できる。

SourceTree
http://www.sourcetreeapp.com/

Git のインストール

バージョンチェック

6. gettext 、WordPress i18n Tools( .po .mo 翻訳ファイル系)

コマンドラインから .po .mo を作りたいとき。
※GUIでやりたいときは Poedit
http://sourceforge.jp/projects/sfnet_poedit/

gettext のインストール

※ gettext を入れた後、$ brew doctor を行うと Warning が表示されるが今のところあまり気にしなくても良いよう。

WordPress i18n Tools のインストール

この節の参照

7. wp-cli (WordPressをコマンドラインから操作)

wp-cli
http://wp-cli.org/

※ WordPressをやらない、あるいはコマンドラインで操作を行わないなら必要ない。
コマンドラインで使うにしてもVCCWならローカルサーバー内に自動でインストールされるので、あえてMacでインストールしなくても良い。

wp-cli のインストール

※2014.03.26追記 インストール方法が変わり Homebrewのパッケージとしてインストールします。
なお、以前の方法(Composer版)でインストール済みの倍は予め削除しておいてください。

インストール時に

と出て完了しなかった場合、Homebrew でPHPをインストールしてみてください(例はphp5.5)

追記
「wp-cliの全部の機能を使おうと思ったら、subversionとMySQLを入れといたほうがいいかも」と教えてもらいました(thx. 宮 @miya0001 さん)。
※ローカルでwp-cli使うシチュエーションはほとんど無く後述する「VCCW (vagrant-chef-centos-wordpress)」利用時にあれば便利かもってぐらい。

subversion のバージョンチェック

MySQLはセットアップを行わないが

でインストール時のメッセージを後から確認できる。

この節の参照

8. Virtualbox、Vagrant(仮想マシン・サーバー、検証用)

Virtualbox
https://www.virtualbox.org/

Vagrant
http://www.vagrantup.com/

Vagrant を使うにはあらかじめ Virtualbox が必要なので上記のサイトからダウンロードしてディスクイメージを展開してインストール。
ついでに Windows 8 の仮想環境を作っておけば検証用に使える。

VirtualboxでWindows環境を作る場合の参照

Vagrant のインストール
http://downloads.vagrantup.com/

※使いたいVagrantファイルによってVirtualbox、Vagrantのバージョンが決まっている場合があるので、先にそれらの説明を読むこと。

ダウンロードしたディスクイメージを展開してインストール。
バージョンチェック

vagrant-hostsupdater をインストール(VCCW利用時は必須)

vagrant-global-status をインストール

このプラグインは起動中のVagrantの仮想マシンの一覧を取得できる。
使い方は https://github.com/fgrehm/vagrant-global-status を参考に。

なお、Vagrant のプラグインは

でアップデート可能。

次にVagrantファイルをclone
使いたいVagrantファイルによってclone元が異なる。
今回はWordPressに特化したもののみ。LAMP環境とかも探せばあるんじゃないかな。

Varying Vagrant Vagrantsの場合
https://github.com/10up/varying-vagrant-vagrants

VCCW(vagrant-chef-centos-wordpress)の場合
http://vccw.cc/

この後サイトから.zipをダウンロードして解凍する。

clone が終わったら、Varying Vagrant Vagrants の場合は vagrant-local ディレクトリ、VCCWの場合は vagrant-wp に移動して

で仮想環境が立ち上がる。

複数のWordPress開発環境を作りたいときは、grunt-init vccwも便利

この節の参照

9. bash-completion(ssh実行時のホスト名の補完など)

Bashの補完機能($ cd <TAB>などで候補が出てくる機能)を拡張するシェルスクリプト集。
具体的には ssh コマンド実行時のホスト名の補完など。

インストール

インストール途中に出てくる説明通りに、完了したら ~/.bash_profile に以下を追記

この節の参照

おまけ

Homebrewでインストールしたものをまとめてアップデート管理するようにユーザーホームに brew.sh というファイルを作っておく。

実行は

で上記コマンドが走るのでたまにやること(sudo しているので途中でパスワード聞かれる)。

追記:gettext はアップデートするとシンボリックリンクが外れてしまいます。
(This formula is keg-only, so it was not symlinked into /usr/local.(以下略))
gettext に限りませんが、OS Xに含まれているライブラリによってはこのような表記が出ますので、再度 $ brew link が必要です。

追記2:定期的にアップデートしてるなら cleanup した方がいいよ、と教えてもらったので上記のgistにはそれを追記してあります

MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ」への1件のフィードバック

Comments are closed.