Zend Framework チュートリアルその4 - レイアウトとビュー

Posted on May 10, 2011 | Tags: Zend, php, チュートリアル

レイアウトとビュー

Zend Frameworkのビューコンポーネントの名前は、あまりに普通ですがZend_Viewといいます。このビューコンポーネントは、アクション関数内のコードとページを表示するコードとを分離できるようになっています。

Zend_View の基本的な使い方:

$view = new Zend_View();
$view->setScriptPath('/path/to/scripts');
echo $view->render('script.php');

もし、このコードを各アクション関数に直接書き込んでしまうと、そのアクションとは関係の無い非常に退屈な"構造的"コードを繰り返すことになるのは容易に想像できるでしょう。ビューの初期化のどこかで大半のことを行ってしまえば、各アクション関数内では初期化済みのビューオブジェクトにアクセスできます。Zend FrameworkにはViewRendererというアクションヘルパーが用意されています。ViewRendererは、初期化されたビュープロパティをコントローラ内で使えるようにしてくれ（$this->view）、アクションがディスパッチされた後にビュースクリプトのレンダリングも行います。

レンダリングするために、ViewRendererは、レンダリングするビュースクリプトを views/scripts/{controller name}に探しに行くようにZend_Viewオブジェクトを設定します。そして（少なくともデフォルトでは）アクション名の後に拡張子phtmlが付いた名前のスクリプトをレンダリングします。つまり、ビュースクリプトはviews/scripts/{contoroller name}/{action_name}.phtmlをレンダリングし、レンダリングされたコンテンツはレスポンスオブジェクトbodyに追加されます。
レスポンスオブジェクトはMVCシステムを実行した結果として作成される全てのHTTPヘッダー、body content、例外をを組み立てるのに使われます。フロントコントローラは、ディスパッチの最後に自動的にヘッダーを送信した後にbody contentを続けて送信します。

プロジェクトを作成し、zf create controller と zf create action コマンドを使ってコントローラとアクションを追加すれば、Zend_Tool によってこれらは全てセットアップされます。

共通のHTMLコード:レイアウト

少なくともヘッダーやフッター部分、場合によっては1,2個のサイドバーも含めて多くの同じようなHTMLコードが存在するのは容易に想像できます。これは非常によくある問題であり、Zend_Layoutコンポーネントはこの問題を解決するように設計されています。Zend_Layoutは全ての共通ヘッダー、フッター、他のコードをレイアウトビュースクリプトに移動させることが出来ます。そして、レイアウトビュースクリプトには実行されるアクションの特定のビューコードを含むことが出来ます。

レイアウトのデフォルトの置き場所は application/layouts/ です。Zend_Layoutを設定したZend_Applicationからこのリソースを利用できます。Zend_Toolを使ってレイアウトビュースクリプトを作成し、application.iniを適切に更新します。再びターミナルかコマンドプロンプトを開き、zf-tutorialディレクトリで以下をタイプします。

zf enable layout

Zend_Toolは application/layouts/scripts を作成し、そこに layout.phtml というビュースクリプトを配置します。application.iniも更新され、[production]セクションにresources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/" という行が追加されます。

ディスパッチサイクルの最後、コントローラーのアクションメソッドが終了した後にZend_Layoutはレイアウトを描画します。Zend_Toolは、アクションのビュースクリプトの内容を表示するだけの基本的なレイアウトファイルだけを作成します。このウェブサイトに必要なHTMLを追加しましょう。layout.phtmlを開き、以下のコードに置き換えます。

zf-tutorial/application/layouts/scripts/layout.phtml

<?php
$this->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
$this->headTitle()->setSeparator(' - ');
$this->headTitle('Zend Framework Tutorial');
echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
</head>
<body>
<div id="content">
<h1><?php echo $this->escape($this->title); ?></h1>
<?php echo $this->layout()->content; ?>
</div>
</body>
</html>

