CakePHPのスタートページの始めの方に、
- 「このページのコンテンツを変えるには、APP/views/pages/home.ctpを作成してください」
- 「レイアウトを作成するには、APP/view/layouts/default.ctpを作成してください」
- 「スタイルシートを適用するには、APP/webroot/cssにCSSファイルを追加してください」
というメッセージが表示されています。この指示に従ってファイルを作成しましょう。ここで作成するページが自作Webサイトのトップページとなります。
1. Viewテンプレートの設置
eclipseを開いて、自作アプリプロジェクトの"views"ディレクトリの下に、"pages"というディレクトリを追加します。さらに、その下に"home.ctp"というファイルを作成します。
*.ctpは、"CakePHP TemPlate"ファイルです。eclipseには既存のファイルタイプとしては存在しませんので、普通のテキストファイルを作成します。pagesのコンテクストメニューから、New > Other... > General > Fileを選び、Nextをクリックして、ファイル名home.ctpを指定して完了です。
ここで、CakePHPテンプレートファイル(*.ctp)をPHP Editorで開くにはでご紹介した方法でeclipseにFile AssociationとContent Typeの設定をしておくと、*.ctpファイルがPHPエディタで開かれ、プロジェクトのビルド時にビルドされるようになります。
作成したhome.ctpに、"My First CakePHP Page"と書いて保存し、ブラウザからアクセスしてみましょう。下のように表示されると思います。
2. デフォルトLayoutの作成
さて、この段階ではまだCakePHPのスタートページの名残（濃い緑みの青の背景など）が残っていますね。CakePHPにはサイト全体で統一されたレイアウトを使うために"layout"というものを使用します。もちろん、layoutは複数用意してページによって切り替えられます。layoutの中にメインコンテンツを表示するエリアを用意して、そこにViewテンプレートをプログラムで処理したものを埋め込む形になります。
ここでは、自作アプリ用プロジェクトのview/layoutsの下に、"default.ctp"というファイルを作成します。下の例はオーソドックスな上段＋2段組を想定したレイアウトです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<title><?php echo $title_for_layout; ?></title>
</head>
<body>
<div id="page">
<!-- *** Top Pane *** -->
<div id="top-pane"></div>
<!-- *** Main Pane *** -->
<div id="main-pane">
<?php echo $content_for_layout; ?>
</div>
<!-- *** Right Pane *** -->
<div id="right-pane"></div>
</div>
</body>
</html>
8行目の"echo $title_for_layout;"と、17行目の"echo $content_for_layout"に注目してください。ここにページのタイトルとメインコンテンツがそれぞれ挿入されます。
view/layout/default.ctpを作成して保存したら、もう一度ブラウザからアセスしてみましょう。CakePHPのスタートページのレイアウトが適用されないで、白地に"My First CakePHP Page"とだけ表示されていれば成功です。いまいちぴんとこないかもしれませんが、これは$content_for_layoutにhome.ctpの内容がセットされて出力されたわけで、立派にプログラムが動作した証拠です。
ブラウザのタイトルバーには、Homeと表示されていると思います。これは、プログラムの中でタイトルを指定していないのでCakePHPがhome.ctpという名前から勝手に推測してつけてくれたものです。プログラム中で指定すれば、指定したタイトルが表示されます。
3. CSSの設置
この状態ではちょっと味気ないので、スタイルシートを設定してみます。スタイルシートは基本的に、Webで公開するディレクトリのcss/の下に配置します。(例外としては、CakePHP1.2本体のプロジェクトの下にあるvendors/css/に置くこともできます。外部のベンダが提供するものを配置する場合はここに配置します。)
ここでは、公開ディレクトリ用プロジェクトのcssディレクトリの下に、base.cssというスタイルシートファイルを作成します。上のlayoutにはすでにこのファイルをリンクするように記述がしてあります。(7行目)
ところで、cssディレクトリには既にcake.generic.cssというCSSファイルがあります。これはCakePHPが吐き出すメッセージが美しく表示されるように設定されているのですが、同時にさまざまなタグに直接スタイルを指定していたりしてかえって邪魔になるのではないかと思います。『私的』にはcake.generic.cssは使いませんが、使う場合はlayoutの<head>の上の方でlinkしてください。
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #fff;
color: #000;
text-align: center;
}
#page {
width: 640px;
margin: 0 auto;
}
#top-pane {
height: 120px;
background-color: #390;
}
#main-pane {
float: left;
width: 480px;
height: 600px;
background-color: #cfc;
}
#right-pane {
float: right;
width: 160px;
height: 600px;
background-color: #9c9;
}
base.cssを保存して再度ブラウザで見てみると、下の図のようにスタイルが適用されていることがわかります。
4. 静的ページが表示される仕組み
さて、それでは今作成したページはどのような仕組みで表示されたのでしょうか？
- クライエントがブラウザからトップページにアクセスする。
- Apacheのmod_rewriteで公開用ページのindex.phpにリダイレクトされる。
- CakePHP1.2本体にあるdispatcherが呼ばれる。
- dispatcherは自作アプリのconfig/routes.phpをチェックする。
- routes.phpの始めに下のような記述があり、これによって"pages"コントローラの"display"アクションが呼ばれて、viewで"home.ctp"がdefault.ctpレイアウトに出力されてブラウザに送られ表示される。
Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));
トップページはこのような特殊な設定がされていますが、他に静的なページ（プログラムによる処理が必要ないページ）を設置する場合は、APP/views/pagesの下に*.ctpファイルを追加して、http://(開発用サーバ)/pages/(ページの名前)/でアクセスできます。
さて、これで静的なページが設置できました。レイアウトやスタイルを見栄えよく変更すれば、早速CakePHPを使ったWebサイト作成の第一歩は完成です。
次回からはMVCモデルを使ったアプリケーション作成方法を書いていこうと思います。
