CompassのインストールとCSS変換時に文字が消える問題の解決

Compass Screen Shot

CSSデザインに完全に移行したホームページの制作に於いては CSSの仕様が問題にならざるを得ません。 此の問題を解決する方法の一つが Sass(Syntactically Awesome Style Sheets) であり、其の為に手元の環境にはプログラミング言語 Ruby2.0をインストールした際の情報を本ブログに共有したのが2013年11月1日の記事 ホームページ制作のパラダイム変化に備えWindows XP機にRuby2.0をインストールする であり、またSassインストール時に発生した問題を共有したのが翌2013年11月2日の記事 Windows Ruby Gemのインストール時SSLサーバーの接続拒否問題を回避する でした。

SassとSCSS

Sassはホームページの規模が大きくなればなる程煩雑になり勝ちなCSSを プログラマブルに記述出来る記法です。 変数やネスト、継承にmixinと言った関数化を用いれば 繰り返し繰り返し記述しなければならなかったエレメントやプロパティの記述を纏められることで 省力化、効率化が図れると共にCSS構造全体の見通しも良くなる勘定です。 Sassはインデントを用いた記法で慣れが必要ですが、 同じ効果を齎すにSCSS(Sassy CSS)が有り、即ちSass的なCSSなる命名で CSSの記法に近いながらSassと同様のプログラマブルな記述が可能となります。 Sassを用いるにせよ、SCSSを用いるにせよ、共にCSSのメタ言語には違いありませんから、 実際にWebサーバーで利用するには最終的にCSSファイルにコンパイル、即ち変換する必要がありますが CSSを其の儘記述するよりは遥かに効率化が可能となるのでした。

Sass拡張フレームワークCompass

スポンサーリンク

此の如き便利なSass、SCSSですが此れを更に便利にしてくれるフレームワークがCompassです。

Compass

CompassはSassの拡張フレームワークで、 ユースフルな関数が初めから揃えられており、 CSSでは定番のスプライト画像の作成でも力を発揮するなどの便利さが評価され 現在大いに普及し始めているようです。

右の書籍 Web制作者のためのSassの教科書~これからのWebデザインの現場で必須のCSSメタ言語 はSassに関する実用的な情報を齎してくれますが、 全8章の内の実に1章まるまる、第6章をCompassに割いていて参考になるでしょう。

書籍中にはCompass在ったればこそ、Sassの普及のなった、と迄言及しています。 実際本ブログ運営者は以前Sassと同じくCSSメタ言語である LESS « The Dynamic Stylesheet language を利用していましたがWindowsの周辺環境の不足も感じSassに転向した経緯が有ります。

Compassについては多くの良質な紹介記事がネット上に配信されていますので、 今更本記事に記す迄もないでしょう。 特に一つサイトを紹介するとすればドットインストールの Compass入門(全7回) 辺りが動画を基本としており分かり易くて役に立つものと思います。

Compassのインストール

Compassをインストールするにはプログラミング言語Rubyが事前にインストールされている必要があります。 だからこそ用意の為に2013年11月1日の記事にあるように ホームページ制作のパラダイム変化に備えWindows XP機にRuby2.0をインストール したのでしたし、また翌2013年11月2日にはSassインストール時に発生した Windows Ruby Gemのインストール時SSLサーバーの接続拒否問題を回避 したのでした。

以上の手元の環境、非力なWindows XP機でコマンドプロンプトを立ち上げ Compassをインストールした様子を以下に共有します。 先ずはインストール対象のノートPCにCompassが既にインストールされているかどうかを バージョン番号を調べることで確認します。

C:¥tsukamotch>compass -v
'compass'は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

インストールされていませんので、インストールします。

C:¥tsukamotch>gem install compass

Fetching: chunky_png-1.2.9.gem (100%)
Successfully installed chunky_png-1.2.9
Fetching: fssm-0.2.10.gem (100%)
Successfully installed fssm-0.2.10
Fetching: compass-0.12.2.gem (100%)
Successfully installed compass-0.12.2
Parsing documentation for chunky_png-1.2.9
Installing ri documentation for chunky_png-1.2.9
Parsing documentation for compass-0.12.2
Installing ri documentation for compass-0.12.2
Parsing documentation for fssm-0.2.10
Installing ri documentation for fssm-0.2.10
3 gems installed

Sassの時 にRuby Gemの問題を解決していたお陰で拍子抜けするくらい簡単に成功しました。 一応バージョンを確認します。

C:¥tsukamotch>compass -v
Compass 0.12.2 (Alnilam)
Copyright (c) 2008-2013 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

確りインストール出来ています。

Compassの稼動

インストールが出来たので実際にCompassを動かしてみます。 作業ディレクトリに移動してカレントディレクトリを監視すれば、 Sassファイルが変更されると共に自動でCSSファイルに反映させてくれます。

C:¥tsukamotch¥works¥html>compass watch
>>> Change detected at 18:47:05 to: screen.scss
identical css/ie.css
identical css/print.css
overwrite css/screen.css
identical css/main.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 19:00:11 to: main.scss
overwrite css/main.css
>>> Change detected at 19:00:38 to: main.scss
overwrite css/main.css
>>> Change detected at 19:03:33 to: main.scss
overwrite css/main.css

バッチ ジョブを終了しますか (Y/N)? y

C:¥tsukamotch¥works¥html>

上手く稼動しました。

CSS変換時に発生した問題と解決法

インストールも稼動試験も上手く行きましたので業務に於いて利用しました。 作業フォルダが変更されています。

C:¥tsukamotch¥作業フォルダ¥html>compass watch
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 20:00:11 to: main.scss
overwrite css/style.css

一見上手く動いているように見えます。 処がstyle.cssファイルをテキストエディタで開いてみると、 不自然に行との文字が数文字削られている現象が発生してしまいました。

此の原因は勿論カレントディレクトリのルートからのパスに赤字で示したような日本語が含まれるからに他なりません。 Rubyは日本生まれでもあり、utf文字コードの普及で余り日本語が問題となりはしなくなりましたが、 日本生まれならぬCompassに於いてはどうも上手く作業ディレクトリがパスに日本語を含むと 変換された生成ファイルが文字化けならぬ文字抜けを起してしまうようです。 パスに日本語を含まないディレクトリに必要ファイルを移した処、 Compassが想定通りの処理を齎してくれたのは謂う迄もありません。

斯うして見れば一目瞭然で日本語パスが問題であるのが判然しますが、 実際に作業をしていると新しい環境でもあり、Ruby Gemでの躓きもあり、 なかなか特定に苦労して苛苛しました。 同問題を抱えてしまった向きの苛々を少しでも軽減出来ればと思い当該情報を共有するものです。