レイアウトファイルは標準的で綺麗な"外枠"のHTMLです。通常のPHPファイルなので、その中でPHPが使えます。$this変数は、ブートストラップ中に作成されたビューオブジェクトのインスタンスです。この変数を使ってビューに割り当てられたデータを取得したり、メソッドをコールしたりもできます。このメソッド（いわゆるビューヘルパー）は文字列を返すので、echoを使えます。

最初に、ウェブページのヘッドセクションのためのビューヘルパーを設定し、正しいdoctypeを出力します。<body>内には、タイトルを含む<h1>を持つdivを作成します。表示する現在のアクションのビュースクリプトを取得するために、layout() ビューヘルパーを使ってコンテントプレースホルダを出力します。: echo $this->layout()->content; と記述します。これは、アクションのビュースクリプトがレイアウトビュースクリプトより前に実行されるということを意味しています。

ウェブページのdoctypeは、どのビュースクリプトのレンダリングより前にセットする必要があります。アクションビュースクリプトは早くレンダリングされるので、どのdoctypeを強制するかを知る必要があります。これはZend_Formでは特に必要です。doctypeを設定するために、application.iniの[production]セクションの別の行に次の内容を追加します。

resources.view.doctype = "XHTML1_STRICT"

これで、doctype()ビューヘルパーは、正しいdoctypeを出力でき、Zend_Formのようなコンポーネントは、互換性のあるHTMLを生成します。

スタイル

これは"ただの"チュートリアル”ですが、ほんの少しだけアプリケーションの見た目を良くするためにCSSファイルを使います。これには少し問題があります。URLは正しいルートディレクトリの位置は分からないため、CSSファイルへの正しい参照ができないという点です。幸運にもbaseUrl()ビューヘルパーが用意されています。このヘルパーはリクエストオブジェクトから必要な情報を収集し、我々が知ることができないURLの一部を提供してくれます。
CSSファイルをapplication/layouts/scripts/layout.phtml の <head>セクションに追加し、再びheadLink()ビューヘルパーを使いましょう。

zf-tutorial/application/layouts/scripts/layout.phtml

...
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/site.css'); ?>
</head>
...

headLink()の prependStylesheet()メソッドを使うことで、追加のさらに詳細なCSSファイルをそのコントローラービュースクリプトに追加でき、それはsite.cssの後の<head>セクションにレンダリングされます。

最後に、CSSスタイルが必要なので、public/ 内にcssディレクトリを作成し、以下のコードを記述したsite.cssを追加します。

zf-tutorial/public/css/site.css

body,html {
  margin: 0 5px;
  font-family: Verdana,sans-serif;
}
h1 {
  font-size: 1.4em;
  color: #008000;
}
a {
  color: #008000;
}
/* Table */
th {
  text-align: left;
}
td, th {
  padding-right: 5px;
}
/* style form */
form dt {
  width: 100px;
  display: block;
  float: left;
  clear: left;
}
form dd {
  margin-left: 0;
  float: left;
}
form #submitbutton {
  margin-left: 100px;
}

ほんの少しだけ綺麗になりました。言いたいこともあるでしょうが、私はデザイナーではありません！

自動で生成された書き込み待ちの4つのアクションのスクリプトを片付けましょう。詳しく言えば、空のindex.phtml,add.phtml, edit.phtml, delete.phtmlファイルです。もちろん覚えているでしょうが、 application/views/scripts/index ディレクトリにあります。

次のページ：： Zend Framework チュートリアルその5 - アルバムの一覧表示,最後に

Category

Zend Framework チュートリアルその4 - レイアウトとビュー

レイアウトとビュー

共通のHTMLコード:レイアウト

スタイル

目次

Category

Zend Framework チュートリアル その4 - レイアウトとビュー

レイアウトとビュー

共通のHTMLコード:レイアウト

スタイル

目次

Tags:

Zend Framework チュートリアルその4 - レイアウトとビュー