WHAT'S NEW?
Loading...

CakePHP2.4とBoostCakeプラグインでBootstrap3を試してみる【2/2】

, , , , , , , , , ,
さぁみなさん、CakePHP2.4とBoostCakeプラグインでBootstrap3を試してみる時間ですよ！

元ネタ知ってる人は毎週タイムボカンシリーズ1時間前からテレビつけてた人だろうね。
んなことたぁどうでもいい。早速始めてみようか。

実はもう少し早めに2回目を書こうと思ってたんだけど、いろいろ生活上の理由があって、とうとう一週間も経ってしまったよ。

連載はなるべく数日後には続きを書きたいんだけどね。次回からは念頭において、ローラの画像探すのに時間かけないようにするよ。

さて、今回はすでにほぼデプロイが終わってるであろう、CakePHP、Bootstrap、各種プラグインを、実際にビューファイルを作って試してみようと思う。

前回の通りに正しく順序通りにやれば、すでに環境は整ってるはずだ。早速行ってみよう。

■まずはサンプル

今回は/app/Controller/AppController.phpにauthコンポーネントを入れてあるので、普通にブラウザでアクセスすると、自動で/users/loginにリダイレクトするようになっているので、まずここのビューを作ろうと思う。

前回はtouchコマンドで空のlogin.ctpを作ったので、一応レイアウトビューファイルはいじってないので、上下にヘッダとフッタは表示されて入るものの、ブラウザでみてみたら真っ白だったはず。


本来ここにはログイン画面として、ユーザID、パスワード、そしてログインボタンであるサブミットボタン何かを表示するのが良さげなんだけど、まずは一度、CakePHPでBootstrapを簡単導入できる、BoostCakeを試してみようじゃないか。

その前に、このWinodws95の背景みたいなレイアウトビューをどうにかしよう。
眠くなるんだよな、この配色。

って、俺だけかな？

各種ビューを配置する土台のような役目を果たす、レイアビューを、極力シンプルに、BoostCake向けにしておくことにしよう。
view plainprint?
  1. $ vi addp/View/Layout/default.ctp  
最初はこのファイルには色々とごちゃごちゃと書かれていると思うけど、俺は全部消してしまってるよ。なにしろ一旦消すことにより、もう後戻りできない自分を軽く演じることができ、誰にでも激壁背水掌を雲のジュウザばりに繰り出すことができるようになるかもしれないからね。

そんなことはまるで無いんだけどね。

そして以下のコードは、俺が最低限必要だと思われるものだけ残した、シンプル且つはなくそみたいなコードだ。

何がはなくそかというと、せっかくダウンロードしてきたbootstrap.min.jsをローカルじゃなくてリモートから呼んでたりして、整合性といういみは若干キモち悪さの残る、いかにも俺らしく有機的な解決法になってる点だね。さすがだね。

というよりむしろ、面倒くさいから編集してないだけ。まぁ細かいことはいいんだよ。修正したかったらどうぞご自由に。

view plainprint?
  1. <html lang="ja">  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  5. <meta name="description" content="Bad And Ass">  
  6. <meta name="author" content="Bad And Ass Company">  
  7. <link rel="shortcut icon" href="favicon.ico">  
  8. <title>BadAss</title>  
  9. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  
  10. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->  
  11. <!--[if lt IE 9]>  
  12. <script src="/js/html5shiv.js"></script>  
  13. <script src="/js/respond.min.js"></script>  
  14. <![endif]-->  
  15. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  16. <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  
  17. </head>  
  18. <body>  
  19. <?php echo $this->fetch('content'); ?>  
  20. </body>  
  21. </html>  

html5shiv.jsとrespond.jsはここから落として、app/webroot/jsの中に入れておいてね。
※この2つは別に使わなくてもいいと思うけど念のため。

BoostCakeのページにはサンプルコードが記述されているので、まずは一旦、それをそのまま、app/View/Users/login.ctpに貼り付けてみよう。

BoostCake

