.htaccessで、ユーザーエージェントを元に表示させるページを分岐させる方法

レスポンシブWebデザインで作成する際にはあまり使わなくなったRewriteなのですが、空有すると結構いいかもしれないもの。

スマートフォンでアクセスしてきた時には、スマートフォン専用のページに遷移する。PCやタブレットでアクセスしてきた時には、PC・タブレット専用ページにRewriteして遷移するようにする。

ユーザーエージェントとは、ブラウザやそれを動かすためのデバイス・ハードをアクセスして来たときに、名称を取得できる。その取得した値を元にしてサーバー側で分岐させる方法。

1 サンプルコード
2 特定のディレクトリだけRewrite
3 他の解決方法・代替案
- 3.1 レスポンシブWebデザイン
4 PHPで分岐
- 4.1 ユーザーエージェントを取得するコード
- 4.2 ユーザーエージェントを元にして分岐するコード
5 JavaScriptで分岐

サンプルコード

直下の階層には、PC・タブレット用のファイルが入っていて、/sp/フォルダ内には、スマートフォン用の静的ページが入っているときに以下のように.htaccessを記述すると、Rewriteされるサンプルコードスニペット。

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

特定のディレクトリだけRewrite

ちょっと変わった方法。特別なディレクトリのみにRewriteを適用する。

RewriteEngine on

RewriteCond %{REQUEST_URI} !/special/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /special/

RewriteCond %{REQUEST_URI} /special/sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android\ Phone)
RewriteRule ^special/sp/(.*)$ $1 [R]
RewriteBase /special/

他の解決方法・代替案

.htaccessで解決するのが良さげならばその方法で分岐させるのが良い。そうじゃない場合は別の解決方法や代替案で対応するのが吉。

レスポンシブWebデザイン

そもそも、ユーザーエージェントをチェックしないで、単純に既存のページをCSSでうまいこと記述して、スマートフォンなどに対応する方法。

あるいは、がっさりと、記述内容を変えてしまったり・レスポンシブWebデザインを前提として構築を進めるのならば、他のページを作成しなくていいので、こちらが吉になることも。

PHPで分岐

.htaccessで分岐するのもよいが、PHPのほうが管理しやすい時にはPHPでもユーザーエージェントの値が取得可能なので、それを使って分岐させるという方法。

$ua = $_SERVER['HTTP_USER_AGENT'];
if (stripos($ua, 'iphone') !== false || // iphone
stripos($ua, 'ipod') !== false || // ipod
(stripos($ua, 'android') !== false && stripos($ua, 'mobile') !== false) || // android mobile
) {

} else {

}

ユーザーエージェントを取得するコード

$ua = $_SERVER['HTTP_USER_AGENT'];// ユーザエージェントを取得

ユーザーエージェントを元にして分岐するコード

if (stripos($ua, 'iphone') !== false || // iphone
stripos($ua, 'ipod') !== false || // ipod
(stripos($ua, 'android') !== false && stripos($ua, 'mobile') !== false) || // android mobile
) {
	// smartphone
} else {
	// pc & tablet
}

JavaScriptで分岐

手間なときやそこまで…、と難しい対応を行わない時には、

<script>
var ua = navigator.userAgent.toLowerCase();
 
if (
	(ua.indexOf('iphone') > -1) ||
	(ua.indexOf('ipad') > -1) ||
	(ua.indexOf('android') > -1) && (ua.indexOf('mobile') > -1)
)
{
	// smartphone
	document.write('smartphone');
} else {
	// pc & tablet
	document.write('pc & tablet');
}
</script>

こんな感じで分岐する。

プロフィール