CakePHPで高速Webアプリ開発

第10回 CakePHPで作るToDoアプリ(5)

この記事を読むのに必要な時間:およそ 3.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のイメージ

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コードは以上です。

著者プロフィール

秋田真宏(あきたまさひろ)

株式会社ロケットスタート エンジニア。個人ブログは「akiyan.com」。1981年生まれ。

URLhttp://www.akiyan.com/

著書

コメント

コメントの記入