ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

【まとめ】ユーザーエージェントでPCとスマホを振り分ける。PHP、JavaScript、.htaccess、WordPress【コピペ用サンプルコード付き】

time 2013/09/20

PHP、JavaScript、.htaccessのサンプルコードを用意してみました。

スマホはLINEとTwitterとカメラアプリぐらいしか使わなくなってしまったColorFullWebですが

自分は使わなくてもスマホ対応はしなくてはいけないわけで

さっそく判別方法まとめです。

サンプルコードはコピペで動くようにしたのでぜひ試してみてください。

スマホ振り分けの簡単なしくみ

javascriptとかphpには今ユーザーが使っているブラウザや端末を調べる関数があり、

その関数を使って判別しています。説明終わり。

以下サンプルです。
ブラウザやキャリアによってテキスト表示が変わります。
↓いろんなブラウザでお試しください。

あなたの現在のユーザーエージェントは:

です。

javascriptで振り分ける場合(コピペ可)

細かいことは考えず、
デスクトップに「test.html」とかいうファイルを作って、
コピペです。
ipadやAndroidタブレットはPCとして認識するようにしています。
スマホの時だけブラウザに「スマホぬーん」と表示されます。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascriptでスマホ判別ぬーん</title>
	<script type="text/javascript">
	window.onload = function(){
	var UA = navigator.userAgent;
	if (
	//判別条件start
		(UA.indexOf('iPhone') !== -1)//iphoneか、
		 || ((UA.indexOf('Android') !== -1) && (UA.indexOf('Mobile') !== -1))//またはAndroidMobile端末、
		 || (UA.indexOf('Windows Phone') !== -1)//またはWindowsPhone、
		 || (UA.indexOf('BlackBerry') !== -1) //またはBlackBerryの場合
	//判別条件end
	) {

	//ココに実行する処理を書く。
	document.getElementById("sumaho").innerHTML = '<p>スマホぬーん</p>';
	};
	}
	</script>
</head>
<body>
<div id="sumaho"></div>
</body>
</html>

phpで振り分ける場合(コピペ可)

これも細かいことを考えたら負けなので、
PHP動作環境(xamppかテストサーバー)に「test.php」とかいうファイルを作って、
コピペです。
これもipadやAndroidタブレットはPCとして認識するようにしています。
スマホの時だけブラウザに「スマホぬーん」と表示されます。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>phpでスマホ判別ぬーん</title>
</head>
<body>
<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	//判別条件start
		(strpos($ua, 'iPhone') !== false)//iphoneか、
		 || ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false))//またはAndroidMobile端末、
		 || (strpos($ua, 'Windows Phone') !== false)//またはWindowsPhone、
		 || (strpos($ua, 'BlackBerry') !== false)//またはBlackBerryの場合
	//判別条件end
	 ) {

		//ココに実行する処理を書く。
		echo '<p>スマホぬーん</p>';

	}
?>
</body>
</html>

.htaccessで振り分ける場合(コピペ可)

.htaccessファイルに以下を記述

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^$ /sumaho_nu-n/ [R,L]

スマホの時だけURLに「/sumaho_nu-n/」がひっつきます。
(普段はこれをspとかにしています)

wordpressには専用関数があります。

プログラムとかわからない!っていう人はwp_is_mobile();っていう関数があるのでこっち使ったほうがいいと思います。

ColorFullWebは普段使わないので参考リンクです。
(細かく設定する場合は結局functions.phpでいじる必要があるので使わないです。)

wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム

wp_is_mobile();の内容

ちなみにwp_is_mobile関数
wp-includesフォルダのvars.phpで登録されていて
(コアファイルだから直接いじるのはNG)
関数の内容は

function wp_is_mobile() {
	static $is_mobile;

	if ( isset($is_mobile) )
		return $is_mobile;

	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}

とこんな感じでした。
まぁやってることはだいたい同じですね。

以上まとめでした。

down

コメントする