RYO.dev

最終更新日:

URLパラメーターの値によってCSSを変更する

  1. どういうこと?
  2. コード
  3. コードの解説
  4. フィードバック

どういうこと?

例えば、次の3つのCSSファイルがあったとします。

プロトコル名からパス名まで全く一緒です。パラメーターの値のみが違います。

パラメーターの値を変えることで出力させるCSSを変えることができます。PHPを使えばね。

この記事では、どのようなコードでそれを実現するのかを紹介します。

コード

<php
$param = $_GET["css"];

if($param !== null) {
  header("Content-Type: text/css; charset=utf-8");
  header("X-Content-Type-Options: nosniff");

  $cssArr = [
    "h" => "/h.css",
    "li" => "/li.css"
  ];
  $root = $_SERVER["DOCUMENT_ROOT"];
  $paramArr = explode("-", htmlspecialchars($param));

  foreach ($paramArr as $type) {
    if(array_key_exists($type, $cssArr)) include($root.$cssArr[$type]);
  }
} else {
  echo "有効なパラメーターを入力してください。";
}

コードの解説

パラメーターの値をいずれいろいろな処理に使っていきたいので、まずは変数$paramにパラメーターの値を代入します。$_GETについて詳しくはこちら

$param = $_GET["css"];

cssパラメーターがない時、すなわち$paramnullの時はエラーメッセージを返すようにします。それ以外の時はCSSを出力する処理をします。この条件分岐はif文を使います。if文について詳しくはこちら

if($param !== null) {
  // CSS出力用の処理
} else {
  echo "有効なパラメーターを入力してください。";
}

次の2つのURLだとエラー文が表示されます。

次にCSS出力用の処理に関するコードについて説明していきます。

header()関数を使うとHTTPヘッダーを送信できます。HTTPヘッダーとは、Webページを表示させるためにクライアントとサーバー間の通信の中でやり取りされる、ブラウザやページに関する付加的な情報のことを指します。

Content-Typeヘッダーを指定することで、サーバーからどんな形式のファイルを受け取るのかを示します。形式はMIMEタイプで記述します。今回のコードで言えばtext/cssとなります。以下のコードをstyle.phpに指定することで、サーバーはstyle.phpをCSSファイルとしてクライアントに返します。

header("Content-Type: text/css; charset=utf-8");

X-Content-Type-Optionsヘッダーを指定しているのはMIMEスニッフィングを防止するためです。MIMEスニッフィングとは、ブラウザがリソースを確認してMIMEタイプを推測してしまう挙動のことです。以下のコードを指定することで、MIMEスニッフィングを防止し、Content-Typeヘッダーで示したMIMEタイプに従うようブラウザに伝えます。

header("X-Content-Type-Options: nosniff");

style.phpに出力したいCSSはそれぞれ個別のCSSファイルに書いておきます。$cssArr変数にはCSSファイルのパスとパスを識別するための文字(以下「トリガー文字」)のセットを配列で格納しておきます。CSSファイルのパスはルートディレクトリからのパスを書きます。

$cssArr = [
  "h" => "/h.css",
  "li" => "/li.css"
];

出力したいCSSに対応するトリガー文字をcssパラメーターの値として指定します。複数あるときはハイフン区切りで指定します。そうすることでincludeするCSSファイルを識別できます。includeするときに必要になるため、ルートディレクトリのパスも$root変数に格納しておきます。

$root = $_SERVER["DOCUMENT_ROOT"];

ハイフン区切りで連結されたトリガー文字を分解して配列にするために、explode()関数を使います。配列にする理由はforeachを使ってループでそれぞれのCSSファイルをincludeするためです。explode()関数について詳しくはこちら。エスケープ処理のためにhtmlspecialchars()関数を使っていますが、必要なのかどうかは分かりません...。

$paramArr = explode("-", htmlspecialchars($param));

トリガー文字が1つの時(e.g. ?css=h)は要素数が1である配列が$paramArr変数に格納されます。

$paramArr変数にはトリガー文字が配列形式で格納されているので、foreachを使って各トリガー文字に対応するCSSファイルをincludeします。ただ、$cssArr変数に含まれていないトリガー文字を含んでいる可能性もあるので、array_key_exists()関数を使って$paramArr変数内のトリガー文字が$cssArr変数のkeyとして存在しているかどうかを確認します。存在している場合のみCSSファイルをincludeします。array_key_exists()関数について詳しくはこちら

foreach ($paramArr as $type) {
  if(array_key_exists($type, $cssArr)) include($root.$cssArr[$type]);
}

以下のURLのパラメーターは「?css=g-h-li」ですが、「g」はトリガー文字として不適切です。しかしarray_key_exists()関数を使っているため、エラーなくCSSが出力されるはずです。

https://sample.com/style?css=g-h-li

フィードバック

もし誤った情報を見つけたり、お聞きしたいことがあったり、より良いコードを見つけた場合は、TwitterのDMメールにご連絡ください。