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

レイアウトとビュー

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の内容、例外を順に並べるのに使われます。フロントコントローラは自動的にヘッダーのディスパッチの最後にbody contentを続けて送信します。

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

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

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

そして、レイアウトビュースクリプトには実行されたアクションの詳しいビューコードを含むことが出来ます。

レイアウトのデフォルトの置き場所は application/layouts/ です。Zend_Layoutを設定したZend_Applicationからこのリソースを利用できます。

最初に、 application/layouts/ ディレクトリを作成し、configs/applications.ini ファイルの[production]セクションの最後に以下の行を追加します。

resources.layout.layoutpath = APPLICATION_PATH "/layouts"

Boopstrapクラスでビューのグローバルセッティングを設定する必要もあります。再び、_initViewHelpers()という_initメソッドを使います。application/Bootstrap.phpを編集し、_initAutoload()メソッドの下部に以下のコードを追加します。

application/Bootstrap.php

...
protected function _initViewHelpers()
{
	$this->bootstrap('layout');
	$layout = $this->getResource('layout');
	$view = $layout->getView();
 
	$view->doctype('XHTML1_STRICT');
	$view->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8');
	$view->headTitle()->setSeparator(' - ');
	$view->headTitle('Zend Framework Tutorial');
}
...

レイアウトリソースの初期化を確実にするためにbootstrap() メンバー変数を使います。そして、getResource()を使ってZend_Layoutオブジェクトを取得し、layoutのgetView()メソッドを使ってビューを取得します。

一度$viewインスタンスを取得すれば、後でレンダリング準備のための様々なヘルパーメソッドを使えます。doctype()ビューヘルパーは希望のdoc-typeをセットするのに使います。これは正しいHTMLコードを生成するために色々な他のビューヘルパーから使用されます。headMeta()はメタタグにcontent typeをセットするために使い、headTitle()ビューヘルパーは<title>要素の最後の部分をセットしています。各パーツ間はセパレータで連結されます。

ディスパッチされると、Zend_Layoutはapplication/layouts ディレクトリの layout.phtml というレイアウトビュースクリプトを探します。よって、このファイルを作成しましょう。

ファイルは以下:

zf-tutorial/application/layouts/layout.phtml

<?php 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を使えます。

最初に、Bootstrap::_initViewHelpers()内でセットした<head>セクションの正しいコードを作成するビューヘルパーを出力します。次に<body>内で、タイトルを含む<h1>をdivを作成します。現在のアクションのビュースクリプトを取得して表示するために、layout()ビューヘルパーのcontentプレイスホルダーをechoします。

echo $this->layout()->content;

これはそのアクションのビュースクリプトはlayoutビュースクリプトの前に実行されることを意味しています。

再び4つのURLをテストしてみよう。最後にテストしたものと変わらないはずです！

この時点での主な違いは、すべての描画をレイアウトを使って行っている点です。

スタイル

これは"ただの"チュートリアル”ですが、ほんの少しだけアプリケーションの見た目を良くするためにCSSファイルを使います。これには少し問題を含んでいます。URLは正しいルートディレクトリの位置は分からないため、CSSファイルを参照する方法が実際にはわかりません。

Zend Framework 1.9ではbaseUrl()ビューヘルパーが用意されています。このヘルパーはリクエストオブジェクトから必要な情報を収集し、我々が知らないURLのパーツを提供してくれます。

Zend Framework 1.8ではbeseUrl()ビューヘルパーは用意されていません。そのため、自分で作る必要があります。ビューヘルパーはapplication/views/helpers サブディレクトリに置きます。名前は{HelperName}.phpと付けられます(最初の文字は大文字で)。このクラスには決められた命名規則があります;

Zend_View_Helper_{HelperName}(再度、最初は大文字)

{helperName}()（今度は最初は小文字- 忘れないように！）という関数がクラス内に必要です。この場合、ファイル名はBaseUrl.phpでコードは以下となります。

zf-tutorial/application/views/helpers/BaseUrl.php

<?php
class Zend_View_Helper_BaseUrl
{
    function baseUrl()
    {
        $fc = Zend_Controller_Front::getInstance();
        return $fc->getBaseUrl();
    }
}

複雑な関数ではありません。フロントコントローラのインスタンスを取得して、そのgetBaseUrl()メンバー関数を返すだけです。

ZF1.8とZF1.9のどちらにおいても、自分のビューヘルパーを作成したい場合の手順はbaseUrl()ビューヘルパーを作成したものと同じであることを覚えておいて下さい。

続けて、CSSファイルをapplication/layouts/layout.phtml ファイルの<head>セクションに追加して、再びheadLink()ビューヘルパーを使います。

zf-tutorial/application/layouts/layout.phtml

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

headLink()を使って、付加的な、もっと詳細なCSSファイルを<head>セクションを描画するコントローラー内のビュースクリプトにsite.cssの後に追加することが出来ます。

最後に、いくつかCSSのスタイルを設定するために、public/内に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 – アルバムの一覧表示,新規追加,編集,削除,最後に

コメントを書く

トラックバックはまだありません。

WEB RHODIA RHODIA on WEB