Web
  
    2014年7月19日 (土) 掲載
      Eclipseでcompassを使う
Web開発のとき統合開発環境としてEclipse(あるいはAptanaStudio)を使用している人は多いでしょう。ここではEclipseのビルドシステムを使ってcompassをコンパイルする方法を説明します。
Eclipseには「Ant」というビルドツールが組み込まれています。Antは本来Java用のビルドツールなのですが、任意の外部プログラムを呼び出すことができるためcompassプロジェクトで使用することも可能です。Antの設定ファイルはbuild.xmlというxmlファイルです。Eclipseのプロジェクトルートに、このファイルを作成してください。Eclipseでbuild.xmlを開くと、専用のAntエディタが起動します。後は通常のxmlと同じ要領で内容を書いていきます。Ant専用の補完機能が使えるので慣れれば簡単に入力できるでしょう。
build.xmlの内容はたとえば次のようになります。
<?xml version="1.0" encoding="UTF-8"?> <project basedir="." default="compass.rosie.debug"> <property name="target_path" value="/sites/all/themes/custom" /> <target name="compass.rosie.debug" description="テーマrosieの中のcssをデバッグビルド Antのグローバルプロパティでruby.homeの定義が必要"> <exec executable="ruby" dir="/rosie" failonerror="true"> <arg value="/compass" /> <arg value="compile" /> </exec> </target> </project>
Antではビルドする対象を「ターゲット」とよび、ターゲット単位でbuild.xmlを記述していきます。
4行目にあるtargetタグがそれで、ここではターゲット名と説明の属性を指定しています。
targetタグの内部にはビルドのためのタスクを記述します。ここでは<exec>タグという任意の外部プログラムを呼び出すタスクを使用しています。
呼び出しているのはrubyインタプリタで、その引数としてcompassの実行ファイルと、compassに対する引数である”compile”を、<arg>タグを使って渡します。
また<exec>タグにはfailoneerrorという属性が渡されています。この指定により外部プログラムがエラーを返したときにはタスクが失敗するようになります。
3行目にある<property>タグは任意のプロパティを定義するものです。ここではソースプログラムのありかをtarget_pathというプロパティで指定することで、ビルドファイルの汎用化をはかっています。
build.xmlを実行するにはEclipseでbuild.xmlを右クリックし、「実行|Antビルド...」を選択します。図のようなダイアログが表示されるので、実行するターゲットを指定して実行してください。
またプロジェクトのプロパティとして「ビルダー」という項目がありますが、そこに「Antビルダー」を新規制作し、build.xmlを指定すれば、ビルドコマンドを実行したときやソースを保存したときに、自動的にcompassを実行できるようになります。
            
最近のWebデザインではメディアクエリを使用したレスポンシブデザインが必須となっています。sassでももちろんメディアクエリはサポートされています。sassならではの拡張がされているので複雑になりがちなメディアクエリもスッキリと書けるようになります。
cssでは背景に画像を指定することが良くあります。普通はbackground-image: url(../images/bg.png); のように書くことでしょう。しかしこの方法ではフォルダレイアウトを変更すると、すべての指定を書き換えなければなりませんし、CMSではこのような相対指定が使えない場合もあります。このような不便を解消するためにcompassでは画像を特別な方法であつかいます。
横方向のレイアウト整合性をとるのがBlueprintなら、縦方向(行間)をコントロールするのがVertical Rhythmです。Blueprintにも行間コントロールの機能はあるのですがあまり使いやすいとは言えません。ここではcompassコアに含まれるVertical Rhythmの使い方を説明します。
compassの魅力のひとつは豊富で実績のあるミックスインが使えることです。ここではcompassコアに含まれるミックスインの概要を紹介します。
sassは従来のcssと互換性のあるスタイルシート言語です。実際、cssファイルの拡張子をscssに変えただけでも立派なsassソースファイルであり、コンパイルをすることができます。なのでcssについての知識があればsassは簡単に覚えることができます。ここではその概要を説明します。
compassを利用するにはまずcompassコンパイラをインストールする必要があります。ここではWindows環境にcompassをインストールする方法と、基本的な利用方法について説明をします。
Webページを作成するとき、作業の半分はグラフィックの制作に、残りの半分はCSSの制作に費やされるでしょう。CSSの制作環境は数年前と比べて格段に良くなっているとはいえ、CSSという言語自体はそれほど進歩していません。特にDrupalなどのCMSプロジェクトではセレクタの記述がどんどん長くなる傾向にあり、そのためcssコードの共有や保守がますます難しくなってきています。