一応抜粋しておくと、以下になるよ。
view plainprint?
  1. <?php echo $this->Form->create('BoostCake', array(  
  2.   'inputDefaults' => array(  
  3.     'div' => 'form-group',  
  4.     'wrapInput' => false,  
  5.     'class' => 'form-control'  
  6.   ),  
  7.   'class' => 'well'  
  8. )); ?>  
  9.   <fieldset>  
  10.     <legend>Legend</legend>  
  11.     <?php echo $this->Form->input('text', array(  
  12.       'label' => 'Label name',  
  13.       'placeholder' => 'Type something…',  
  14.       'after' => '<span class="help-block">Example block-level help text here.</span>'  
  15.     )); ?>  
  16.     <?php echo $this->Form->input('checkbox', array(  
  17.       'label' => 'Check me out',  
  18.       'class' => false  
  19.     )); ?>  
  20.     <?php echo $this->Form->submit('Submit', array(  
  21.       'div' => false,  
  22.       'class' => 'btn btn-default'  
  23.     )); ?>  
  24.   </fieldset>  
  25. <?php echo $this->Form->end(); ?>  
これを貼り付けたら保存して、早速ブラウザで観てみよう。
こんな風になるはずだ。


あれ？一箇所、checkboxがおかしいね。
この部分、
view plainprint?
  1. <?php echo $this->Form->input('checkbox', array(  
  2.   'label' => 'Check me out',  
  3.   'class' => false  
  4.   )); ?>  
ってなってるけど、
view plainprint?
  1. <?php echo $this->Form->input('checkbox', array(  
  2.   'type' => 'checkbox',  
  3.   'label' => 'Check me out',  
  4.   'class' => false  
  5.   )); ?>  
にしたら正しく表示されたよ。"type"属性を追加したってことね。

これはサンプルが原因なのか、プラグインが原因なのか、俺の環境が原因なのか、はっきり言ってわからない。
こうやって回避策があるなら、使えるということでいいと思う。

サンプルページだとちゃんと動いているような気がするんだけど、何が違うのか、まだちゃんと調べてないのでよくわからん。
動くならこれですすめるよ。



ちょっと見やすくするために、グリッドシステムを入れてみよう。
グリッドは横方向に12列あるので、8セル分の表示にして、左右2セル開けてみる。
オフセット機能があるので、8セル指定と同時に、2セル分ずらしてみよう。

以下のタグで挟むだけだ。楽ちん。
view plainprint?
  1. <div class="row">  
  2. <div class="col-md-8 col-md-offset-2">  
  3.   
  4. ～  
  5.   
  6. </div>  
  7. </div>  
だたこれだけだと、横スクロールバーがでてしまったりして不具合が出るので、ちゃんとBootstrapの説明通り、『div.container』クラスで囲わないといけない。
結果的に全体を以下のように囲もう。
view plainprint?
  1. <div class="container">  
  2.   
  3. <div class="row">  
  4. <div class="col-md-8 col-md-offset-2">  
  5.   
  6. ～  
  7.   
  8. </div>  
  9. </div>  
  10.   
  11. </div>  
これで綺麗に表示できたはずだ。
ブラウザサイズを変えるとすでにレスポンシブになってるのに気づくと思う。
楽ちんだよね。




■他の要素も追加してみよう

そう、他の要素だよ。

BoostCakeのページには他にも幾つかサンプルが乗っているので、いろいろ追加してみようじゃないか。

まずはログインに使えそうな、Inline-Form（平行配置）だ。
view plainprint?
  1. <div class="row">  
  2. <div class="col-md-8 col-md-offset-2">  
  3.   
  4. <?php echo $this->Form->create('BoostCake', array(  
  5.   'inputDefaults' => array(  
  6.     'div' => false,  
  7.     'label' => false,  
  8.     'wrapInput' => false,  
  9.     'class' => 'form-control'  
  10.   ),  
  11.   'class' => 'well form-inline'  
  12. )); ?>  
  13.   <?php echo $this->Form->input('email', array(  
  14.     'placeholder' => 'Email',  
  15.     'style' => 'width:180px;'  
  16.   )); ?>  
  17.   <?php echo $this->Form->input('password', array(  
  18.     'placeholder' => 'Password',  
  19.     'style' => 'width:180px;'  
  20.   )); ?>  
  21.   <?php echo $this->Form->input('remember', array(  
  22.     'type' => 'checkbox',  
  23.     'label' => 'Remember me',  
  24.     'class' => false  
  25.   )); ?>  
  26.   <?php echo $this->Form->submit('Sign in', array(  
  27.     'div' => false,  
  28.     'class' => 'btn btn-default'  
  29.   )); ?>  
  30. <?php echo $this->Form->end(); ?>  
  31.   
  32. </div>  
  33. </div>  
これを『div.container』内に追記してみよう。
このソースも、checkboxにはtype属性を追加してあるよ。


