@ CakePHP

レイアウト

CakePHP ではデフォルトで使われるテンプレートとして 「src\Template\Layout」 に「default.ctp」が用意されています。

オリジナルのレイアウトを利用する場合には、ここに(src\Template\Layout)テンプレートファイルを用意し、コントローラで指定します。

レイアウトの作成

「src」フォルダ内の「Template」フォルダ内にある「Layout」フォルダにレイアウトファイル「practices.ctp」を作成します。

cake3app\src\Template\Layout\practices.ctp

<!doctype html>
<html lang="ja">
<head>
  <?= $this->Html->charset(); ?>
  <title>
    <?= $this->fetch('title') ?>
  </title>
  <?php
  echo $this->Html->css('styles');
  echo $this->Html->script('scripts');
  echo $this->fetch('meta');
  echo $this->fetch('css');
  echo $this->fetch('script');
  ?>
</head>
<body>
  <div id="container">
    <div id="header">HEADER</div>
    <div id="content">
      <?= $this->fetch('content') ?>
    </div>
    <div id="footer">copyright © 20xx Anonymous.</div>
  </div>
</body>
</html>

文字コードの設定

<?= $this->Html->charset(); ?>

$thisに用意されている Html には、「HtmlHelper」クラスのインスタンスが格納されています。

Html->charset()は文字コード設定のための HTML ソースコードを返すメソッドです。

タイトルの出力

<?= $this->fetch('title') ?>

fetch()は CakePHP に保管されている「ブロック」と呼ばれる値を取り出すメソッドです。

fetch('title')で「title」ブロックを取り出すことができます。

CSSとJavaScriptの設定

<?php
echo $this->Html->css('styles');
echo $this->Html->script('scripts');
echo $this->fetch('meta');
echo $this->fetch('css');
echo $this->fetch('script');
?>

Html->css()は、引数にスタイルシートの名前を指定すると、「webroot」の「css」フォルダ内の、スタイルシートをバインディングする HTML ソースコードを返すメソッドです。Html->script()も、JavaScript に対して同様な働きをするメソッドです。

コンテンツの出力

<?= $this->fetch('content') ?>

ビューテンプレートから読み込まれたソースコードはレンダリングされ、結果が「content」ブロックに格納されます。

fetch('content')で、ビューテンプレートで作成したコンテンツを取り出すことができます。

cake3app\src\Template\Practices\index.ctp

<h1>Hello CakeApp!</h1>

コントローラの作成

作成した「practises.ctp」をレイアウトファイルとして適用するためには、コントローラで指定する必要があります。

cake3app\src\Controller\PracticesContorller.php

<?php
namespace App\Controller;

class PracticesController extends AppController
{
    public function initialize()
    {
        $this->name = 'Practices';
        $this->viewBuilder()->autoLayout(true);
        $this->viewBuilder()->layout('Practices');
    }

    public function index()
    {

    }
}

「viewBuilder オブジェクト」 の 「layout()」 は、コントローラで使用されるレイアウトを指定するメソッドです。

layout('Practices')で、「Layout」フォルダ内の「practices.ctp」がレイアウトファイルとして適用されます。

CSSの作成

「webroot」フォルダの中の「css」フォルダに、スタイルシートファイル「styles.css」を作成します。

cake3app\wevroot\css\styles.css

@charset "utf-8";

body {
    background: #eee;
    color: #999;
    margin: 10px 0;
}
#header {
    font-size: 1.25em;
    margin: 10px;
}
#content {
    background: #fff;
    color: #999;
    font-size: 1rem;
    padding: 10px 25px 30px 25px;
}
#footer {
    font-size: .8rem;
    margin: 10pt;
    text-align: right;
}
h1 {
    color: #aaa;
    font-size: 2.75rem;
    font-weight: normal;
    margin-bottom: .5rem;
    margin-top: .2rem;
}

以下の URL で、アプリケーションにアクセスできます。

< http://localhost/cake3app/practices/ >