CSSの@importを動的に1ファイルにまとめて圧縮するPHPのクラス「CSS_DynamicCompressor」
CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。
Googleがページの表示速度を検索結果に反映するとか言い出したりもしているので、これはもうリクエスト数を減らすしか無いですね！
でも手動でファイルを一つ一つ連結するのはとても面倒です！と言うわけで、そんな面倒な作業を自動でやってくれるPHPのクラスを書いてみました。
ライブラリについて
@importで複数のファイルを読み込んでいるCSSを、動的に解析し、連結・圧縮を行います。また、表示する際にLast-ModifiedやExpiresなどのHTTPヘッダーを送出したり、gzip圧縮を行うなど、リクエストを出来るだけ軽減できるようにしています。
ダウンロード
ライセンス
MIT License
使い方
以下の4つの使い方を想定しています。環境に合わせて最良の方法を選択して下さい。
以下の例の前提条件として、@import を使用しているファイルの名前はimport.cssとします。
mod_rewriteを使う
既存のHTMLを書き換えずに導入することが出来ます。
以下のようにCSSを読み込んでいる場合は、
<link rel="stylesheet" href="/css/import.css">
/css/ディレクトリに、CSS_DynamicCompressor.php・css.php・.htaccessをコピーすればOKです。
動かない場合は、.htaccessやmod_rewriteが使えない可能性があります。
拡張子.cssでPHPを実行する
mod_rewrite同様、既存のHTMLを書き換える必要はありませんが、若干作業が増えます。
設定方法はサーバーによって異なるので、不明な場合はサーバー管理者に問い合わせて下さい。
# .cssでPHPを実行する設定の一例
AddHandler application/x-httpd-php .php .css
以下のようにCSSを読み込んでいる場合は、
<link rel="stylesheet" href="/css/import.css">
import.cssを_import.cssなど適当にリネーム。
CSS_DynamicCompressor.php・css.phpを/css/ディレクトリにコピーして、css.phpの以下の部分を編集して下さい。
//->setTarget('import.css')
↓
->setTarget('_import.css')
編集した後、css.phpをimport.cssにリネームすればOKです。
link要素で直接PHPを読み込む
CSS_DynamicCompressor.php・css.phpを/css/ディレクトリにコピーして、link要素でcss.phpを読み込むだけ。
<link rel="stylesheet" href="/css/css.php">
キャッシュファイルをそのまま読み込む
CSS_DynamicCompressor.php・css.phpを/css/ディレクトリにコピーしてブラウザから/css/css.phpにアクセスして書き出されるファイルをlink要素で普通に読み込む。
<link rel="stylesheet" href="/css/_cache.css">
書き出されるキャッシュファイルの名前を変更したい場合はcss.phpを編集。
//->setCache('_cahce.css')
↓
->setCache('hoge.css')
この方法のメリットは、PHP5が動けばほぼ確実に使えること、静的ファイルなので若干軽いと言うことですが、キャッシュ関連のHTTPヘッダーやgzip圧縮などは、サーバーの設定に依存します。
各種設定
CSS_DynamicCompressor::getInstance()でインスタンスを取得して、メソッドチェーンで設定を記述する事が出来ます。->setHoge('fuga')みたいな感じですね。
設定のひな形はcss.phpに記述してありますので、参考にしながら色々試してみて下さい。
| メソッド | 説明 | 初期値 |
|---|---|---|
| setCharset | 文字コードを指定 | UTF-8 |
| setTarget | @importしているファイルの名前を指定 | import.css |
| setCache | キャッシュファイルの名前を指定 | _cache.css |
| setExpireDay | Expiresヘッダーに付与する日数（X日後） | 30日後 |
| setDirectory | CSSのディレクトリをフルパスで指定 | $CWD |
| setCSSFiles | CSSファイルを配列で指定 | 空 |
| setBaseUrl | File listのベースURL | 空 |
圧縮のみ実行したい場合は->compression();を、圧縮から表示までを一括で実行したい場合は->display();を最後に呼んで下さい。
注意点
PHPにファイルの書き込み権限が無い場合、キャッシュファイルが書き出されません。その場合は、ディレクトリのパーミッションを変更したり、キャッシュファイルを予め作成してパーミッションを変更しておくなどの対策を行ってください。
※キャッシュが無い場合、毎回圧縮処理を行うのでちょっと重たいです。