Skip to content →

プリプロセッサの一歩先へ

昨年末あたりから日本のWebデザイナーさんたちの間でも「LESS」「Sass+Compass」「Stylus」といったCSSプリプロセッサの話題が出るようになってきました。いや、実際あるとないとでは作業効率も違いますし、どれか一個でも覚えておけばどうにかなりますからね。まだの人は早めに試してみましょう。

で、このサイトを立ち上げた時にもちょっと書いてるんですが、主にフロントエンド部分の開発手法というのが大きく様変わりしようとしています。それは、より効率的にみたいな面も含め、やり方そのものも変わるんじゃないか?ぐらいの勢いで(CMSはまぁCMSとしておいといて)。ツールは黒い画面を使うものを中心に拡がりをみせてますが、いよいよGUIを介したものも出てきています。

CSSプリプロセッサだけじゃないの

こういったツールが何をするかっていうと、CSSプリプロセッサをベースにコンパイルするのはどれも当たり前、外部のHTMLを読み込んだり変数を使ってHTMLをテンプレート化、それらをまとめてビルドしてパブリッシュ。そんなアプリを作るみたいなワークフローとでも言えばいいでしょうか。もちろん作業途中は自動でブラウザをリロードする、みたいなね。

Hammer for Mac

hammer-for-mac

Hammer for Mac」は以前も紹介してますが、OS X専用のアプリです。こちらは外部のHTMLを読み込んだり、変数を定義してテンプレート化して作業効率をあげちゃおうってな感じ。

CSSプリプロセッサはSass&SCSSで、CoffeeScriptも使えます。

CodeKit + Kit Language

kit-language

こういった流れに乗ってきたのかどうかは知りませんが、いろいろなCSSプリプロセッサやHTMLのテンプレートエンジンのコンパイルなんかを一手に引き受けるCodeKitにも「Kit Language」なるものが導入されました。

Hammerと同じように外部ファイルのインポートやテンプレートを使って効率化&コンパイル、みたいな流れですね。

Mixture

mixture-io

で、最後に期待の新星「Mixture」。まだ正式なリリースはされてなくて、今のうちにサイトからメアドを登録すると先行して触れるようです。こちらはOS Xだけじゃなく、Windowsにも対応しているみたい。

サイトの説明を見る感じでは、先のふたつの機能にちょっとJSのMV*フレームワークみたいなのがくっついてる感じでしょうかね。期待大です。


この他にも「Roots」とかいろいろあるんですけど、それは黒い画面なのでここでは紹介しません(黒い画面触れたら、説明しなくてもたぶん使えるので)。

既に世の中はCSSプリプロセッサ+αに向かっています。フロントエンドの制作手法は、これからますます変わっていくんじゃないかなぁ…。いろんなものの境目が曖昧になってきてますね。

あ、そうだ。コレが良いだのアレが良いだのではなく、何に向いてるかで使い分けた方が良いですよ、たぶん。

Published in articles