オンラインCSS解析 StyleStats.org

前回スタイルシートの統計情報を出力するNode Packageを作ったわけだけど、やっぱりオンライン上で簡単に試せれたらいいよねーってことで、オンラインツールを作った。

使い方は、URLを入力するか、ローカルのファイルをアップロードするか、直接入力するか3種類選ぶことができる。

URLを入力するのが一番簡単なのでオススメ。自分の作ったサイトとか入力してみるといい。基本コマンドラインツールとしていることは同じなんだけど、Unique Colorのプレビューが見れるので『色使い過ぎだなー』とか実感出来る仕様になっている。

1px毎にフォントサイズが本当に必要なのか、この色と色はほとんど同じだけどマージできないのか、といったことを、結果を見ながらデザイナーと話し合うのに便利じゃないかな。やはり共通言語は数字だと思う。

あとはある程度validなCSSじゃないとパースエラーになって解析できない。たぶんCSSハックとか使ってるとエラーになると思う。

将来的にはDBに結果を貯めて期間で結果の変遷とか確認できるようにできたらいいなと思う(リファクタリングがどれだけできたのかとか確認できる)。

CSSとは関係ないけどStyleStats.orgは、Node.js(Express) on Herokuで運用していて、いろいろ初めてで戸惑うこともあったけど、git push heroku masterでデプロイできるのはとっても簡単だなと思った。

もっといろんなアプリケーション作ってみたいなぁと思いました、まる。