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

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


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

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

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

LogoPHP


スポンサーリンク
スポンサーリンク

必要な作業

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

  1. css / js ファイルにて、header の MIME type を指定します。
  2. Web サーバーで、PHP 処理を動かすために設定を変更します。

1. css / js ファイルにて、header の MIME type を指定する

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

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

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

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

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

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

2. Web サーバーで、PHP 処理を動かすための設定

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

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

Apache での設定方法

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

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

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

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

Web サーバーの設定を変更できない場合

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

css / js を動的生成する場合の流れ

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

  1. ブラウザに css / js はこれだよ、と伝える
  2. ブラウザは、サーバーに css / js として、これちょうだい、とリクエスト
  3. サーバーが、リクエストされたものは PHP 処理するものだと理解する
  4. サーバーは PHP 処理を済ませたものを、ブラウザに css / js だよ、としてレスポンスする
  5. ブラウザは css / js として解釈する

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

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


今回は以上です。


スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です