ウェブ、ショウジン

.htaccessでスマートフォンとPCを切り替える

2011-10-22
Category
Server Web技術

スマートフォン向けのページをそれ用のディレクトリに用意して、アクセスしてきた端末のUAで判別して振り分ける。これはJavaScriptだったりPHPだったり.htaccessだったりいろいろあって、難しいことはない。

でも、スマートフォン用に用意されたページを閲覧しているときにユーザーが「いや、PC用のページが見たい」となった場合、どういう風にしてリンクを設定すればいいのか悩んでいたら、.htaccessで簡単に設定できることがわかったのでメモ。

以下、実例(追記:現在はWebサーバをApacheからNginxにしてるので実例になってません、面目ない)

http://showzine.info/

にスマートフォン(この例ではiPhone, iPod, Androidを設定)でアクセスしてきた場合は、それ用に用意されたディレクトリ/spにリダイレクトさせる。そのための.htaccessは

/.htaccess

RewriteEngine on

# iPhone, iPod, AndroidをUAで判別して/spディレクトリへリダイレクト
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteRule ^$ /sp/ [R]

これに「RewriteCond %{QUERY_STRING} !mode=pc」を加えて

/.htaccess

RewriteEngine on

# iPhone, iPod, AndroidをUAで判別して/spディレクトリへリダイレクト
# リンクURLの末尾に?mode=pcがない場合はリダイレクトさせない
# PC向けページへリンクさせる場合はURL末尾に?mode=pcをつける
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R]

とする。

これで、URL末尾にパラメータ「?mode=pc」がついていない場合、iPhone、iPod、Androidでアクセスしてきた場合には/spディレクトリにリダイレクトされ、逆についている場合は/spディレクトリにリダイレクトされないよう設定できた。

試しにiPhoneで

http://showzine.info/

にアクセスするとリダイレクトされて

http://showzine.info/sp

が表示される。表示されている中の「PC版」というリンク文字列をタップすると、リダイレクトはされずにドキュメントルートへ遷移する。これで、スマートフォン向けサイトを閲覧中でも、ユーザーの意思でPC向けサイトを閲覧出来るようになった。

HTML

<footer>
     <p class="mode"><a href="/?mode=pc">PC版</a><span>|</span>スマートフォン版</p>
</footer>

今回はPC用とiPhone用のサイトを切り替える.htaccessに助けられました。ありがとうございます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