現在、ウェブ上でCSSの編集・生成を行うシステム (開発コード: Cimejes) を作成しています。

今までは、CSS を記述するにあたっては、普通のテキストエディタを使っていました。 それはそれで、サクサク書けて小回りも利いて快適なのですが、色々と不便な箇所も。

例えば、CSSには「定数」という概念がないので、同じ値の「色コード」や「フォント名」がファイル内のあちらこちらに散らばってしまうという問題があります。 従って、サイトのテーマカラーなどを変更しようとすると、これらを一つずつ修正しなければなりません。

また、動作確認のため、その一部をコメントアウトすることも多いのですが、CSS 2 では (CSS 3 はよく知らない) /* ～ */ を用いたブロック型のコメントしかサポートされておらず、無効化する範囲をネストさせることができないため、この作業に手間が掛かったりしてフラストレーションを感じることもしばしば。

そこで、CSSをツリー構造を使って表現・管理するシステムを作ろうと思い立ちました。 掲載したスクリーンショット (クリックで拡大できます) は開発中のものですが、基本的な機能は既におおよそできあがっています。 例えば、プロパティの値に、$color_theme_major と書き入れておくと、その部分がCSSの生成時に定数値として設定された文字列 (この例では、"#c00000") に置き換えられる、という寸法。 $PATH_WWW は組み込みの定数で、サイトのパスを表す文字列 (例: "www.flint.jp/blog/") に置き換えられます。 また、ノードやプロパティの状態 (有効/無効) を切り替えることで、グループ単位で、CSS出力のON/OFFを制御することも可能。 ……どうです？結構便利そうな機能だと思いませんか？

あ、「動的生成は重そう」と思ったそこのアナタ！ 心配はご無用。 生成結果はキャッシュとして保存されるので、読み出しのコストは静的ファイルを用いる場合と変わりません。

というわけで、主に自分で使うことを想定して作ったシステムですが、需要があれば、外部にも提供していきたいと考えています。 ただ、どれほどの需要があるか今ひとつ把握できない (Dreamweaver などのオーサリングツール使ってる人には興味を持たれなさそうな予感……) ので、もし「興味がある」「試しに使ってみたい」という方がいらっしゃいましたら、コメントを書き込むなどしてお知らせください。