ラック
Home > CMS > 記事 > 2015年5月 > スマホ対応

スマホ対応

カテゴリ: MODx

ずっと前にテストで、ユーザーエージェントを使ってスマホを振り分けるテストを行ったことがありました。

このとき作成したのは、「ユーザーエージェントでデバイスを判別し、ページ表示時に使用するテンプレートを切り替える」という処理でした。

つまり、クライアントから送られてくるユーザーエージェントを判別して、強制的に表示を切り替える。後は切り替えっぱなしです。

しかし、これだと「スマホだけどPCのページを見たい」という場合、ユーザーエージェントをPCだと偽装するしかなかったのですが、普通にページを見るためにそれをするのは…ということで、「PC/スマホの表示切替」のボタンが欲しいところです。

 

javascriptだったらページロード時にアラートを出して「はい/いいえ」を選ばせる、ということはできますが…テンプレートの切り替えはphpなのでページアクセス時に処理が走ってしまうため、クライアント側で実行されるjavascriptではアラートが出せません。また、phpにはjavascriptのようなアラートを出すものはデフォルトだとありません。

ということで、やることは切り替えを行った後、ページのどこかに「表示切替」のボタンを設置し、そのボタンをクリックしたら表示を切り替える、という方法です。よくフッターなどに「PC用ページを表示」とかある、あれです。

 

ということで、それを目指して作ってみました。今回はPC/スマホどちらのページを見るのか、という判定をクライアントがCookieで持って歩いてもらって、ページを読み込むたびにCookieを見せてもらい、それで表示を振り分けるようにしました。Cookie無効の場合は前回同様強制的に切り替えてそのままです。
セッションでも結局Cookie使いますし、あくまでPC用ページ見るかスマホページ見るかの判定だけなので、セッションにしなくても良いかなぁ、ということでCookieオンリーです。

まずはプラグインです。基本的には前回同様ですが、Cookieによる判定の部分などを付け足しています。

	
global $spFlag;

if(!isset($_COOKIE["dvFlag"])) { //Cookieがセットされていない(ブラウザ開いている中での初回表示)
	$spFlag = 0;
	$ua = htmlspecialchars($_SERVER['HTTP_USER_AGENT'], ENT_QUOTES, mb_internal_encoding());
	if(((strpos($ua, 'iPhone')!== false) && (strpos($ua, 'iPad') === false)) || ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)) || (strpos($ua, 'Windows Phone') !== false) || (strpos($ua, 'BlackBerry') !== false)) {
		$spFlag = 1;
	}
}
else { //Cookieがセットされている場合
	if(!isset($_POST["switchSPC"])) { //普通のページ遷移
		$spFlag = intval($_COOKIE["dvFlag"]);
	}
	else { //「PCサイトを表示」「スマホサイトを表示」をクリックされた場合
		$spFlag = intval($_POST["switchSPC"]);
	}
}

$flag = setcookie("dvFlag", $spFlag, 0, "/", "exampletemple.com");
//dvFlagという名前に$spFlagの値を(文字列として)セットする。有効期限は0(=ブラウザを閉じるまで)、有効なドメインはexampletemple.comで、ルートディレクトリ以下で有効、という設定

if($spFlag){ //スマホだとフラグが立ったら
	if($modx->documentIdentifier === 'XX'){ //リソースIDがXX(=トップページ)ならば
		$modx->documentObject['template'] = 'AA'; //スマホ用トップページのテンプレート(IDで指定)を読み込む
	}
	else if($modx->documentObject['template'] === 'YY'){ //トップページ以外で、ブログ以外用の汎用テンプレート(ID=YY)を使用しているならば
		$modx->documentObject['template'] = 'BB'; //スマホ用のテンプレート(IDで指定)を読み込む
	}
...
(略)
...
	else{ //上記以外
		$modx->documentObject['template'] = 'CC'; //スマホ用のテンプレート(IDで指定)を読み込む
	}
}
	

PC用とスマホ用のページ(リソース)が区別されていないなら、これで良いはずです。なお、Cookieをセットする際にオプションを指定して、

  • 有効期限:0(=ブラウザを閉じるまで)
  • 有効なドメイン:exampletemple.com
  • /hoge/fuga/ディレクトリ以下でCookieが有効

という指定をしてます。これを「OnLoadDocumentObject」イベントにフックさせています。

 

次にスニペット。

	
<?php
global $spFlag;

echo <<< startForm
<form action="{$_SERVER["REQUEST_URI"]}" method="post">
startForm;

if($spFlag){ //スマホだとフラグが立ったら

echo <<< pcSwitch
	<input type="hidden" name="switchSPC" value="0">
	<input type="submit" name="switchSubmit" value="PCサイトを表示">
pcSwitch;

}
else{ //スマホでないならば

echo <<< spSwitch
	<input type="hidden" name="switchSPC" value="1">
	<input type="submit" name="switchSubmit" value="スマホサイトを表示">
spSwitch;

}

echo <<< endForm
</form>
endForm;
?>
	

プラグインとスニペットで$spFlagをグローバル変数として宣言することでフラグとなる値を共有しています。このフラグの値を持回って、PC/スマホ用の表示切替ボタンをhtmlコード(form)で設置するコードです。

REQUEST_URI指定なので、自分自身へジャンプ、という形でページをリロードさせて上記プラグインをもう一度通す、という単純というか力づくというか、思い付いてそのまま書いたやり方です。

実際にフッターにボタン(デザイン無視の味気ない普通のフォームボタンですが)を設置してみたので、動作確認ができます。

タグ: スニペット, プラグイン, スマホ対応

 



関連する記事一覧