CakePHP 2.1 で jQuery Mobile を使ってスマートフォンサイトを作る方法

CakePHP 2.1 で jQuery Mobile を使用してスマートフォンを作成します。jQuery Mobile についてはこちらから入手しておいてください。

スマホサイト制作の目標

  • jQuery Mobile を使用して作成する
  • CakePHP のスマホ用設定は管理面を考慮して最小限の追加とする

CakePHP でモバイル端末を判別する

基本的には下記の方法で対応することができます。

1
2
3

if($this->RequestHandler->isMobile()) {
    echo 'mobile website!';
}

ただし、RequestHandlerComponent::is_Mobile() では日本の携帯全てに対応しているわけではないため、日本の携帯にもある程度対応している Ktai Library for CakePHP というものを使用すると良いそうですが、今回は iPhone と Android にスマホ用ページを表示できれば良いので、デフォルトの判定で実装していきます。

CakePHP でモバイルテーマを作成する

AppController にて以下の記述をすることで、モバイルでアクセスした場合にテーマ Mobile を宣言します。

1
2
3
4
5
6

public function beforeFilter()
{
    if($this->RequestHandler->isMobile()) {
        $this->theme = 'Mobile';
    }
}

すると全てのページにおいて、ビューファイルが /View/Foo/bar.ctp ではなく /View/Themed/Mobile/Foo/bar.ctp を使用するようになります。これでモバイル用にビューを組み立てなおしていけば良いわけです。ちなみに、モバイルテーマが準備されていないページにはデフォルトのテーマが使用されます。

jQuery Mobile 用のレイアウトサンプル

default.ctp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html> 
<html>
<head> 
    <meta charset="UTF-8"> 
    <title><?php echo $title_for_layout; ?></title> 
    <link rel="stylesheet" href="<?php echo $this->Html->url('/css/jquery.mobile-1.1.0.min.css'); ?>">
    <script src="<?php echo $this->Html->url('/scripts/jquery-1.7.2.min.js'); ?>"></script>
    <script src="<?php echo $this->Html->url('/scripts/jquery.mobile-1.1.0.min.js'); ?>"></script>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
</head> 
<body> 
<div data-role="page">
 
    <div data-role="header">
        <h1><?php echo $title_for_layout; ?></h1>
    </div><!-- /header -->
 
    <div data-role="content">
        <?php echo $content_for_layout; ?>
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>Layout by <a href="http://weble.org/">Weble</a>.</h4>
    </div><!-- /footer -->
 
</div><!-- /page -->
</body>
</html>

pages/home.ctp

1
2
3
4
5
6

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">コンテンツ</li>
    <li>はじめての方</li>
    <li>プロフィール</li>
    <li>制作実績</li>
</ul>

pages/about.ctp

1
2

<h2>はじめての方</h2>
<p>このページはテストページです。</p>

CakePHP で jQuery Mobile の Ajax 通信

CakePHP では jQuery Mobile の Ajax 通信を上手く処理できません。現状私で思いつく方法としては Mobile テーマの Layout ディレクトリに ajax.ctp を作成して、default.ctp の内容と同じものを記述すれば解決となります。（もしくは jQuery Mobile の Ajax を停止させる方法もあります。あなたが良いと思う方法で設定してください。）下記ページに具体的な対策方法をまとめていますので、この説明だけでは分からない方は参考にしてください。

スマートフォンでも PC サイトを閲覧できるようにする

スマホと PC サイトの切り替え機能を実装します。以下のような要件で作成します。

  • Ajax を使用せずに PC サイト切り替えよう URL にアクセスする。
  • Cookie に PC サイトを有効化する設定を保存しリダイレクト。
  • PC サイトからスマホサイトに戻す処理は Cookie の削除してリダイレクト。

この機能では Cookie を使用します。Cookie コンポーネントを有効にすることを忘れないでください。

切り替え機能

/api/config/set_pc や /api/config/set_mobile で設定を変更できる機能を作っておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class ApiController extends AppController
{
    public $components = Array('RequestHandler', 'Cookie');
 
    public function config($action)
    {
        switch($action) {
            case 'set_pc':
                if($this->RequestHandler->isMobile()) {
                    $this->Cookie->write('Config.mode', 'pc', null, '30 day');
                    $this->redirect('/');
                }
                break;
            case 'set_mobile':
                if($this->RequestHandler->isMobile()) {
                    $this->Cookie->delete('Config.mode');
                    $this->redirect('/');
                }
                break;
        }
        $this->layout = 'api/default';
    }
}

モバイルアクセスの際は Cookie を検証する

今まではモバイルアクセスがあれば、常にモバイルテーマを設定していましたが、この機能を実装する場合はモバイルテーマの時 Cookie の設定を確認して、PC 版の設定が入っていなければ、はじめてモバイルテーマを有効化するようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class AppController extends Controller
{
    public $components = Array('RequestHandler', 'Cookie');
 
    public function beforeFilter()
    {
        if($this->RequestHandler->isMobile()) {
            $mode = $this->Cookie->read('Config.mode');
            $this->set('mode', is_null($mode) ? '' : $mode);
            if($mode !== 'pc')
                $this->theme = 'Mobile';
        }
    }
}

PC 用のレイアウトを変更

PC 用のレイアウトにはスマートフォン版へ切り替えるリンクを表示しておく。

1
2
3
4
5
6

if(isset($mode)) {
    echo '<div class="change_mode">';
    echo 'PC版';
    echo $this->Html->link('スマートフォン版', '/api/config/set_mobile/');
    echo '</div>';
}

モバイル版のレイアウトを変更

モバイル版の場合常に Ajax 通信のため、Ajax を停止する記述を加えています。

1
2
3
4
5
6

if(isset($mode)) {
    echo '<div class="change_mode">';
    echo $this->Html->link('PC版', '/api/config/set_pc/', Array('rel' => 'external'));
    echo 'スマートフォン版';
    echo '</div>';
}

以上でスマートフォンでも PC サイトを確認できるようになります。

おわりに

後は全てのページを対応していくだけで OK です。更に細かい Tips などについては jQuery Mobile をこれから調べながら、定期的に記事にしていきたいと思います。何か分からないことや、この記事で間違っている点などがありましたらご連絡ください。

関連記事

コメント

コメントは受け付けていません。