スマートフォンページにPCサイトへのリンクを設ける
公開日：2014年9月16日
Webサイトにアクセスしてきた端末をユーザーエージェントで自動振り分けしているサイトがありますが、スマートフォンページ内にクエリパラメータを使ったPCサイト閲覧のリンクを設ける方法を解説します。
ユーザーからのアクセスを自動振り分けしているものの、スマートフォンからPCサイトを閲覧できないサイトも多く存在します。
しかしスマートフォンユーザーでもPCサイトを閲覧したい人はいますから、PCサイトへ切り替えるリンクボタンをスマートフォンページに設けることはユーザビリティの向上につながります。
【コンテンツ】
クエリパラメータでPCサイトを閲覧できるようにする
クエリパラメータとは検索などでよく使われますが、URLの末尾に文字列を特定の形式で付加し、クライアントからサーバーに渡す情報です。
URLの末尾に「?パラメータ名=パラメータ値」の形式で記述します。「?」以降をクエリストリングといいます。
このクエリパラメータを使い、PCサイト閲覧のリクエストだと判別します。
例えば、「http://example.com/?site=pc」のときはPCサイト閲覧リクエストだとします。
.htaccessに判別ルールを追加する
自動振り分けを、.htaccess にユーザーエージェント判別ルールを記述することで行っている場合は、クエリパラメータを判別する条件も追加します。
以下は .htaccess の記述例ですが、iPhone, Androidスマホ, Windows Phone のアクセスを、spディレクトリの下にあるスマートフォンページにリダイレクトしています。
|
1 2 3 4 5 6 7 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} !/sp/ RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteRule ^(.*)$ sp/$1 [R,L] </IfModule> |
これに、クエリストリングが「site=pc」の場合はリダイレクトしない条件を追加します。
以下が条件を追加した .htaccess の記述です。
「RewriteCond %{QUERY_STRING} !site=pc」の行を追加しています。
|
1 2 3 4 5 6 7 8 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} !/sp/ RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !site=pc RewriteRule ^(.*)$ sp/$1 [R,L] </IfModule> |
上記の記述では、トップページ以外も「!site=pc」を付けないとスマートフォンページにリダイレクトされてしまいます。
トップページにだけ振り分けルールを適用する場合は以下のようにします。
|
1 2 3 4 5 6 7 8 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_URI} !/sp/ RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !site=pc RewriteRule ^$ sp/ [R,L] </IfModule> |
この記述なら、一旦PCサイトに入ったらずっとPCサイトに滞在できます。
HTMLにPCサイトへ移動するリンクを追加する
スマートフォンページには、以下のようなリンクを設けておきます。
トップかボトムにリンクボタンを設けておくのがよいでしょう。
これでスマートフォンからも自由にPCサイトを閲覧できるようになります。
|
1 |
<a href="http://example.com/?site=pc">PCサイトを閲覧</a> |
スポンサーリンク
