2011 . 07 . 11
BoxCss : 個別のCSSを一まとめに圧縮してパッケージ化してくれるサービス
ごく単純なウェブページは別として、柔軟性やメンテナンスの点からもCSSを部分別で複数のファイルに小分けにしているところも少なくありません。
しかし多岐に細分化することによって気になるところが、オーバーヘッドによるパフォーマンスの低下。
今回紹介するBoxCssはこのような問題をお手軽に解決してくれるウェブサービスで、リクエスト送信された複数のCSS（LESS）を単一のファイルにパッケージングして、さらにそれを圧縮した状態で返してくれるものです。
また、キャッシュ機能（デフォルトは有効）が付いているので2回目以降のリクエストからはキャッシュが有効になります。
使い方は以下のようにCSSのリンクタグ書き換えるだけです。
<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css&include=style1.css,style2.css,style3.css,style4.css" />
下線部分に実際のCSSが置かれているディレクトリ、その後の「include」に続いてCSSファイルをカンマ区切りで繋げていけばOKです。（「.less」にも対応）
その他にもオプションとしていくつかのパラメータが用意されています。
【圧縮の有無】
- minify = true (default) or false
【キャッシュの有無】
- cache = true (default) or false
【キャッシュバージョン】
- version = 1 (default) or 1.1.2
対応ブラウザは以下のとおりです。
- Google Chrome 4.0+
- Firefox 2.0+
- Safari 3.0+
- IE 6.0+
- Opera 9+
さて、およそプロならばこのような問題は自前で解決するところかもしれませんが、そういったスキルや時間や手間を必要としないソリューションとしてはそれなりに価値があるサービスと思います。
なお、姉妹サービスとして複数のJavascriptをパッケージングする『BoxJS』も提供されていますので、興味のある方は試してみてはいかがでしょう。