表示されたね。

ここで一発、BoostCakeじゃなくてBootstrap3を直接記述してみよう。
つまりCakePHPのヘルパーじゃなくて素のHTMLで書いてみたってことね。
以下のコードを『div.container』内に追記してみたよ。
view plainprint?
  1. <div class="row">  
  2. <div class="col-md-8 col-md-offset-2">  
  3.   
  4. <form class="well form-inline" role="form">  
  5.   <div class="form-group">  
  6.     <label class="sr-only" for="exampleInputEmail2">Email address</label>    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">  
  7.   </div>  
  8.   <div class="form-group">  
  9.     <label class="sr-only" for="exampleInputPassword2">Password</label>    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">  
  10.   </div>  
  11.   <div class="checkbox">  
  12.     <label>  
  13.       <input type="checkbox"> Remember me  
  14.     </label>  
  15.   </div>  
  16.   <button type="submit" class="btn btn-default">Sign in</button>  
  17. </form>  
  18.   
  19. </div>  
  20. </div>  
そしてブラウザでみてみた。



うん、見事に同じだね。
もうね、素晴らしいね、BoostCake。

若干inputのサイズが違うのは、BoostCakeはスタイルでピクセル指定がはいってるんだよね。でもまぁ違和感無いでしょ。スタイルなので後から継承させてどうにでもなると思うし。

ちなみにここまでのファイルの内容はこうなってるよ。
app/View/Users/login.ctp
view plainprint?
  1. <div class="container">  
  2.   
  3. <div class="row">  
  4. <div class="col-md-8 col-md-offset-2">  
  5.   
  6. <?php echo $this->Form->create('BoostCake', array(  
  7.     'inputDefaults' => array(  
  8.     'div' => 'form-group',  
  9.     'wrapInput' => false,  
  10.     'class' => 'form-control',  
  11.   ),  
  12.   'class' => 'well',  
  13. )); ?>  
  14. <fieldset>  
  15.   <legend>Legend</legend>  
  16.   <?php echo $this->Form->input('text', array(  
  17.     'label' => 'Label name',  
  18.     'placeholder' => 'Type something…',  
  19.     'after' => '<span class="help-block">Example block-level help text here.</span>'  
  20.   )); ?>  
  21.   <?php echo $this->Form->input('checkbox', array(  
  22.     'type' => 'checkbox',  
  23.     'label' => 'Check me out',  
  24.     'class' => false  
  25.   )); ?>  
  26.   <?php echo $this->Form->submit('Submit', array(  
  27.     'div' => false,  
  28.     'class' => 'btn btn-default'  
  29.   )); ?>  
  30. </fieldset>  
  31. <?php echo $this->Form->end(); ?>  
  32.   
  33. </div>  
  34. </div>  
  35.   
  36. <div class="row">  
  37. <div class="col-md-8 col-md-offset-2">  
  38.   
  39. <?php echo $this->Form->create('BoostCake', array(  
  40.   'inputDefaults' => array(  
  41.     'div' => false,  
  42.     'label' => false,  
  43.     'wrapInput' => false,  
  44.     'class' => 'form-control',  
  45.   ),  
  46.   'class' => 'well form-inline',  
  47. )); ?>  
  48.   <?php echo $this->Form->input('email', array(  
  49.     'placeholder' => 'Email',  
  50.     'style' => 'width:180px;'  
  51.   )); ?>  
  52.   <?php echo $this->Form->input('password', array(  
  53.     'placeholder' => 'Password',  
  54.     'style' => 'width:180px;'  
  55.   )); ?>  
  56.   <?php echo $this->Form->input('remember', array(  
  57.     'type' => 'checkbox',  
  58.     'label' => 'Remember me',  
  59.     'class' => false  
  60.   )); ?>  
  61.   <?php echo $this->Form->submit('Sign in', array(  
  62.     'div' => false,  
  63.     'class' => 'btn btn-default'  
  64.   )); ?>  
  65. <?php echo $this->Form->end(); ?>  
  66.   
  67. </div>  
  68. </div>  
  69.   
  70. </div>  
というわけで、次に行ってみよう。

■ページネーションとページャ

さて、ページネーションをつかうためには、いくつかの連続したデータが必要になる。ここでは。postsテーブルを作成し、そこにデータを入れてみようじゃないか。

