不肖者の人生実験

最近4歳の娘がスギちゃんのモノマネをします。何度注意しても「ワイルドだよ~」になります。

Viewの概要

Viewの仕組み

CakephpのViewは表示を担当する人です。多分日本名は美優さんです。Controllerさんからいろんな値を渡されて、その値を美優さんが一生懸命頑張って表示します。美優さんは最終的にはhtmlやXml等の文字列を返すのが責任範囲です。
美優さんは自分の仕事がしやすい様に扱う大きさにで整理しています。下の表でhtmlの時を例に説明します。

名前	内容
layout	一番大きな枠組みで、複数のURLにアクセスした時の共通部分です。後でビューや(時々エレメント）を差し込めるように作成しておきます。例）htmlタグ、headタグ、bodyタグの一部、グローバルナビとかを記述しておきます。
view	中位の枠組みで、アクセスするURL毎に表示する内容が替わる部分です。後でエレメントを差し込めるようにもできます。例）bodyタグの主要な部分を記述しておきます。
element	一番小さな枠組みで、layoutやview、果ては他のelement内で再利用可能なわりかし小さなパーツ。例）ログイン状態を表示するdivタグとか

美優さんは他にもblockとかthemeとはhelperという隠し玉を持ってますが、ややこしいので後回しです。

レイアウトを試す

早速レイアウトを試してみます。レイアウトは「app/View/Layout」フォルダに入れます。元々デフォルトでそのまま「default.ctp」ってのがあります。
ちなみにCakephpではViewの関連のファイルの拡張子は「.ctp」(CakePHP Templateの略らしい)です。
その「default.ctp」を参考に「guest.ctp」というレイアウトを作ります。

app/View/Layout/guest.ctpを新たに作成。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <?php echo $this->Html->charset(); ?>*1

 <title>

  Twitter Bootstrap 2.0.4コピペ場 : <?php echo $title_for_layout; ?>*2

 </title>

 <?php

  echo $this->Html->meta('icon');*3



  echo $this->Html->css('');*4



  echo $this->fetch('meta');*5

  echo $this->fetch('css');*6

  echo $this->fetch('script');*7

 ?>

</head>

<body>

 <div id="container">

  <div id="header">

   <h1>Twitter Bootstrap 2.0.4コピペ場</h1>

  </div>

  <div id="content">

   <?php echo $this->fetch('content'); ?>*8

  </div>

  <div id="footer">

   <p>copyright busyoumono99 2012</p>

  </div>

 </div>

</body>

</html>

guest.ctpではどのURLでも表示する内容を記述しています。headタグやヘッダー、フッター等です。あと所々にphpでechoしているのは下で軽く説明しています。

*1：キャラセットを指定します。この場合UTF-8です。ちなみにCakephpはutf8が基本らしいです。
*2：htmlのタイトルを表示します。controllerやviewで設定しないとコントローラ名がデフォルトで表示されるようです。
*3：ファビコンの指定をします。
*4：cssの指定をします。今は空です。
*5：設定されているメタタグがあれば表示します。
*6：設定されているCSSがあれば表示します。*4とかぶるような気がしますがdefault.ctpでもこうなってたのでこのまま行きます。後で調べる。
*7：設定されているjavascriptを表示します。
*8：viewがここで表示されます。今だったら「index.ctp」の中身がここで表示されます。

viewの中でレイアウトの設定をする。

レイアウトを作ってもそのままでは美優さんはレイアウトを利用してくれません。取り敢えずここでは「index.ctp」の中で設定してみます。

app/View/Pages/index.ctpを変更


<?php 

$this->layout = "guest";

?>

Hello World!

これでまたブラウザで「dream-travel.boo.jp/twitter_bootstrap_2.0.4/」にアクセスしやす

Cakephpのデフォルトでは無いデザインが適用されました。なんかNote(8)とか出てますが、*4で空にしたのが原因なので気にしない。

Twitter Bootstrapの導入

Bootstrapの準備

ここからCakephpにBootstrapを取り込みます。BootstrapのHPからダウンロードしてきます。ダウンロードしたファイルを解凍して以下のようにファイルを配置します。
app/webroot/css

bootstrap-responsive.min.css
bootstrap.min.css

app/webroot/img

glyphicons-halflings-white.png
glyphicons-halflings.png

app/webroot/js

bootstrap.min.js

多分下のような見え方になってるとおもいます。

Bootstrap用にファイルを修正

Bootstrapのデザインを適応するようにguest.ctpを修正します。今度はBootstrapのサンプルページを元に作ってみる

app/View/Layout/guest.ctpを修正


<?php

?>

<!DOCTYPE html>

<html lang="ja">

  <head>

    <?php echo $this->Html->charset(); ?>

    <title>Twitter Bootstrap 2.0.4コピペ場 : <?php echo $title_for_layout; ?></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php

  echo $this->Html->meta('icon') . "\n";

  echo $this->Html->css(array('bootstrap.min','bootstrap-responsive.min')) . "\n";

  echo $this->fetch('meta') . "\n";

  echo $this->fetch('css') . "\n";

  echo $this->fetch('script') . "\n";

 ?>



  </head>

  <body>

   <div class="container">

  <div id="header">

   <h1>Twitter Bootstrap 2.0.4コピペ場</h1>

  </div>

  <div id="content">

   <?php echo $this->fetch('content'); ?>

  </div>

  <div id="footer">

   <p>copyright busyoumono99 2012</p>

  </div>

 </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>



  </body>

</html>

cssを複数指定したい場合は上の用にarray()で渡します。
ついでにBootstrapが反映されているか分かるようにindex.ctpも編集してみる。

app/View/Pages/index.ctpを変更


<?php 

$this->layout = "guest";

?>

<div class="row">

 <div class="span3">サイド</div>

 <div class="span9">Hello World!</div>

</div>

これで再度ブラウザでアクセスすると

OKっぽい。

まとめ

美優さんには色々機能がある。
レイアウト使うと便利

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.0
IDE	Eclipse 3.6
開発環境?	MAMP
PC	Macmini
OS	Mac OS Lion