Rewish

ウェブデザイン、HTML、CSS、JavaScript、PHP、WordPress、Movable Typeなど、Web制作で役立つかも知れないBlog.

Search

Entry Search

CSSの@importを動的に1ファイルにまとめて圧縮するPHPのクラス「CSS_DynamicCompressor」

カテゴリー
PHP/MySQL
タグ
Download, HTTP

CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。

Googleがページの表示速度を検索結果に反映するとか言い出したりもしているので、これはもうリクエスト数を減らすしか無いですね！

でも手動でファイルを一つ一つ連結するのはとても面倒です！と言うわけで、そんな面倒な作業を自動でやってくれるPHPのクラスを書いてみました。

目次

概要

@importで複数のファイルを読み込んでいるCSSを、動的に解析し、連結・圧縮を行います。また、表示する際にLast-ModifiedやExpiresなどのHTTPヘッダーを送出したり、gzip圧縮を行うなど、リクエストを出来るだけ軽減できるようにしています。

具体的には/share/css/_import.cssが/share/css/import.cssのようになります。

ダウンロード

css_dynamic_compressor.zip - v0.1

※PHP5以上で動作します。

ファイルの内容は以下の通りです。

  • CSS_DynamicCompressor.php
  • css.php
  • .htaccess

開発版はhttp://github.com/rewish/CSS_DynamicCompressor

使い方

以下の4つの使い方を想定しています。環境に合わせて最良の方法を選択して下さい。

以下の例の前提条件として、@importを使用しているファイルの名前はimport.cssとします。

mod_rewriteを使う

既存のHTMLを書き換えずに導入することが出来ます。

以下のようにCSSを読み込んでいる場合は、

<link rel="stylesheet" type="text/css" 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" type="text/css" 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" type="text/css" href="/css/css.php">

キャッシュファイルをそのまま読み込む

CSS_DynamicCompressor.php・css.phpを/css/ディレクトリにコピーしてブラウザから/css/css.phpにアクセスして書き出されるファイルをlink要素で普通に読み込む。

<link rel="stylesheet" type="text/css" 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ファイルが置かれているディレクトリをフルパスで指定 カレントのワーキングディレクトリ
setCSSFiles CSSファイルの名前を配列で指定
指定した場合@importの自動読み込みは行われません		 空
setBaseUrl File listのベースURL
空の場合[File list]は表示されません		 空

圧縮のみ実行したい場合は->compression();を、圧縮から表示までを一括で実行したい場合は->display();を最後に呼んで下さい。

注意点

PHPにファイルの書き込み権限が無い場合、キャッシュファイルが書き出されません。その場合は、ディレクトリのパーミッションを変更したり、キャッシュファイルを予め作成してパーミッションを変更しておくなどの対策を行ってください。

※キャッシュが無い場合、毎回圧縮処理を行うのでちょっと重たいです。