CakePHP

CakePHP(1.3)でスマートフォン向けサイトを作成する際の振り分け方法など

2014/09/17

CakePHP(1.3)で作成したサイトをスマートフォン向けに正規化されたページにしたいという要望を受けましたので、色々と調べながら作っていますが、toogieが採用しました PC とスマホの振り分けの方法を晒してみたいと思います。

スマートフォンサイトとPCサイトを振り分けて表示する

振り分け手段

手順としては、

  1. スマホ用のテーマビューを用意、アクションをPCとは別に用意
  2. ktailibrary を使いスマホとPCを振り分け、スマホの場合はクッキーにフラグを立てる
  3. スマホの場合は(1)で用意したスマホ用テーマをビューとして当て、アクション名に「sp」を付加する

といった手順を取り、実現しています。

例えば、members_contoroller.php に list アクションがあるとします。
これをPC用として位置づけ、スマホ用のアクションとして listsp を別に用意。
これはPC版とは違う仕様が追加された場合に、簡単に対応できるようするため、とでもしておいてください。
変更が多々あるための自衛手段です(苦笑)

変更がない場合、listsp アクション内は

とすれば、PC用の listアクション がそのまま動いてくれます。

【例】

members_contoroller.php

といった感じです。

振り分け方法

app_controller.php に beforeFilter アクションを作成し、中で ktailibrary を使い振り分けています。
ktailibrary は ECWorks Blog | Ktai Library for CakePHP 様よりダウンロードし、所定の位置にコピーしておいていください。

有意義なプラグインをありがとうございます。

app/app_controller.php

スマホからもPCサイトを見せる必要があると思うので、以下の関数を適当なコントローラーに作成。
今回はサンプルである members_conroller.php に作成します。

PC用のページのヘッダに以下のJavascriptを埋めます。スマホで見た場合に、スマホ用ページを表示するかどうかのダイヤログを表示します。「はい」で上記のchange関数に移動実行し、クッキーを書き込みます。

なお、この方法だと、ページを遷移するたびにダイヤログが出るので、対応策を考えているところです。
直前のリファラを取得し、同URL(サンプルでは「your-site-url.com」)の場合にはダイヤログを出さないという仕様です。

最後に、スマートフォン用ページのフッタ辺りに PCサイトを見るためのリンクを設置。単純なリンクで OK です。

(2012.10.05)追記
ダイヤログの「いいえ」を選択すると、スマホページに移れなくなるので、スマホの場合のみページフッタ辺りに「スマホ用サイト」といった感じで /mambers/change へのリンクを追加。
今度は PHP でユーザエージェントを取得して判定してみます。

(追記ここまで)

テーマビュー

スマホ用のテーマを作る方法。
CakePHP 1.3の場合は、wiews ディレクトリ以下に themed ディレクトリを作成すれば、テーマとしてみなしてくれます。お手軽ですね。
テーマといっても、普通と変わりないビューファイルなので、いつもと同じように作成できます。
階層は以下のようになります。

  • app
    • views
      • themed
        • sp
          • elements
          • layouts
            • sp.ctp
          • members
            • listsp.ctp
            • detailsp.ctp
            • *****.ctp 以下略
          • pages

参考にしたサイト様

ひでぶろぐ。 cakephp スマートフォンサイト振り分け
http://www.hideblog.net/nikkis/show/239/

ASCII.jp:JavaScriptで振り分けてスマホサイト完成!|実践!iPhone&Androidサイト制作ガイド
http://ascii.jp/elem/000/000/557/557746/index-4.html

CakePHP Viewファイルのテーマ化 | WIDGET-INFO
http://blog.widget-info.net/2009/09/cakephp_theme_view/

-CakePHP
-, , ,