【CakePHP 1.3】スマートフォン向けサイトを作成する際の振り分け方法など
2018/09/02
CakePHP(1.3)で作成したサイトをスマートフォン向けに正規化されたページにしたいという要望を受けましたので、色々と調べながら作っていますが、toogieが採用しました PC とスマホの振り分けの方法を晒してみたいと思います。
スマートフォンサイトとPCサイトを振り分けて表示する
振り分け手段
手順としては、
- スマホ用のテーマビューを用意、アクションをPCとは別に用意
- ktailibrary を使いスマホとPCを振り分け、スマホの場合はクッキーにフラグを立てる
- スマホの場合は(1)で用意したスマホ用テーマをビューとして当て、アクション名に「sp」を付加する
といった手順を取り、実現しています。
例えば、members_contoroller.php に list アクションがあるとします。
これをPC用として位置づけ、スマホ用のアクションとして listsp を別に用意。
これはPC版とは違う仕様が追加された場合に、簡単に対応できるようするため、とでもしておいてください。
変更が多々あるための自衛手段です（苦笑）
変更がない場合、listsp アクション内は
|
1 |
$this->list(); |
とすれば、PC用の listアクション がそのまま動いてくれます。
【例】
members_contoroller.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class MembersController extends AppController { // PC用のアクション function list() { 略 } function detail() { 略 } // スマホ用のアクション function listsp() { // 内容に対し、変更がない場合は $this->list(); } function detailsp() { 略 } } |
といった感じです。
振り分け方法
app_controller.php に beforeFilter アクションを作成し、中で ktailibrary を使い振り分けています。
ktailibrary は ECWorks Blog | Ktai Library for CakePHP 様よりダウンロードし、所定の位置にコピーしておいていください。
有意義なプラグインをありがとうございます。
app/app_controller.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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" } |
スマホからもPCサイトを見せる必要があると思うので、以下の関数を適当なコントローラーに作成。
今回はサンプルである members_conroller.php に作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function changesp() { $res = $this->Cookie->read('view'); if ($res) { $this->Cookie->delete('view'); } else { $this->Cookie->write('view','pc'); } $this->redirect('/'); $this->autoRender = false; } |
PC用のページのヘッダに以下のJavascriptを埋めます。スマホで見た場合に、スマホ用ページを表示するかどうかのダイヤログを表示します。「はい」で上記のchange関数に移動実行し、クッキーを書き込みます。
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
なお、この方法だと、ページを遷移するたびにダイヤログが出るので、対応策を考えているところです。
直前のリファラを取得し、同URL（サンプルでは「your-site-url.com」）の場合にはダイヤログを出さないという仕様です。
最後に、スマートフォン用ページのフッタ辺りに PCサイトを見るためのリンクを設置。単純なリンクで OK です。
|
1 2 3 |
<div class="pcSwitch"> <a href="/members/change">PCサイトへ</a> </div> |
（2012.10.05）追記
ダイヤログの「いいえ」を選択すると、スマホページに移れなくなるので、スマホの場合のみページフッタ辺りに「スマホ用サイト」といった感じで /mambers/change へのリンクを追加。
今度は PHP でユーザエージェントを取得して判定してみます。
|
1 2 3 4 |
$ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua,'iPhone') !== false ) || ( strpos($ua,'iPod') !== false ) || ( strpos($ua,'Android') !== false)) { echo '<p id="spChange">' . '<a href="/mambers/changesp">スマホ用サイト</a>' . '</p>'."\n"; } |
（追記ここまで）
テーマビュー
スマホ用のテーマを作る方法。
CakePHP 1.3の場合は、wiews ディレクトリ以下に themed ディレクトリを作成すれば、テーマとしてみなしてくれます。お手軽ですね。
テーマといっても、普通と変わりないビューファイルなので、いつもと同じように作成できます。
階層は以下のようになります。
- app
- views
- themed
- sp
- elements
- layouts
- sp.ctp
- members
- listsp.ctp
- detailsp.ctp
- *****.ctp 以下略
- pages
- sp
- themed
- views
参考にしたサイト様
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/
[tgAmazonItemLookup asin="4048702181" related="1"]