ウェブプログラミングおじさん

PHPとRubyと時々CSSやJSなどなど

CakePHPでのViewの切り替えによるスマホ対応

CakePHP 2.xでのお話。
CakePHPスマホ対応するためにはいくつか方法があって、最も正攻法なのはレスポンシブデザインにするという方法がありますが、
これはデザインの面でもCSSマークアップの面でも、ちと難しい。

ならばViewをスマホとパソコンで分けて、デザインも分けてしまうのが基本的に一番簡単です。
今回はUA(ユーザーエージェント)での振り分けにより、スマホとパソコンの振り分けを行う方法を紹介します。


まず最初にコード例を。

public function beforeFilter(){
	$ua = env('HTTP_USER_AGENT');
	if((strpos($ua,'iPhone')!==false) ||
			(strpos($ua,'iPod') !== false) ||
			(strpos($ua,'Android') !== false) ||
			(strpos($ua,'DoCoMo') !== false) ||
			(strpos($ua,'UP\.Browser') !== false) ||
			(strpos($ua,'J-PHONE') !== false) ||
			(strpos($ua,'Vodafone') !== false) ||
			(strpos($ua,'SoftBank') !== false) ||
			(strpos($ua,'Googlebot-Mobile') !== false)){
		$this->theme = 'Mobile';
	}
}

このコードを必要なAppControllerに記述します。
そしてその後、Viewフォルダ内にThemed/Mobileというフォルダを作成し、その中にView直下と同じ構造でフォルダを作成します。
つまりこういうこと。

  • View
    • Elements
    • Helper
    • Layout
    • Pages
      • hoge.ctp(パソコン用)
    • Themed

これでスマートフォンからのアクセスが来れば、UAの判定により自動的にViewが振り分けられるようになります。
ちなみにスマホからのアクセスでも、スマホ用のViewが存在しないactionでは自動的にパソコン版のViewが使用されるため、必要な分のみViewを作成すればOKです。