自分がラクをするための自動化のススメ--WebデザイナのためのPHP入門

ブラウザごとのCSSファイルを記述する

　WebブラウザごとにCSSを振り分ける方法には、JavaScriptを利用する方法やCSSハックを利用する方法など、さまざまある。しかし、環境によって動作しなかったり、特定のブラウザに向けてCSSを作成するのが難しかったりする。そんなときも、PHPを利用すれば便利だ。

　次の記述を見てみよう。

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false): ?>
<link href="/ie_only.css" rel="stylesheet" type="text/css" media="all" />
<?php endif; ?>

　この記述で、Internet Explorerの場合のみ読み込むCSSファイルを作成することができる。他のWebブラウザの場合には記述すらされないので、ハックなどを使う必要はない。若干プログラムは複雑だが、注目するのは「MSIE」という部分だけでかまわない。

　「$_SERVER」という記述は「サーバー変数」といって、Webサーバーが管理している様々な情報を利用することができる。ここでは、 HTTP_USER_AGENT（エージェント情報）と呼ばれるWebブラウザそれぞれが持っている固有の名前を判断し、CSSファイルを出し分けているのだ。例えば、WindowsのInternet Explorer 6の場合、エージェント情報は次のようになる。

Mozilla/4.0 (compatible; MSIE 6.0; Windows XP)

　使っている環境などによって、若干変わるがIEの場合は必ずその中に「MSIE」という文字が潜んでいるのだ。それを「strpos」という「含まれているかを検査する」ファンクションで比べている。他にも、次のように記述すれば環境に応じてCSSファイルを分けることが可能だ。

Firefoxの場合

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false): ?>
<link href="/firefox_only.css" rel="stylesheet" type="text/css" media="all" />
<?php endif; ?>

Safariの場合

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false): ?>
<link href="/safari_only.css" rel="stylesheet" type="text/css" media="all" />
<?php endif; ?>

IE6の場合

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') !== false): ?>
<link href="/ie6_only.css" rel="stylesheet" type="text/css" media="all" />
<?php endif; ?>

Wii（任天堂ゲーム機）の場合

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Nintendo Wii') !== false): ?>
<link href="/wii_only.css" rel="stylesheet" type="text/css" media="all" />
<?php endif; ?>

　このように、エージェント情報はパソコン用Webブラウザに限らず、ゲーム機、携帯電話などほぼすべてのWebブラウザが固有の情報を持っている。また、バージョン情報や搭載されているOSの種類、バージョンなども取得できるものがあるので、細かく制御することも可能だ。

　端末ごとのページを準備したり、どうしてもWebブラウザ特有の現象などで悩んだときは使ってみてもよいだろう。

　上部のような記述をすると、Dreamweaverでの編集作業中など、PHPが動作しない状況でもCSSを読み込ませて、デザインを再現することができる。ただし、逆にすべてのCSSファイルが無条件で読み込まれてしまうため、デザインが崩れることもあるだろう。そんなときは、次のように記述するとよい。

<?php print('<link href="/safari_only.css" rel="stylesheet" type="text/css" media="all" />'); ?>

　「print」というファンクションは、PHPによってHTMLに記述するファンクションで、PHPが動作しない場合にはCSSファイルが読み込まれることもない。こうして、特定のCSSを読み込ませた状態でデザインをしていけば、調整も楽になるだろう。

　いかがだろうか。PHPは難しいと感じていたかもしれないが、実際には数文字記述するだけで十分実用的なスクリプトを記述することもできる。内容も、簡単な英単語の組み合わせであり、理解できないこともないだろう。

　このような実用的なスクリプトをまずは使いながら、少しずつ自分好みにカスタマイズしていったり、別のスクリプトに応用するなどして、少しずつ慣れ親しんでいけば、いつか自分なりのスクリプトを作ることができるだろう。まずは、使ってみよう。

　次回はPHPを扱うに際して忘れてはいけない、セキュリティについて紹介しよう。