序段(ここは読み飛ばしても結構です)

複雑さを増すCSS界隈において、いまや欠かせないのがCSS Framework。気をつけなければならない点はあるようですが、一度使い始めてしまうともう手放すことはできません。
しかし、たしかに導入までの敷居が高い。

とまあ、まずはターミナル恐怖症の克服からはじめなければならないような状況です(克服しておくに越したことはないんですが。意外に便利ですよ)。

制作の段階になっても、ターミナルの出番はなくなりません。
Compassで使われるSass/SCSSは、いろいろ便利な反面、純粋なCSSではないので、そのままではブラウザが理解できません。最終的には、普通のCSSに変換してサーバに上げる必要があります。
手動で変換するわけではなく、Compassに監視(Watch)してもらって、都度都度自動変換です。
Compassコマンドラインドキュメントのページにwatchコマンドが載っていますが、ここでまたターミナルでは、人によってはそろそろ心が折れる音が聞こえてきます。

そこでいよいよ、我々の救世主・GUIツールの出番です。
なんと、これらを使うと、上記のようなコマンドライン操作が一切必要ないようです
自分は、Rubyから順に全部インストールしてから気づきました…。
Compassのインストールページも書いてありますね…

Then follow the instructions that compass provides in the output.
Hate the Command Line?

Try one of these Community supported GUI applications:

紹介されているのは2つ。

両方使ってみましたが、一長一短ありました。感想を交えつつ、これらを比較してみたいと思います。
結論を先にいうと、個人的にはCompass.app推しです。

Compassコンパイラ比較1「Scout



Scout内蔵のRubyでCompassやSassが動作するので、チョチョイのチョイとプロジェクトを管理出来ます。 Rubyのセットアップとか、ややこしいことは考えなくていいです。Scoutが全部引き受けますので、時間をもっといいことに使ってください。

みたいなことが、序文として書いてありますね。
Rubyのセットアップなんてどうせ一回しかやらないし、活用できるかどうかもわからないし、なんかあるたびググらないといけないし、やらなくて済むならしたくないですよね。ですよね。

使ってみて感じた「良い」ポイント

無料である : ソースコードが公開されており、ライセンスの購入などなく使うことができます。
気軽に始められるのはありがたい。

プロジェクトの設定をGUIで変えられる : ウィンドウアプリケーションならではのメリットですが、まあconfig.rbを直すのと大して手間は変わらないかも…。

複数のプロジェクトを同時にWatchできる : あんまりないかもしれませんが、複数のプロジェクトを同時に監視することができるので、仕事が3つ4つ重なっても設定を変えたりする手間がありません。

ログが見やすい : アプリケーションウィンドウ内でログを確認できるので、なにかトラブルがあってもすぐに確認できます。

使ってみて感じた「悪い」ポイント

監視ディレクトリのパスに2バイト文字が入ると動作しない : これが意外と致命的。最初からわかってプロジェクトを設定していればいいですが、過去のプロジェクトなど、監視するディレクトリまでの間に日本語などのフォルダ名が入ると、監視ができないようです。

プロジェクトの設定ファイルなどは自前で用意する必要がある : config.rbファイルは、あらかじめ自分で用意する必要があります。
中身自体はたいしたことないのでコピペでいいんですが、一回はcompassコマンドを使うことになるかも…。

Compass Extentionの追加が難しい : いろいろ調べたんですが、結局うまく行きませんでした。とにかくややこしい…。

最後のCompass Extensionについて。 Compassでより手抜きをより便利にするため、さまざまな機能拡張が作られて公開されています。
自分は「rgbpng」というのを入れたくて試行錯誤してみましたが、結局導入できませんでした。できなかったので、何をどうやったかは覚えていません。パッケージの中を開いてゴニョゴニョしたような…。

結論

無料だし、まず最初に始めるにはこちらでしょうか。
機能に不足はないんですが、使い込んでくると、いろいろと不自由は出てくる可能性があります。

Compassコンパイラ比較2「Compass.app



おお、プレスキットまでありますね、Compass.app。ロゴ画像はそこからいただきました。

Compass.appは、メニューバーの中で動作するSass・Compassのアプリケーションです。デザイナーの皆さんが、スタイルシートのコンパイルをコマンドライン無しでできるようにお手伝いします。

というわけで、Compass.appには、アプリケーションウィンドウがありません。

使ってみて感じた「良い」ポイント

機能がコンパクトにまとまっている : メニューバーアプリケーションなので、機能はシンプルにまとまっています。最初は戸惑うかもしれませんが、よく使う機能、便利な機能は網羅されていてわかりやすい構成です。

プロジェクトの生成もできる : compassコマンドでプロジェクト名を指定して作成するのと同等のことをメニューの中からできます。また、Compass以外のフレームワークのプロジェクトの生成も可能です。

Extensionの追加が簡単である : 基本的に、Compass.appのExtensionsフォルダを開いて、そこにドラッグ&ドロップしてCompass.appを立ち上げ直すだけです。そのあと、config.rbを修正します(require "ほにゃらら"を追加)。

使い方が日本語で書いてある : 基本的な使い方の日本語マニュアルがあります 。この記事を書くにあたって気づきました。日本語万歳。

使ってみて感じた「悪い」ポイント

有料である : 比較のために悪いの方に入れましたが、悪いとは全然思っていません。有料とは言ってもたったの$10です。アベノミクスで円安になっていても1000円そこそこです。それだけの価値は十二分にあります。

一つのプロジェクトしか監視できない : 実はこれも別に不満はありません。比較のためにあえてこちらに入れました。

ログが分かりにくい : Macの場合、Growlに対応しているので、都度都度メッセージは表示されます。Growl内で履歴は確認できますが、いちいちそこを開くのもどうでしょうか。
ちなみに、ログファイルをプロジェクトフォルダに作るようにもできますが、見やすいわけじゃないですよね。

結論

個人的には、こちらを推したいと思います。
ログをもっと簡単に、詳細に見られるようにしてもらえれば、もう言うことありません。


タグ:css3 仕事 ノウハウ