メディアクエリを使ってデバイスの幅でCSSを切り替えるレスポンシブデザイン。素敵ですよね・・・。僕もリキッドレイアウトでサイトを作ってみたいなと思うものの、なかなか時間が取れず取り組めてないです。今回はそんなレスポンシブデザインとは違う、昔ながらのPHPでユーザーエージェント情報を取得してクロスブラウザなりデバイスを実現する手法をご紹介しようと思います。
まずは肝心なユーザーエージェント情報ですがこちらのページをご覧になってください。ページの上部に、
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
（※上記はウインドウズのPCかつクロームで閲覧した場合です）
という文字列が出てくると思います。もちろん見る人の環境によって文字列の中身は変わります。これがユーザーエージェント情報です。この文字列の中身をPHPで判別して行くわけです。では早速ユーザー情報を取得してみましょう。
<?php
echo getenv("HTTP_USER_AGENT");
?>
または
<?php echo $_SERVER['HTTP_USER_AGENT']; ?>
この記述をPHPファイルの<body>の中に記述してください。そして、サーバーにUPして確認をしていただくと先ほどのようなユーザーエージェント情報が出てくると思います。
ちなみに、書き方は違いますがjavaScriptでもユーザーエージェント情報は取得できます。ただ、このままの状態では単に情報を表示させているだけなので今回はPCサイトを
PCで閲覧→PCサイトを表示
スマホで閲覧→スマホサイトを表示
という振り分けをしていこうと思います。今回はgetenv()を使用します。PCサイトのindex.phpに下記の記述を加えてください。
(※ここ以下のPHPの記述はHTMLのソースコードより必ず上に記述してください。先ほどの<body>の中の記述は消していただいて大丈夫です。)
PCサイトにスマホでアクセスしたらスマホサイトに飛ばす
<?php
$agent = getenv("HTTP_USER_AGENT");
if (mb_ereg("iPhone", $agent) or mb_ereg("iPad", $agent) or mb_ereg("Android", $agent)) {
header('Location: スマホサイトへのファイルのパス');
exit();
}
?>
上記のコードの「スマホサイトへのファイルのパス」の部分を書き換えてください。ちなみに絶対パスでも相対パスでもどちらでも構わないです。
では今度は逆にスマホサイトにPCでアクセスしてきたらPCサイトを表示するようにしていきます。スマホサイトのindex.phpに下記の記述を追加してください。
(※ここ以下のPHPの記述も必ずHTMLのソースコードより上に記述してください。)
スマホサイトにPCでアクセスしたらPCサイトに飛ばす
<?php
$agent = getenv("HTTP_USER_AGENT");
if (!(mb_ereg("iPhone", $agent) or mb_ereg("iPad", $agent) or mb_ereg("Android", $agent))) {
header('Location: PCサイトへのファイルのパス');
exit();
}
?>
上記のコードもPCサイトと同じようにパスを自分の環境に合わせて書き換えてください。
最後に赤文字で何回もHTMLのコードより上に書いてくださいと言っている理由と「HTMLより上に書く」のサンプルコードを書いておきます。
今回のPHPの記述はheader()というPHPの関数を使用しています。この関数は強制的に別ページにユーザーを飛ばす力を持っています。HTMLのコードが上から順番にブラウザに読まれるのと同じようにPHPのコードも上から順番に読まれます。
今回の記述はユーザーエージェント情報に「iphone」「ipad」「Android」という文字列が入っていたらスマホサイトまで飛ばしているわけです。要するにHTMLのコードが読まれる前にPHPの記述が読まれなければいけない訳です。
ではサンプルを最後に・・・。
<?php
$agent = getenv("HTTP_USER_AGENT");
if (!(mb_ereg("iPhone", $agent) or mb_ereg("iPad", $agent) or mb_ereg("Android", $agent))) {
header('Location: PCサイトへのファイルのパス');
exit();
}
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
~以下略~
PHP タグ: PHP
