「同じURLで異なるHTMLを動的に配信する」ダイナミック・サービングで、PCページ表示＆スマホページ表示を行き来する方法！

先週の「同じURLで異なるHTMLを動的に配信する」ダイナミック・サービングをしているページで、スマホからPCページを見たい時の方法です。

PCページとスマホページが同一URLのダイナミック・サービングで、それぞれを行き来するには？

スマホのフッターなどに、「PCページを表示」などのボタンを設置します。クリックされることで、「PCページをリクエストした」というクッキーを持たせ、その時違うページを見てもPCページが表示されるだけではなく、後日また訪問した時にも、PCページが表示されていると便利だと思います。

「PCページを表示」の横にはもちろん「スマホページを表示」のボタンを設置し、戻れるようにしておき、以降は毎回スマホページが表示されます。

例えば、id=”switch_to_pc”の「PCページを表示」ボタンに、クリックでクッキーを持たせます。

$('#switch_to_pc').click(function(){
var expire_date = new Date();
// 有効期限を3年にする
expire_date.setTime(expire_date.getTime() + 3*30*12*24*60*60*1000);
var cookie_name = "view"; //クッキーの名前を「view」、
var cookie_value = "pc"; //クッキーの値を「pc」に
document.cookie = cookie_name + "=" + cookie_value + "; path=/; expires=" + expire_date.toGMTString();
location.href = location.href; //現在のURLを再読み込みします。
});

$('#switch_to_pc').click(function(){

var expire_date = new Date();

// 有効期限を3年にする

expire_date.setTime(expire_date.getTime() + 3*30*12*24*60*60*1000);

var cookie_name = "view"; //クッキーの名前を「view」、

var cookie_value = "pc"; //クッキーの値を「pc」に

document.cookie = cookie_name + "=" + cookie_value + "; path=/; expires=" + expire_date.toGMTString();

location.href = location.href; //現在のURLを再読み込みします。

});

最後の行は、リロードlocation.reload();ではなく、現在のURLを再読み込みにしました。これは、フッターなどページの頭以外で「PCページを表示」リンクを設置していた場合、リロードだとPCページの中途半端な位置まで勝手にスクロールされてしまうためです。

クッキーの設定ができたら、「同じURLで異なるHTMLを動的に配信する」ダイナミック・サービングのユーザーエージェントの判定で、スマホのアクセスでも、クッキーviewの値がpcの場合は、PCページを表示するようにします。

<?php
function is_mobile() {
$view = $_COOKIE['view'];
if ($view != "pc") {
return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}else{
return false;
}
}
?>

<?php

function is_mobile() {

$view = $_COOKIE['view'];

if ($view != "pc") {

return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||

preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );

}else{

return false;

}

また、PCサイトのフッターには、スマホからのアクセスの時に、スマホ表示に戻れるボタンを設置しておきます。下のソース例では、トップページと、A、B、Cというディレクトリがスマホページに対応していて、ボタンを表示するようにしています。

<?php
// スマホ対応しているページに、スマホ切替ボタンを表示
function is_mobile_available() {
$url = $_SERVER["REQUEST_URI"];
if($url == '/' || strstr($url,'A')|| strstr($url,'B') || strstr($url,'C')){ //スマホサイトのあるディレクトリを記述
return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}
}
if (is_mobile_available()):
?>
〜スマホ切替ボタン〜
<?php
endif;
?>

<?php

// スマホ対応しているページに、スマホ切替ボタンを表示

function is_mobile_available() {

$url = $_SERVER["REQUEST_URI"];

if($url == '/' || strstr($url,'A')|| strstr($url,'B') || strstr($url,'C')){ //スマホサイトのあるディレクトリを記述

return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||

preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );

}

if (is_mobile_available()):

〜スマホ切替ボタン〜

<?php

endif;

これで、同一URLの中で、スマホ表示とPC表示を行き来できるようになりました。URLに不要なパラメータがつかないので、Google Analyticsでの集計にも悪影響がないと思います。

どれぐらいのスマホユーザーがPCサイト表示を求めているかは、ボタンのスクリプトにAnalyticsのアクションを含めて集計を取ると、サイト改善に役立つかもしれません。