こんにちは！ぐちです。

ユーザーエージェント

よくUAと表記されるユーザーエージェントですが厳密にいうと様々な種類が存在します。その中でもよく使われるのがHTTPユーザーエージェントと呼ばれるものでHTTPリクエストのヘッダ内に識別子として含まれる文字列情報を指します。

ブラウザがユーザーエージェントなのですが各キャリアごとにキャリア名だったり端末名だったりが文字列として含まれています。また一般にアプリケーション名、バージョン、ホストオペレーティングシステムや言語といった情報も含まれています。

Viewの切り替え

そこでユーザーエージェントを判別してスマートデバイスからのアクセスの場合に処理を振り分けるといった方法が一般的に取られています。

CakePHPにはテーマと呼ばれる仕組みがあって下記のように各アクションの実行前に判定を入れテーマを変えることによってスマホ版(工夫すればガラケー版のViewも可能)のViewを表示することができます。

テーマフォルダの作成

app/Viewフォルダ配下にThemedフォルダを作成します。そしてその中にMobile(名前は何でもOK)を作ります。下記のような感じです。

app
└─ View
   ├─ Elements
   │  └─ grid.tpl
   ├─ Emails
   ├─ Errors
   ├─ Helper
   ├─ Index
   │  └─ index.tpl ←パソコン用画面
   ├─ Layouts
   ├─ Scaffolds
   └─ Themed
      └─ Mobile
         └─ index.tpl ←モバイル用画面

そしてMobileフォルダ配下をapp/View配下と同じ階層になるようにControllerに関連するフォルダとviewファイルを配置していきます。

ユーザーエージェント判定

各アクションの実行前に処理されるbeforeFilter()内でユーザーエージェントを判定してテーマを切り替えます。

public function beforeFilter() {
    parent::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'; // Themedフォルダ配下作ったフォルダ名を指定する
    }
}

上記のようにすることでユーザーエージェント判定により自動的にテーマが振り分けられ該当するviewが表示されることになります。

ちなみにスマホからアクセスがあった場合でもスマホ版のviewファイルが存在しない場合は同名のパソコン版のviewファイルが使われますのでスマホで表示したい必要なviewファイルのみを作ればいいということになります。

ユーザーエージェントの偽装

ただし上記の方法では完璧に振り分けることができません。ユーザーエージェントは簡単に偽装することができるのでそれを考慮した上で使う必要があります。また、UIデザインだけであればCSSのメディアクエリを使って画面幅を基準に表示を切り替える(？)方法もあります。その方法はまた別でご紹介します。

では今回はこの辺で。