最近スマホ用サイトにも手を出し始めました(今更か)。
コーディング自体はナウでヤングな若者の間で流行のjQueryMobileを使えば比較的低コストでできちゃうのですが、問題になるのがPCとスマホの表示切り替え。
一番ラクチンなのはそれぞれのページからリンク貼って終わらせる方法ですが、たぶんそういうのは気付かれにくい。やはり自動的にスマホ用ページへ飛ばしたいですよね。
自分の要件はこんな感じです。
そんなわけで色々調べて、自分にあった方法をまとめてみました。
もっとスマートな方法はあると思いますが。
この記事では下記のようなディレクトリ構造を想定してお話を進めます。
PC版ページの下に「m」というスマホ用ディレクトリを用意してます。
下記の関数を用意し、どちらのページを見続けるか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
<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]
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では上手くいったのになー。ウーム。
No comments yet.