iPad,Androidタブレットを除いてスマートフォンサイトとPCサイトを切り分ける方法

サイトのトップのURLにアクセスしたとき、デバイスの種類を判別して、PC用のサイトとスマホ用サイトに切り替える方法です。

今回は、.htaccessファイルを使っての対応です。.htaccessファイルを使いますので、お使いのWEBサーバーがApacheを使用していることが前提です。

http://www.hogehoge.jp/

が共通のURLで、HPのトップへのアクセスがあったときに、スマートフォンからのアクセスの場合は、

http://www.hogehoge.jp/sp/

へリダイレクトする処理です。

まずは、.htaccessファイルの中身がこちら
リダイレクト処理をOnにする
USER AGENTの条件設定
スマホ版ページの「PC版はこちら」対応
リダイレクト先の指定

まずは、.htaccessファイルの中身がこちら

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !from=sp
RewriteRule ^$ /sp/ [R,L]

このようになっています。以下、各行の説明です。

リダイレクト処理をOnにする

RewriteEngine On

以下で述べる、条件によって、アクセスするページを変えるために、リダイレクト機能をオンにします。

USER AGENTの条件設定

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

RewriteCondで、リダイレクトで飛び先を書き換えるための条件を指定します。
ブラウザを介して送られてくる、USER_AGENTの情報が

「iPhone」もしくは、「タブレットを除くAndroid端末」「Windows Phone」を含んでいれば

と条件指定しています。今回は、タブレット型端末を除くため、「iPad」は除外しているのと、Androidも「Android」ではなく、「Android.*Mobile」としています。

行末の「NC」は、条件判定の際に「大文字・小文字を区別しない」設定です。「NC」は「No Case」の略だそうです。

スマホ版ページの「PC版はこちら」対応

RewriteCond %{QUERY_STRING} !from=sp

スマホサイトに、「PC版はこちら」のリンクボタンを設定する場合の対応です。
わざわざ、何で、スマホサイトへ飛ばしているのに、PC版へのリンクを設置するの？と思われますが、スマホ版の場合、画面サイズの問題から、PC版ほど詳細な情報を掲載できない場合も多いため、「詳細はこちら」的な形でPCサイトへ誘導します。

スマホサイトのPCサイトへのリンクで <a href=”/?from=sp”></a>と設定し、.htaccessファイルで、「RewriteCond %{QUERY_STRING} !from=sp」と記述しています。

表している内容は、「QUERY_STRING」上記のリンクでいうところの「?」以降の部分に「from=sp」を含んでいないとき。

ということです。スマホサイトの「PC版はこちら」をタップされたときは、スマートフォンからのアクセスでもリダイレクトを行わず、PC版のトップである
http://www.hogehoge.jp/

にそのままアクセスするようになります。