コピペで使える!phpとjavascriptでCSSを振り分ける方法

コピペで使える!PHPとjavascriptでuseragentを取得してCSSを振り分ける方法

久しぶりの記事です。
今日は改めてUA(User Agent)と取得して分岐させるってのを
じっくり考えてみようと思います。

今まで、魔法の言葉的な感じで覚えちゃってたので・・・

PHPを使ってuaを取得しよう

まずはPHPを使ってユーザーエージェントを取得してみます。

	<?php
		$ua = $_SERVER['HTTP_USER_AGENT'];
		var_dump($ua);
	?>

まず見て行きましょう。
$uaは勝手に作った配列。

$_SERVERという変数は「サーバー情報および実行時の環境情報」、ヘッダ、パス、スクリプトの位置のような情報を有する配列とのこと。

HTTP_USER_AGENTは
現在のリクエストにUser-Agent:ヘッダがあればその内容を・・・と言うことです。

実行結果は・・・

string(109) “Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36”

ちなみにiphone5に偽装してアクセスしてみます。

string(142) “Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53”

iPad

string(126) “Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53”

nexus7

string(127) “Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36”

sony Xperia Z,Z1

string(144) “Mozilla/5.0 (Linux; U; Android 4.2; en-us; SonyC6903 Build/14.1.G.1.518) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30”

ということで、iPhoneとAndroidという文字列が入っていたら、もしくは入っていなかったらといった条件分岐を作ればいいわけですね。
※もっとしっかり分けたい場合は色々探ってみてください。

完成形

<?php
if (preg_match('/(iPhone|iPod|iPad|Android)/i', $_SERVER['HTTP_USER_AGENT'])) {
 $userDevice = 'smartPhone';
}
if ($ua === 'smartPhone') {
 echo '<link rel="stylesheet" type="text/css" href="./css/sp.css" />';
} else {
 echo '<link rel="stylesheet" type="text/css" href="./css/pc.css" />';
}
?>

※preg_matchは正規表現によるマッチングを行います。

phpが使える環境であればこっちでいいですね。
ただphpが使えない環境であればjavascriptの出番

javascriptを使ってuaを取得しよう

さて今度はjavascriptを使ってユーザーエージェントを取得してみます。

<script>
  document.write(navigator.userAgent);
</script>

これの結果は

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36

さっきと一緒ですね。
では作っていきましょう。

まずuaという変数を作ります。
そしてよく見かけるのがindexOfを使う方法
※indexOfは指定したキーワードの発見位置を返すみたいです。
キーワードがなければ”-1”を返す。

これを使ってやっていきましょう。

if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 ) || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    document.write( '<link rel="stylesheet" type="text/css" href="./css/sp.css" />' );
} else {
    document.write ('<link rel="stylesheet" type="text/css" href="./css/pc.css" />');
}

完成。

こういう感じにCSSを切り替えたり、読み込むテンプレートファイルを変えたりってのをすると、色々なデバイスに対応することができますね。

ちなみに、OSを見たいときは

<script>
    document.write(navigator.platform);
</script>

としてあげましょう。

結果は・・・

Win32

ということです。

windowsとmacで分けるときにも便利ですね。

PHPでやる場合は

<?php
 if (preg_match('/Mac/',$_SERVER['HTTP_USER_AGENT'])) {
  echo 'mac!';
 } elseif(preg_match('/Windows/',$_SERVER['HTTP_USER_AGENT'])) {
  echo 'windows!!';
 } else {
  echo 'スマホかタブレット!';
 }
?>

コピペで使える便利な振り分けでした!

関連記事