Web システムのツボ

htaccessでPC,モバイル,スマートフォンサイトの振り分け

スマートフォンの普及により、PC、モバイル、スマートフォンと3種類のサイトを作成する案件が増えてきました。
そこで、htaccessを使用して各サイトへ振り分けする方法をご紹介します。

例では、
/     ・・・ドキュメントルートをPCサイト
/mb/ ・・・モバイルサイト
/sm/ ・・・スマートフォンサイト
とします。

振り分けの流れは、このようになります。

<モバイルサイトにアクセスがあった場合>
1.スマートフォンでアクセスがあると、「mb」フォルダパスを「sm」に置き換える
2.モバイル以外からアクセスがある(PCからアクセスがある)と、「mb」フォルダパスを削除

<スマートフォンサイトにアクセスがあった場合>
3.モバイルからアクセスがあると、「sm」フォルダパスを「mb」に置き換える
4.スマホとモバイル以外からアクセスがある(PCからアクセスがある)と、「mb」フォルダパスを削除

<PCサイトにアクセスがあった場合>
5.モバイルからアクセスがあると、「mb」フォルダパスを付与する
6.スマートフォンからアクセスがあると、「sm」フォルダパスを付与する


<htaccessの記述>
RewriteEngine On
RewriteBase / # 1.No enter except MOBILE(SMART)
RewriteCond %{REQUEST_URI} ^/mb/
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android).*$
RewriteRule ^mb(.*)$ sm$1 [R]
# 2.No enter except MOBILE(PC)
RewriteCond %{REQUEST_URI} ^/mb/
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$
RewriteRule ^mb(.*)$ $1 [R]
# 3.No enter except SMART(MOBILE)
RewriteCond %{REQUEST_URI} ^/sm/
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$
RewriteRule ^sm(.*)$ mb$1 [R]
# 4.No enter except SMART(PC)
RewriteCond %{REQUEST_URI} ^/sm/
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank|.*iPhone|.*iPod|.*Android).*$
RewriteRule ^sm(.*)$ $1 [R]
# 5.No enter except PC(MOBILE)
RewriteCond %{REQUEST_URI} !^/mb/
RewriteCond %{REQUEST_URI} !^/sm/
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$
RewriteRule ^(.*)$ mb/$1 [R]
# 6.No enter except PC(SMART)
RewriteCond %{REQUEST_URI} !^/mb/
RewriteCond %{REQUEST_URI} !^/sm/
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android).*$
RewriteRule ^(.*)$ sm/$1 [R]

一度振り分け方法を知っておけば後は使い回しが出来ますね。
ちなみに、過去の案件で会員登録をPC、モバイル、スマートフォンの3種類で出来るページを作成しましたが、
頻繁に使用されているのは、PC > スマートフォン > モバイル だったそうです。
やはり、モバイルサイトでの登録はかなり根気が要りますね。


(tsubasa)

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive