htaccessでモバイル端末リダイレクト

Yuuです。

サイトを閲覧するデバイスによって、jsやphp、htaccessで振り分けってのはよくあります。 個人的にはhtaccessで制御したほうが楽なのでいつもそれでやっているので、今回はそれの備忘録です。

リダイレクト処理

スマートフォン、フィーチャーフォンにリダイレクト

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<IfModule mod_rewrite.c>
RewriteEngine On

#スマートフォン
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteCond %{REQUEST_URI} !\.ico$
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|Vodafone|MOT-|SoftBank|Up.Browser|KDDI|PDXGW|DDIPOKET|WILLCOM|ASTEL|Nokia|L-mode) [NC]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|BlackBerry) [NC]
RewriteRule ^(.*)$ /sp/ [R=301,L]

#フィーチャーフォン
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteCond %{REQUEST_URI} !\.ico$
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|Vodafone|MOT-|SoftBank|Up.Browser|KDDI|PDXGW|DDIPOKET|WILLCOM|ASTEL|Nokia|L-mode) [NC]
RewriteCond %{HTTP_USER_AGENT} !(iPhone|iPod|Android.*Mobile|BlackBerry) [NC]
RewriteRule ^(.*)$ /fp/ [R=301,L]

</IfModule>

HTTP_USER_AGENTでディレクトリ先変えるってのは、よくやります。

ただ、root階層にあるアイコン、画像、ファイルなんかもリダイレクトされてしまうので、それは回避してあげます。 ここはサイト構成によって変える必要があると思います。 端末ごとにリダイレクト処理の否定処理はいらないかなーとも思いますけど、一応。。。

スマートフォンPCサイト見れるようにする

to-Rさんのhtaccess振り分けを利用させて頂いてます。

1
2
3
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^/$ /iphone/ [R]

PC用とiPhone用のサイトを切り替える.htaccess

http://blog.webcreativepark.net/2010/07/08-121336.html

RewriteCondの値は最初の記述に変更しています。

1
2
3
RewriteCond %{QUERY_STRING} !mode=pc
RewriteCond %{HTTP_USER_AGENT} !(iPhone|iPod|Android.*Mobile|BlackBerry) [NC]
RewriteRule ^(.*)$ /sp/ [R=301,L]

リファラーでもいいかなーとは思います。

1
2
3
RewriteCond %{HTTP_REFERER} !/sp/.*$
RewriteCond %{HTTP_USER_AGENT} !(iPhone|iPod|Android.*Mobile|BlackBerry) [NC]
RewriteRule ^(.*)$ /sp/ [R=301,L]

RewriteRuleの書き方を変えてあげないと、パラメータを保持していないと下層ページいったときリダイレクトします。 さらに、index.htmlとかでアクセスしたとき、リダイレクト処理は走りませんのでご注意を。

ここまで書いて、何が問題かというとパラメータ保持のやり方がまだ分かってないという。そんな折、to-Rさんでjsが配布されておりました。 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 http://blog.webcreativepark.net/2012/04/19-120731.html

js切り替えですけど、次はちょっと試してみたいなーと思います。

Comments