Macで開発環境構築のための事前準備

自宅MacでRuby+Railsの開発環境をひと通り構築し終わったので、備忘録の意を含めて手順をまとめておきます。

まずは環境を構築するための事前準備として以下のツールを入れます。

・XCode（というか、Command Line Tools）
・Homebrew
・おまけ：ブログ内でソースコードをキレイに表示する


■XCode（というか、Command Line Tools）
MacOSはUnixベースなので、Linuxなど他のUnix系OSで利用できるツールが利用できます。

が、初期状態だとコンパイルに必要なライブラリすら入ってなかったりして環境構築どころの騒ぎではないのですが、Appleから必要になるライブラリの詰め合わせツール（Command Line Tools）が提供されているので、それをインストールします。

このツールは、XCode経由でインストールすれば簡単に行えます。

XCodeを立ち上げて、バーメニューから「Preferences」を選択。

「Downloads」アイコンを選択し、リスト内に「Command Line Tools」があるので、横にある「Install」ボタンを押せば後は勝手にインストールが始まります。


# スクリーンショットは既にインストール後

なお、XCodeを利用しなくてもインストール方法もあるみたいです。
Command Line Tools for Xcodeでディスク容量が大幅に減った！

XCode自体10Gを超える結構な容量を持っていくので、XCodeを使う予定は無いけどCommand Line Toolsは入れたいって方は試してみる価値があるかも。


■Homebrew（というか、Command Line Tools）
Mac上で開発環境を構築するためにUnix系フリーソフトをインストールしていきます。
ただし、これを1つ1つコンパイルして入れていくのは大変なので、パッケージ管理システムを利用します。

Macにおけるパッケージ管理システムとしては Macports が有名で、自分も買い換える前はMacportsを利用していました。

ただし、MacPortsだとOS側で既にインストールされているソフトも新しくインストールしてしまうなど重複管理になったり、個人的に/opt配下に入れられるのに違和感があったり、あとMac界隈で最近人気急上昇で個人的に使ってみたかった、などの理由でHomebrewを使うことにしました。

こっからインストール・・の前に下準備。

まずは Javaランタイム のインストールを行います。
Mountain Lion では標準でインストールされていないので入れる必要があります。

Macの場合はJavaを必要とする動作を行うとインストールを促してくれるので、それを利用してインストールします。

一番簡単なのはターミナルを立ち上げて以下のコマンドを実行する

% java -version

叩くと別にダイアログが立ち上がるので、あとは指示に従ってインストールする。

次に/usr/localフォルダを作成します。
たぶんdefaultでは存在しないので。Homebrewではここにインストールしたソフトが置かれます。

% sudo mkdir /usr/local
% sudo chown [自分のユーザ名] /usr/local

こっから本体のインストール。
やり方がHomebrew公式サイトの下の方に書いてあるのでそれで実行する。

% ruby -e "$(curl -fsSkL https://raw.github.com/mxcl/homebrew/go)"
==> This script will install:
/usr/local/bin/brew
/usr/local/Library/...
/usr/local/share/man/man1/brew.1
==> The following directories will be made group writable:
/usr/local/.
==> The following directories will have their group set to admin:
/usr/local/.

Press ENTER to continue or any other key to abort
==> /usr/bin/sudo /bin/chmod g+rwx /usr/local/.
Password:
==> /usr/bin/sudo /usr/bin/chgrp admin /usr/local/.
==> Downloading and Installing Homebrew…
remote: Counting objects: 93480, done.
remote: Compressing objects: 100% (41438/41438), done.
remote: Total 93480 (delta 65456), reused 76480 (delta 51190)
Receiving objects: 100% (93480/93480), 13.63 MiB | 318 KiB/s, done.
Resolving deltas: 100% (65456/65456), done.
From https://github.com/mxcl/homebrew
 * [new branch] master -> origin/master
HEAD is now at 54daf87 rbenv-bundler: fix checksum
==> Installation successful!
You should run `brew doctor' *before* you install anything.
Now type: brew help

動作確認をし、updateも(念のため)実行しておく。

% brew -v
Homebrew 0.9.3
% brew update
Already up-to-date.

インストールはここまで。
あとは、今後Homebrew経由で入れたアプリケーションを実行できるようにPATHを通しておく。

% vim ~/.zshrc
> # 下記を追加
> export PATH=/usr/local/bin:$PATH

% source ~/.zshrc

■おまけ：ブログ内でソースコードをキレイに表示する
ブログ上で直接ソースを書くと正直見辛いので、これをキレイに表示するためにSyntaxHighlighterというツールを使います。

本来ならば上記サイトからファイルをダウンロードして、それをサーバーに置いておけばいいのですが、So-netブログでは残念な事にjsやcss、というか画像以外のファイルはアップロード出来ないみたいです。

幸いな事にSyntaxHighlighter本家サイトが各ファイルをホスティングしてくれているみたいなので、それを利用して使うことにします。

参考：so-netブログでプログラムソースを「行番号付きで」掲載するには

配置するコードは以下の通り。これをタグ内に設定します。

<!-- SyntaxHighlighter -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css">
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">

<!-- SyntaxHighlighter:brush -->
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>

<script type='text/javascript'>
SyntaxHighlighter.all();
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;
</script>

#参考
So-netブログ内でのHTML編集方法
ソースコードの装飾表示方法

利用するブラシは使う言語に応じて変更。とりあえず自分で使う bash、css、js、rubyの4つを設定。

CSSとJSの読み込みを入れたら、あとはソースを表示する箇所を以下のタグで囲めばOK。

<!-- 例：CSSの場合 -->
<pre class="brush:css">
【ソース部分】
</pre>

なおホスティングしているため表示に反映されるまで若干のラグがある場合があります。
またCSSやJSのリンクを張った時、preタグで囲んでいるのに普通に読み込まれてしまったのでHTMLの特殊文字は変換した方がいいかも。

HTML特殊文字変換ツール

あとSo-netブログの設定でURL自動リンクを有効にしていると、ソース内に表示されているリンクがjavascriptタグで囲まれてなんじゃこりゃ状態になるので、SyntaxHighlighterを利用してURL入りのソースを書く場合は同機能を無効にしておくといいです。

タグ：MAC XCode homebrew SyntaxHighlighter