PHP で CSS や JavaScript を動的に生成・配信する方法

この記事を読むのに必要な時間は約 8 分です。

CSS や JavaScript を用意する際に、PHP で動的な処理を行いたい場合があるかと思います。その際に必要な設定、コードをご紹介したいと思います。

例えば、PHP 上で定義されている、プロジェクト固有の定数などを、JavaScript や CSS でも利用したい場合などに役立つかも知れません。

なお、CakePHP のフレームワークに載せる場合については、以下の記事でご紹介しています。
CakePHP 2.x で CSS や JavaScript を動的に生成・配信する方法

必要な作業

以下の作業が必要になります。

特に指定を行っていないと、PHP 処理を通した結果は、HTML ファイルとしてブラウザに配信されます。そのままだと、ブラウザが css / js ファイルとして解釈してくれません。

ブラウザに css / js ファイルとして扱ってもらうために、MIME type を “Content-Type” で指定する必要があります。JavaScript の場合の例は、以下のようになります。

<?php
 header("Content-Type: text/javascript");
?>

var str = "<?php echo "hello, world." . FUGA_CONSTANT; ?>";
...

Header の指定は、PHP 処理を通した全ての css / js で指定が必要です。<?php 〜 ?> の記述がなくても必要です。

require などで、共通の php を読み込み、その中で処理するようにしておくと良いかと思います。

あとは、通常の HTML 用と同じ要領でコーディングしていけば OK です。

ファイルに直接アクセスしてエラーがないのに、反映されない場合は、MIME type が設定されていない (text/html になっている) 可能性がありますので、確認しましょう。

css / js ファイルを PHP で処理する際に、”●●.css” や “●●.js” というファイル名 (URL) でアクセスしてもらう場合、Apache 等 Web サーバーへの設定が必要になります。

レンタルサーバー等では、変更できない場合もあります。その場合は、”●●.php” のように、PHP が動作するファイル名 (URL) でアクセスしてもらうようにすれば、動作します。

httpd.conf あるいは、css / js ファイルを配置しているディレクトリの .htaccess にて、以下のように設定します。

以下の例は、JavaScript の例です。

<FilesMatch \.js$>
  SetHandler application/x-httpd-php
</FilesMatch>

ポイントは、以下の通りです。

FilesMatch ディレクティブで、”●●.js” のように、.js ファイルへのリクエストに対して指定しています。
- css の場合は、js を css に変更すれば OK です。
SetHandler で、php 処理するよ、という指定をしています。

読込元となる HTML で、以下のように指定すれば OK です。

<html>
<head>
...
  <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.php">
...
</head>
</html>

要は、以下の流れができれば OK です。

a. が、HTML 上での記載になります。ここで、URL として “●●.css” や “●●.js” となっていようが、”●●.php” となっていようが、ブラウザは b. のリクエスト処理を行ってくれます。

c. のサーバー側の処理で、Apache の設定が必要になったりします。”.php” であれば Apache は PHP 処理するものだと既に設定されています。”.css” や “.js” だと、サーバー側は PHP 処理するものだと知らないため、処理してね、と設定を追加しておく必要があります。

d. でサーバーからブラウザにレスポンスする際に、1. header 指定で紹介した Content-Type の設定が必要になります。これを行わないと、ブラウザは css / js かと思ったら HTML が返ってきちゃった、として処理を進めてくれません。

e. ここまでが適切に処理されていれば、無事ブラウザで css / js として解釈され、意図した表示が行われます。

今回ご紹介した方法で、動的な css / js の生成は可能となります。今回の記事では扱っていませんが、キャッシュの設定などにも注意が必要です。

css / js の場合、静的なもので通常の設定ですと、レスポンス向上のために、ブラウザにキャッシュされることが多いかと思います。

キャッシュされたことで予期せぬ動作にならぬよう、キャッシュの設定も合わせて見直しておくと良いかと思います。

今回は以上です。

[pn-amzn-cakephp]