例によって以下のSQLで一発でやったぜベイビー状態になれるので、ベイビーorダイ！！
view plainprint?
  1. DROP TABLE IF EXISTS `posts`;  
  2. CREATE TABLE IF NOT EXISTS `posts` (  
  3.   `id` int(5) NOT NULL AUTO_INCREMENT,  
  4.   `title` varchar(64) NOT NULL COMMENT '件名',  
  5.   `body` text NOT NULL COMMENT '本文',  
  6.   `created` datetime NOT NULL,  
  7.   `modified` datetime NOT NULL,  
  8.   PRIMARY KEY (`id`),  
  9.   KEY `title` (`title`,`body`(191))  
  10. ) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1 ;  
データも含めて欲しい場合、ここからSQLをコピするか、ファイルをダウンロードして使ってね。
ダミーデータが51件入れてあるよ。

https://gist.github.com/ogaaaan/6620021

次にapp/Controller/PostsController.phpを作り、app/View/Posts/index.ctpも作り、一時的にAuthコンポーネントも無効にしてみよう。

app/Controller/AppController.php
view plainprint?
  1. public $components = array(  
  2.     'Session',  
  3.     'Cookie',  
  4.     'DebugKit.Toolbar',  
  5. /* 
  6.     'Auth' => array(      'flash' => array( 
  7.         'element' => 'alert', 
  8.         'key' => 'auth', 
  9.         'params' => array( 
  10.           'plugin' => 'BoostCake', 
  11.           'class' => 'alert-error' 
  12.         ), 
  13.       ), 
  14.     ), 
  15. */  
  16.   );  

そして次はPostsControllerを作る。
app/Controller/PostsController.php
view plainprint?
  1. Class PostsController extends AppController {  
  2.   
  3.   public $name = 'Posts';  
  4.   
  5.   public function beforeFilter() {  
  6.     parent::beforeFilter();  
  7.   }  
  8.   
  9.   public function index() {  
  10.     $this->paginate = array(  
  11.       'order' => array('id' => 'desc'),  
  12.       'limit' => 10,  
  13.     );  
  14.     $this->set('posts', $this->paginate('Post'));  
  15.   }  
  16.   
  17. }  

最後にビュー。
app/View/Posts/index.ctp
view plainprint?
  1. <div class="container">  
  2. <h2>Post</h2>  
  3.   
  4. <table class="table">  
  5. <thead>  
  6.   <tr>  
  7.     <th><?php echo $this->Paginator->sort('id', 'ID');?></th>  
  8.     <th><?php echo $this->Paginator->sort('title', 'タイトル');?></th>  
  9.     <th><?php echo $this->Paginator->sort('created', '作成日');?></th>  
  10.   </tr>  
  11. </thead>  
  12. <tbody>  
  13. <?php foreach($posts as $post):?>  
  14.   <tr>  
  15.     <th><?php echo h($post['Post']['id'])?></th>  
  16.     <th><?php echo h($post['Post']['title'])?></th>  
  17.     <td><?php echo h($post['Post']['created'])?></td>  
  18.   </tr>  
  19. <?php endforeach?>  
  20. </tbody>  
  21. </table>  
  22.   
  23. </div>  
これで一旦ブラウザで見てみよう。
パスは、『/posts/index』だ。

こんなふうになるはずだ。


さて、このインデックス（一覧ページ）にページネーションとページャを実装してみようじゃないか。

ページネーションっていうのは要するに、今何ページ目だよ！的な『ページ数のリンクリスト』だ。
ページャというのは『次へ』、『前へ』、みたいな、いわゆる『ページめくり』のことね。

まずはページネーション。
以下の1行を、H2タグの下に追記してみよう。
view plainprint?
  1. <?php echo $this->Paginator->pagination(array('ul' => 'pagination')); ?>  
追記したら保存して、早速ブラウザで見てみようじゃないか。


なんと、これだけでページネーションが可能という。
ちょっと色々クリックしてみればわかるけど、ページャのマウスオーバーとかでマウスポインタが変わったり、ちょっと色っぽくなってるよね。
Disable時のマウスポインタはcssの『cursor』に『not-allowed』が割り当てられているだけなので、変更したい人は『bootstrap.css』を継承したcssファイルでもつくって、そこで書き換えればいいと思うよ。


さて、次はページャだ。こっちはインデックスページで使うというより、詳細ページで『一覧に戻らなくても次のページに行ける』的な使い方に最適かもしれないね。まぁ使い方は人それぞれだから絶対ってわけじゃないけどね。

