PCとスマホで表示するページをCookie + .htaccess + Javascriptで切り替える

Posted 2012年3月11日 | Auther dada | Category PC・デジタル | Tag タグ: Android, iPhone, javascript

最近スマホ用サイトにも手を出し始めました（今更か）。
コーディング自体はナウでヤングな若者の間で流行のjQueryMobileを使えば比較的低コストでできちゃうのですが、問題になるのがPCとスマホの表示切り替え。

一番ラクチンなのはそれぞれのページからリンク貼って終わらせる方法ですが、たぶんそういうのは気付かれにくい。やはり自動的にスマホ用ページへ飛ばしたいですよね。

自分の要件はこんな感じです。

PCユーザーにはスマホページの存在を意識させない。
スマホユーザーがPC用ページにきたら自動でスマホ用に飛ばす。
ただしPC用ページを見たい人のための手段は用意したい。

そんなわけで色々調べて、自分にあった方法をまとめてみました。
もっとスマートな方法はあると思いますが。

ディレクトリ構造

この記事では下記のようなディレクトリ構造を想定してお話を進めます。
PC版ページの下に「m」というスマホ用ディレクトリを用意してます。

JavaScriptを使ってPC・スマホのどちらを見るかCookieに保存

下記の関数を用意し、どちらのページを見続けるかCookieに保存します。
PC用ページ、スマホ用ページの両方で使うので、外部JavaScriptファイルにします。

function changeViewMode( mode, path, day ){
  path = path || '/';
  day = day || 1;

  var exp = new Date();
  exp.setTime( exp.getTime() + 1000*60*60*24*day );

  document.cookie = "viewmode=" +mode+ "; path=" +path+ "; expires=" + exp.toGMTString();
}

mode	「PC」or「SP」。PC用を見るかスマホ用を見るかを保存
path	PC用ページがあるパスを指定します。パスの指定がないと関数を実行したURLがパスになってしまうので、ディレクトリによって違うCookieを見ることになってしまいます。
day	何日間保存するかを指定します。

それぞれのページで下記のように呼び出します。

スマホ用ページ

PC版サイト

PC用ページ

スマートフォン版サイト

「viewmode」や「PC」「SP」などの変数と値は自分の好きなようにカスタマイズして問題ありません。
ただし後述する .htaccessで使っている変数と同一になるように。

ここまでではCookieに保存するだけで、振り分け自体は次の .htaccessで行います。

.htaccessでスマートフォンを判別

.htaccessにはユーザーエージェントの判別、要求ディレクトリの確認、クッキーの確認、スマホページへのリダイレクトをやらせています。

こちらのサイトを参考にさせていただきました。

.htaccess

<IfModule mod_rewrite.c>

# get UserAgent
SetEnvIf User-Agent "Android Mobile" UA=sp
SetEnvIf User-Agent "BlackBerry" UA=sp
SetEnvIf User-Agent "iPod" UA=sp
SetEnvIf User-Agent "iPhone" UA=sp
SetEnvIf User-Agent "Opera Mini" UA=sp
SetEnvIf User-Agent "Opera sp" UA=sp
SetEnvIf User-Agent "Opera Symbian" UA=sp
SetEnvIf User-Agent "WebOS" UA=sp

RewriteEngine On

# Redirect if smart phone
RewriteCond %{REQUEST_URI} !/m/.*
RewriteCond %{ENV:UA} ^sp$
RewriteCond %{HTTP_COOKIE} !viewmode=PC
RewriteRule ^.*$ /m/ [R,L]

</IfModule>

項目毎に解説していきます。

SetEnvIf User-Agent "Android Mobile" UA=sp
SetEnvIf User-Agent "iPhone" UA=sp

ユーザーエージェントがAndroidやiPhone他だったら変数「UA」に「sp」を入れています。
「Android」ではなく「Android Mobile」なのはタブレット系を除外するためです。といってもこれに適合しないのもあるらしいですが。

RewriteCond %{REQUEST_URI} !/m/.*

スマホ用ディレクトリ「/m/」へのアクセスは除外。

RewriteCond %{ENV:UA} ^sp$

ユーザーエージェント判別でスマホ系だったもののみ適合させる。

RewriteCond %{HTTP_COOKIE} !viewmode=PC

Cookieに「viewmode=PC（PCページを見る）」が入っているものは除外。
これについてはJavaScriptの部分で解説しています。

RewriteRule ^.*$ /m/ [R,L]

スマホ用ディレクトリにリダイレクトします。
PC用ページとスマホ用ページのURLが完全に一致するなら下記のようにしてもいいですね。

RewriteRule ^(.*)$ /m/$1 [R,L]

PCからはスマホ用ページボタンが見えないようにする

JavaScriptの解説で書いた上記のリンクですが、そのままでは当然PCからも見えてしまいますので、ユーザーエージェントで判別して見えないようにします。

変更前

<a href="m/" onclick="changeViewMode( 'SP, '/', 1 );" <スマートフォン版サイト</a>

変更後

<a href="m/" id="forSmartPhone" onclick="changeViewMode('SP','/',1);">スマートフォン版サイト</a>
<script language="JavaScript" type="text/javascript">
if( !navigator.userAgent.match(/(Android Mobile|BlackBerry|iPod|iPhone|Opera Mini|Opera sp|Opera Symbian|WebOS)/) ){
  $('#forSmartPhone').hide();
}
</script>

……でうまく行くと思ったのですが、Xperiaでは表示されてくれませんでした。
友人にちょっと見せてもらっただけなのでちゃんと確認はできてないのですが。

iPhoneでは上手くいったのになー。ウーム。

Comments (0)