レスポンシブWebデザインで作成する際にはあまり使わなくなったRewriteなのですが、空有すると結構いいかもしれないもの。
スマートフォンでアクセスしてきた時には、スマートフォン専用のページに遷移する。PCやタブレットでアクセスしてきた時には、PC・タブレット専用ページにRewriteして遷移するようにする。
ユーザーエージェントとは、ブラウザやそれを動かすためのデバイス・ハードをアクセスして来たときに、名称を取得できる。その取得した値を元にしてサーバー側で分岐させる方法。
目次
サンプルコード
直下の階層には、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>
こんな感じで分岐する。