CakePHPで高速Webアプリ開発
第10回 CakePHPで作るToDoアプリ（5）
第8回では，タスクの追加をAjax化しました。今回はアプリケーションとしての体裁を整えるため，以下の作業を行います。
- レイアウトの作成
- ページタイトルの設定
- アクセスしやすいURLの設定（Routes)
レイアウトの作成
「レイアウト」とは，ビューを取り囲むコードです。ヘッダーやフッターなど常に表示させたいコードがあれば，レイアウトファイルに記述すると良いでしょう。
レイアウトとビューの関係は以下のイメージです。
レイアウトファイルは，app/views/layouts/以下に配置します。デフォルトのレイアウトファイルはapp/views/layouts/default.thtmlです。しかし，app/views/layouts/の中にはdefault.thtmlファイルはありません。今までのレイアウトは何が使われていたかというと，cake/libs/view/templates/layouts/default.thtmlが使われています。
CakePHPは，app/views/layouts/内にレイアウトファイルがない場合は，cake/libs/view/templates/layouts/内を探します。このファイルを書き換えても動作はしますが，cakeディレクトリ以下のファイルはフレームワークの根幹部分なので，基本的に書き換えてはいけません。
cakeディレクトリ以下のファイルとを書き換えてしまうと，色々と問題が発生します。たとえば，CakePHPのバージョンアップ時にはcakeディレクトリ以下をすべて置き換えるので，バージョンアップの度に同じ内容の書き換え作業が発生してしまい，かなり面倒です。バージョンアップを行わなくても，せっかくapp以下にまとめたアプリケーション部分が分散してしまい，あとから修正するときに調査範囲が全体に及んでしまいます。とにかく，cakeディレクトリ以下のファイルの修正はやめておきましょう。
なお，フレームワーク自体にバグがあったときの修正は，致し方ありません。バグを修正し，CakePHP開発チームにバグ内容を報告すると良いでしょう。
では，app/views/layouts/default.thtmlを作成し，以下のコードを記述してください。
app/views/layouts/default.thtml
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo h($title_for_layout); ?></title>
<?php echo $html->css('cake.generic');?>
</head>
<body>
<div id="container">
<div id="header">
<h1>ToDo App</h1>
</div>
<div id="content">
<?php echo $content_for_layout; ?>
</div>
</div>
</body>
</html>
このレイアウトファイルでページを開くと以下のように表示されます。
default.thmlのイメージ
変化は少ないですが，ヘッダーの表示が変わり，フッターのCakePHPアイコンがなくなっています。
では，レイアウトの内容を上から順に，PHPコードが記述されている部分に絞って解説します。PHPコードは3ヵ所です。
<title><?php echo h($title_for_layout); ?></title>
ここではページタイトルを定義しています。h関数はCakePHPが定義したhtmlspecialchars関数へのエイリアスです（第2引数がないので正確には違います）。$title_for_layout変数には，タイトル文字列が設定されています。ちなみにcake/libs/view/templates/layouts/default.thtmlでの$title_for_layoutの出力は，h関数で囲まれていません。今回自作したレイアウトでは 表示時にh関数で実態参照化するようにしました。
<?php echo $html->css('cake.generic');?>
こちらはcssファイルを読み込むlink要素を出力しています。今回のコードでは，たとえば以下のように出力されます。
<link rel="stylesheet" type="text/css" href="/~gihyo/todo/css/cake.generic.css" />
cake.generic.css の実体は app/webroot/css/cake.generic.css です。cssを変更したいときは，このcssを書き換えるか，読み込むファイルを変更・追加してください。
<?php echo $content_for_layout; ?>
$content_for_layoutにはビューの実行結果の文字列が格納されており，ここでビューを出力しています。余談ですが，このことからビューはレイアウトよりも先に実行されていることがわかります。
レイアウトのPHPコードは以上です。
![[改訂3版]図解でよくわかる ネットワークの重要用語解説](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138213.jpg){kind=small}
