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

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

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

振り分け手段

手順としては、

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

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

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

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

[php]
$this->list();
[/php]

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

【例】

members_contoroller.php

[php]
class MembersController extends AppController
{
// PC用のアクション
function list()　{
略
}

function detail()　{
略
}

// スマホ用のアクション
function listsp()　{
// 内容に対し、変更がない場合は
$this->list();
}

function detailsp()　{
略
}
}
[/php]
といった感じです。

振り分け方法

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

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

app/app_controller.php
[php]
class AppController extends Controller
{
var $components = array('Cookie', 'Ktai');

function beforeFilter()　{
// スマートフォンサイト振り分け
if　($this->Ktai->is_iphone() || $this->Ktai->is_android())　{
if　($this->Cookie->read('view') != 'pc')　{
$this->view = "Theme"; // テーマファイルを有効にする
$this->theme = "sp"; // テーマ名を指定
$this->layout = 'sp'; // レイアウトファイルとして「sp.ctp」を使用する宣言

$this->action = $this->action . 'sp'; // アクション名の末尾に「sp」を追加。
}
}

} //end of function "beforeFilter"
}
[/php]

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

[php]
function changesp()
{
$res = $this->Cookie->read('view');
if　($res)　{
$this->Cookie->delete('view');
}　else　{
$this->Cookie->write('view','pc');
}

$this->redirect('/');

$this->autoRender = false;
}
[/php]

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

[php]
<script type="text/javascript">
if (document.referrer.indexOf('your-site-url.com') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0
)) {
if　(confirm('スマートフォン用のサイトがあります。?\n表示しますか？')) {
location.href = '/members/changesp';
}
}
</script>
[/php]

なお、この方法だと、ページを遷移するたびにダイヤログが出るので、対応策を考えているところです。
直前のリファラを取得し、同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

参考にしたサイト様

[tgAmazonItemLookup asin="4048702181" related="1"]

-CakePHP
-cakephp, pc スマホ 判定, スマートフォン, テーマ, 振り分け