PHPのsetcookie活用法：モバイルとデスクトップサイトの動的切り替え｜DAD UNION

ウェブデザインが進化し、多くのウェブサイトがレスポンシブデザインを採用するようになっていますが、一部のサイトはスマホ版とPC版を別々に用意していることがあります。このような場合、ユーザーが自分の利用しているデバイスに最適なバージョンのサイトを表示するための方法が求められます。

今回は、PHPのsetcookie関数を使用して、スマホサイトとPCサイトを切り替えるシンプルな実装方法をご紹介します。この実装を採用すれば、ユーザーが一度選択した表示形式（スマホ版やPC版）を、次回のアクセス時も覚えておくことが可能となります。

Contents

PCサイト側のPHPの記述について
PCサイト側のHTMLリンクの記述
スマートフォンサイト側のHTMLの記述
PHPのsetcookieを使用してスマホサイトとPCサイトを切り替えるデモページ
最後に

PCサイト側のPHPの記述について

最初に、PCサイト側のPHPのコードを設定します。以下の手順で実装します。

1.パラメータvmodeの有無をチェックします。
2.vmodeが存在する場合、その値をクッキーに保存します。
3.vmodeが存在しない場合、既存のクッキーからvmodeの値を取得します。
4.クッキーに保存されているvmodeの値やユーザーエージェントによって、表示を切り替えます。

<?php
$vmode = "";

if(isset($_GET['vmode'])) {	//スマホサイト側からパラメータを受け取った場合
	$vmode = $_GET['vmode'];
	setcookie("vmode", $vmode, null, "/");	//パラメータをクッキーにセット
}else if(isset($_COOKIE['vmode'])){
	$vmode = $_COOKIE['vmode'];
}

if($vmode != "pc" || $vmode == "") {
	$str_ua = "(iPhone|iPod|Android.*Mobile|BlackBerry)";
	if(preg_match($str_ua, $_SERVER['HTTP_USER_AGENT']) != 0) {
		setcookie("vmode", "sp", null, "/");
		 header("Location: sp-site.php");	//スマホからのアクセスの場合はスマホページに切替え
	}
}
?>

PCサイト側のHTMLリンクの記述

次に、ユーザーが手動でスマホサイトに切り替えるためのリンクを設定します。このリンクをクリックすると、vmode=spのパラメータがURLに付与されます。

<a href="index.php?vmode=sp">＞スマートフォンサイトに切り替える</a>

スマートフォンサイト側のHTMLの記述

同様に、スマホサイト側には、PCサイトに切り替えるためのリンクを設定します。

<a href="index.php?vmode=pc">＞PCサイトに切り替える</a>

PHPのsetcookieを使用してスマホサイトとPCサイトを切り替えるデモページ

PCサイト側のデモページ
PHPのsetcookieを使用してスマホサイトとPCサイトを切り替えるデモ（PCサイト側）ページ

スマートフォンサイト側のデモページ
PHPのsetcookieを使用してスマホサイトとPCサイトを切り替えるデモ（スマートフォンサイト側）ページ

　
この実装を採用することで、ユーザーは自由にPCサイトとスマホサイトを切り替えることができます。さらに、一度選択した表示形式はクッキーに保存されるため、次回のアクセス時も同じ表示形式でサイトを閲覧することができます。