GitとRubyを最新に

OS X用のパッケージ管理システムHomebrewを導入したのには2つの目的がありました。GitとRubyの最新バージョンを使うこと。GitはGitHubを使う上で欠かせないものだし、RubyはSASSとCompassを使うようになったのもあって、安定版Rubyにバージョンアップしてみようと云う気持ちになったのでした。私が使う用途はRubyをバリバリ使うわけでもないので、このままでもいいかなあと考えていました。が、しかし、OS XにプレインストールされているのはRuby 1.8.7です。このバージョンは昨年(2012年6月)に開発終了され、サポートは今年(2013年6月)まで行われ予定通り終了しました。現在の安定バージョンはRuby 2.0.0-p247です。ま、ついでにやっちゃいましょう!って感じです。

環境

OS X Mountain Lion 10.8.4
Xcode 4.6.3
Homebrew 0.9.4

インストール

ターミナルから

$ brew doctor
$ brew update
$ brew install git rbenv ruby-build openssl readline

次に ~/.bash_profileeval "$(rbenv init -) または if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi を追記。

$ source ~/.bash_profile  #bash環境設定の更新
$ gem install rbenv-rehash  #rehashの自動化
$ rbenv install 2.0.0-p247
$ rbenv global 2.0.0-p247  #2.0.0-p247を使う設定
$ ruby -v  #バージョンの確認

このような手順で進み終了。
元の状態(OS Xプレインストールバージョン)に戻すには

$ rbenv global system

余談ですが状態を確認するには

$ rbenv versions  #管理しているバージョンを表示
  system
* 2.0.0-p247 (set by /Users/acc/.rbenv/version)

ここまでで問題がなければインストールは終了です。
では実際に動作確認してみましょう!

$ irb  #Interactive Rubyを起動
irb(main):001:0> 1+1  #計算をしてみる
=> 2  #結果が返る
irb(main):002:0> exit  #終了

インストール手順で問題があればコメントいただければ幸いです。

Sass & Compassを導入

去年あたりからちょくちょく耳にするようになったSASSを本格的に使ってみようと思う。便利そうだなとはわかっていたんだけど、環境を整えなければ使えないところがネックとなってなかなか手を出し辛かったのです。愛用しているコーディングツールCoda 2がSASSへの対応を進めてきているので、ここで波に乗っていろいろな景色を眺めてみたい。

準備

利用するSASSとCompassはRubyプログラム言語を便利にするツール(ライブラリ)として提供されています。このライブラリを簡単に効率よくインストールや更新してくれるのがRuby言語用のパッケージ管理システムRubyGemsです。Macをお使いの方は、RubyおよびRubyGemsは予めインストールされているのですぐに作業を始められます。その他の方はRuby公式より入手できます。

OS Xに予めインストールされているバージョンは

  • Ruby 1.8.7
  • RubyGems 1.3.6

となっていました。Ruby 1.8.7は1年前に引退したので、興味のある方は現在の安定板Ruby 2.0.0-p247にしておくことをオススメします。しかし、SASSとCompassのみ使用される方はRuby 1.8.7でも大丈夫なようです。

では、パッケージ管理システムRuby Gemsを最新版にアップデートしてインストール作業を行います。ターミナルを起動して以下のコマンドを実行してください。

$ gem -v  #バージョンを確認
$ gem update --system  #システムのアップデート
$ gem cleanup  #古いバージョンの削除

インストール

CompassはSASSを機能拡張するライブラリなのでSASSは一緒にインストールされます。

$ gem install compass  #Compassのインストール
$ compass -v  #バージョン確認
$ sass -v  #バージョン確認

バージョンが表示されればインストールされている確認となります。現在のインストールバージョンは以下のようになりました。(date: 2013/07/10)

  • SASS 3.2.9
  • Compass 0.12.2

運用

さて、準備は整いました。
サイトデータを置くフォルダ(ディレクトリ)へターミナルで移動します。方法はいくつかありますが比較的簡単な方法を説明します。

  • ターミナルを起動し、サイトデータが含まれるフォルダをDockにあるターミナルアプリアイコンへドロップする
  • サイトデータが含まれるフォルダでコンテキストメニュー(右クリック)を表示させサービスから「フォルダに新規ターミナル」コマンドを実行する(参考:フォルダをターミナルで開く

ターミナルがサイトデータフォルダを開いた状態で表示されます。次にCompassの環境設定を行います。

$ compass create

自動的にCompassが運用するために必要なフォルダやファイルが作成されます。運用管理するために config.rb ファイルを開き、4−8行部分で設定を行います。

http_path = "/"  #サイトのルートディレクトリ
css_dir = "css"  #CSSのディレクトリ
sass_dir = "sass"  #SASSのディレクトリ
images_dir = "img"  #画像のディレクトリ
javascripts_dir = "js"  #JavaScriptのディレクトリ

17行目をコメントアウト

line_comments = false  #CSSに書きだした時に行数コメントを入れない

既存のサイトにCompassを設定する。

$ compass init

運用しているフォルダ名に config.rb の内容を書き換える。

以上でCompassの設定は終わりです。

実際に運用してみましょう!

sass/style.scss を作成して内容を書き込んで保存します。

$ compass compile

コマンドを実行します。
css/style.css が作成されて内容が反映されていると思います。ただ、保存するたびにコマンドを実行するのは面倒ですよね。以下のコマンドを実行すると保存すると同時にコンパイルしてくれます。

$ compass watch

このコマンドを終了するにはコントロールキーと’C’キーを同時に押す必要がありますのでお忘れなく。

おわりに

SASSとCompassを運用するにはターミナル操作が欠かせないので、まだまだ取っ付きにくい部分があるので普及するには時間がかかりそうだけど、この便利さを使いこなせるようになればかなり開発時間を短縮できるように思う。