Web技術トピック&コラム

Script Topic 2014.01.04 (Sat)

.htaccessでPCサイトとスマートフォンサイトとモバイルサイトを分岐させる

.htaccessファイルを作成して、下記を書きます。
下記はスマホサイトが「s」フォルダ、
モバイルサイトが「m」フォルダの場合です。
任意で変えてください。

# Set enviroment value by user-agent
SetEnvIf User-Agent "DoCoMo" UA=mobile
SetEnvIf User-Agent "UP\.Brower" UA=mobile
SetEnvIf User-Agent "KDDI-" UA=mobile
SetEnvIf User-Agent "J-PHONE" UA=mobile
SetEnvIf User-Agent "Vodafone" UA=mobile
SetEnvIf User-Agent "SoftBank" UA=mobile
SetEnvIf User-Agent "emobile" UA=mobile
SetEnvIf User-Agent "WILLCOM" UA=mobile
SetEnvIf User-Agent "DDIPOCKET" UA=mobile
SetEnvIf User-Agent "iPhone" UA=sp
SetEnvIf User-Agent "iPod" UA=sp
SetEnvIf User-Agent "Android" UA=sp

RewriteEngine On

# Redirect if mobile
RewriteCond %{REQUEST_URI} !^/m.*
RewriteCond %{ENV:UA} ^mobile$
RewriteRule ^(.*)$ /m/ [R,L]
RewriteCond %{ENV:UA} ^sp$
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^/(index.*)$ /s/ [R=301,L]

スマホサイトからPCサイトへリンクをはる場合は、
そのままだとリダイレクトされてしまうので、
リンク設定で
index.html?mode=pc
のようにします。

また、テストはSafariに標準で付いている開発者ツールのユーザーエージェントで、
iphoneにしてテストすると便利ですよ。

  • ※開発者ツールは設定の詳細の中に表示させるオプションがあります。

Web技術トピック&コラムの一覧へ