tableタグの下に、以下の1行を追記してみよう。
view plainprint?
  1. <?php echo $this->Paginator->pager(); ?>  
追記したら保存して、早速ブラウザで見てみようじゃないか。
ページネーションで3ページ目アタリを選択してみるとわかるんだけど、左右に『Previous』と『Next』ボタンが表示された。すごい！！


ちなみにこの文字列は簡単に変更可能だ。
以下のようにしてみよう。
view plainprint?
  1. <?php echo $this->Paginator->pager(array(  
  2.   'prev' => __('前へ'),  
  3.   'next' => __('次へ')  
  4. )); ?>  
追記したら保存して、早速ブラウザで見てみようじゃないか。


うぅ～ん、マンダム。
さすがだね！！

ちなみにこちら、『&laquo;』などの実体参照でやってみたら、エスケープされなかった。これは残念。オプション付けてもダメみたい。

なので、pager()メソッドじゃなくて、prev()とnext()メソッドを組み合わせて見たのがこちら。
view plainprint?
  1. <ul class="pager">  
  2.   <li class="previous"><?php echo $this->Paginator->prev(__('&laquo; 前へ'), array('escape' => false, 'tag' => false))?><li>  
  3.   <li class="next"><?php echo $this->Paginator->next(__('先へ &raquo;'), array('escape' => false, 'tag' => false))?></li>  
  4. </ul>  


少し記述が長くなるけど、エレメントとかにしておけばどこででも使えるし、1ページで済むので楽だよね。

そうそう、それからページネーションもページャも、親要素はulタグなので、適宜divタグなどでくくって好きに扱うことができるのも見逃せないポイントだね。

因みにここまでのファイルの内容はこうなってるよ。
app/View/Posts/index.ctp
view plainprint?
  1. <div class="container">  
  2.   
  3. <h2>Post</h2>  
  4.   
  5. <?php echo $this->Paginator->pagination(array('ul' => 'pagination')); ?>  
  6.   
  7. <table class="table">  
  8. <thead>  
  9.   <tr>  
  10.     <th><?php echo $this->Paginator->sort('id', 'ID');?></th>  
  11.     <th><?php echo $this->Paginator->sort('title', 'タイトル');?></th>  
  12.     <th><?php echo $this->Paginator->sort('created', '作成日');?></th>  
  13.   </tr>  
  14. </thead>  
  15. <tbody>  
  16. <?php foreach($posts as $post):?>  
  17.   <tr>  
  18.     <th><?php echo h($post['Post']['id'])?></th>  
  19.     <th><?php echo h($post['Post']['title'])?></th>  
  20.     <td><?php echo h($post['Post']['created'])?></td>  
  21.   </tr>  
  22. <?php endforeach?>  
  23. </tbody>  
  24. </table>  
  25.   
  26. <ul class="pager">  
  27.   <li class="previous"><?php echo $this->Paginator->prev(__('« 前へ'), array('escape' => false, 'tag' => false))?></li>  
  28.   <li class="next"><?php echo $this->Paginator->next(__('先へ »'), array('escape' => false, 'tag' => false))?></li>  
  29. </ul>  
  30.   
  31. </div>  

■終わり

あとはもうあれだね、BoostCakeのサイトと、Bootstrap3のサイトみながら、面白おかしく好き勝手にやりたい放題やると寝覚め良いかもね。

繰り返しになるけどリンク書いておくよ。

BoostCake
ページ説明
Bootstrap3 Basicページ中断くらいからが、困ったときに見る場所
Bootstrap3 cssグリッドの仕組み、基本的なCSS設定など
Bootstrap3 ComponentsBootstrapならではのUX部品の使い方
Bootstrap3 JavaScript個別にインストール可能なJavaScriptライブラリ


Bootstrapの特徴としては、HTMLの階層が案外深くなってしまう部分もあるんだけど、レスポンシブってそういうところはしょうがないと思うし、完全にデザインをハンドルするようなアーティストだったらムカないのかもしれないけど、PC版、モバイル版なんかをサクッとつくるには最適なんだよね。

という感じで、みんなでBoostCakeに感謝しつつ、さくさくWebアプリをつくって、日本がいかにすごい国なのかを諸外国に再確認してもらおうか。


というわけで終わり。
読んでくれてありがとうござる。


Follow:

Created by ThemeXpose