CakePHP jQuery

CakePHP2.1でjQueryMobileを使う(実践編その8)

更新日:

CakePHPのデフォルトのレイアウトは、一応モバイルにも適応するように可変型レイアウトにはなっているのですが、jQuery Mobileほど洗練された画面にはなりません。そこで今日は、CakePHPでjQuery Mobile用のサイトを作成する方法を調べてみたいと思います。

1. それでは、まず既存のレイアウトをスマートフォンで表示したらどうなるのか見てみます。480ピクセルのスマートフォンでは、何とか形になっていますが、320ピクセルのスマートフォンでは、若干レイアウトが崩れ気味です。

2. それでは、CakePHPでjQueryMobileサイトを作成する為に、レイアウトファイルjqm.ctpを作成したいと思います。下記のようにコードを記述します。9~15行目にAjaxを無効にするための設定を行っています。CakePHPでは外部ページへ移動するときに、リンクの挙動に異常をきたす場合がありますので、初期設定でAjaxを無効にしています。このscriptタグは、jquerymobileを読み込む前に記述して下さい。外部ページへ移動する時に、『rel="external"』を指定してもいいのですが、毎回指定するのは、面倒ですので、初期設定でAjaxを無効にすることにしました。

app/View/Layouts/jqm.ctp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $title_for_layout; ?></title>
 <meta name="viewport" content="width=device-width,minimum-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
 <script type="text/javascript">
 /* ajaxを無効にするための設定 */
 $(document).bind("mobileinit",function(){
 $.mobile.ajaxEnabled=false;
 $.mobile.pushStateEnabled=false;
 });
 </script>
 <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="e">

 <div data-role="header" data-theme="b">
 <h1><?php echo $title_for_layout; ?></h1>
 <a href="" data-rel="back">戻る</a>
 <?php echo $this->Html->link('Home',array('action'=>'index'),array('data-icon'=>'home','data-iconpos'=>'notext'));?>
 </div><!-- /header -->

 <div data-role="content">
 <?php echo $content_for_layout; ?>
 </div><!-- /content -->

 <div data-role="footer" data-theme="b">
 <h4>winRoad@2012</h4>
 </div><!-- /footer -->

</div><!-- /page -->
</body>
</html>

3. コントローラの最初の方にレイアウト指定のためのコードを記述します。

app/Controller/CollectionController.php

$public $layout = 'jqm';

4. ブラウザで確認してみます。パソコンと同じビューファイルを使っているとむしろCakePHPのデフォルトのレイアウトの方が洗練されて見えます。やはりjQueryMobileを使うには、jQueryMobile用のビューファイルを用意した方が良さそうです。

モバイルサイトの振り分け

5. それでは、パソコンと同じアドレスにアクセスしたときに、jQueryMobile用のビューファイルを開くように設定をしたいと思います。上記3のレイアウトを変更するためのコードはコメントアウトするか削除します。

6. 既存のレイアウト、ビューファイルはそのままにして、モバイルからのアクセスの時だけ、別のレイアウトと別のビューファイルを表示するように設定します。AppControllerに下記のコードを追加します。

app/Controller/AppController.php

class AppController extends Controller {
 //jQueryMobileを使うための設定
 function beforeFilter() {
 //モバイルからのリクエストの場合
 if($this->request->is('mobile')){
 //テーマをJqm、レイアウトをjqmに指定します。
 $this->theme = 'Jqm';
 $this->layout = 'jqm';
 }

テーマの作成

7. CakePHPにはテーマという便利な機能があります。このテーマという機能を使うと同じコントローラで全く別のビューファイルを表示することができます。

8. テーマの作成方法は、app/View/Themedフォルダにテーマフォルダを作成し、それ以下は既存のビューファイルと同じフォルダ構成でビューファイルを作成します。そして、その作成したテーマを使用するには『$this->theme='テーマフォルダ'』と指定するだけでいいのです。このテーマを使えば条件によりいろいろなテーマを使い分けるということが簡単にできます。とても便利な機能ですね。

9. それでは、ViewフォルダにThemedフォルダを作成し、その中にJqmフォルダ、さらにその中にCollectionフォルダを作成します。index.ctpファイルを作成し下記のように記述します。

app/View/Themed/Jqm/Collection/index.ctp

<nav data-role="navbar">
 <ul>
 <li><?php echo $this->Paginator->sort('id','番号');?></li>
 <li><?php echo $this->Paginator->sort('title','タイトル');?></li>
 li><?php echo $this->Paginator->sort('col_assort_id','種別');?></li>
 <li><?php echo $this->Paginator->sort('created','作成日');?></li>
 </ul>
 </nav>
 <div data-role="content">
 <ul data-role="listview">
 <li data-role="list-divider">タイトル名</li>
 <?php foreach ($Collections as $row): ?>
 <li><?php echo $this->Html->link($row['Collection']['title'],array('action'=>'edit'));?></li>
 <?php endforeach; ?>
 <div data-role="controlgroup" data-type="horizontal">
 <?php
 echo $this->Paginator->first('先頭', array('data-role'=>'button'),null);
 echo $this->Paginator->prev('前へ', array('data-role'=>'button'),null);
 echo $this->Paginator->next('次へ', array('data-role'=>'button'),null);
 echo $this->Paginator->last('最後', array('data-role'=>'button'),null);
 ?>
 </div>

10. ブラウザで確認してみます。jQeuryMobileはこんなサイトが簡単に作れるのがいいですね。

11. ちなみに、同じアドレスをパソコンからアクセスすると、下記のように表示されます。このようにCakePHPのテーマを使えば、別のコントローラを作成する必要がありませんのでかなり楽ですね。

本日は以上です。

-CakePHP, jQuery
-,

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.