2009年7月6日

デザイナーとsymfony

こんにちは、アシアルの中川です。

近頃のPHP開発では、フレームワークを使うのが当たり前になってきています。
開発効率やメンテナンス性の向上など、フレームワークを使った開発の恩恵は開発者には非常にありがたいものです。
しかし、デザイナーの方にとっては、どうでしょう？


※ここでいうデザイナーとは、非プログラマ全般を指しています。大雑把なくくりですみません。。。

フレームワークの訳の分からないディレクトリ構成や、独特のクセがあったりして覚えるのも大変だと思います。
一昔前では、Smartyという軽量のフレームワーク（テンプレートエンジン）なら、編集してもらえるデザイナーの方もいましたが、最近のsymfonyやCakePHPなどのフレームワークとなると格段に複雑さが増しています。
また、こういったフレームワークはデザイナー向けの情報がたくさんあるわけではありませんので、なかなか敬遠される傾向にあるのではないでしょうか。

そこで、PHPの代表的なフレームワークのsymfonyについて、表示（テンプレート）部分に絞って書いてみたいと思います。

今回はざっくりとディレクトリ構成とテンプレートの構成についてです。
では、早速サンプルのプロジェクトで見ていきましょう。

前提としてデザイナーの方が最初からsymfonyプロジェクトを一人で作るということもないと思いますので、symfonyプロジェクトの構成はプログラマが既に作っているとします。

まず最初に覚えることがディレクトリ構成です。
以下のような構成になっています。

symfonyでは、MY_PROJECT/appsの中のように、アプリごとにディレクトリが作られ、各アプリ内のmodulesディレクトリに機能ごとのディレクトリができます。
今回は、ユーザ側を frontsample, 管理側を backsample というアプリ名としています。

まず、ユーザがブラウザで直接アクセスできるディレクトリは、


MY_PROJECT/web

になります。
このディレクトリ以下に css, images, js などのディレクトリを作り静的なファイルを配置します。
例えば、web/campaign.htmlなどのファイルを配置すれば、ブラウザでアクセスできるようになります。


http://MY_PROJECT/campaign.html

さて、静的なファイルは置くだけなので、大丈夫として、PHPの処理が絡んだ表示の為のファイル（テンプレートファイル）は、全然別の位置に置いてあります。

主に、テンプレートに関わるファイルは frontsample アプリの場合、以下の場所に配置されます。


MY_PROJECT/apps/frontsample/templates/
MY_PROJECT/apps/frontsample/modules/login/templates
MY_PROJECT/apps/frontsample/modules/mypage/templates
MY_PROJECT/apps/frontsample/modules/top/templates

アプリ内で共通のテンプレート置場と各モジュールごとのテンプレート置場 (templates)があります。
※モジュールとは、いち機能のまとまり（一覧、編集、削除など）のことです。

各アプリケーション内のファイルは以下のようになっています。

ここでは、mypageモジュールを見ていきましょう。


mypage/actions

　プログラムのロジックを書く為のactions.class.php ファイル


mypage/templates

　各処理に対応したテンプレート


mypage/config

　このモジュール専用の設定ファイルを配置。不要な場合は作りません。


mypage/config/view.yml

　yaml（ヤムル）形式で表示に関する設定。
　ページのタイトル、個別に読み込むCSS・JavaScriptなどの設定を行います。
　※configアプリ内で共通で設定したい場合は、
　MY_PROJECT/apps/frontsample/config/view.yml に記述します。

テンプレートを変更したい場合は、mypage/templates内のファイルを編集します。
が、まずは一旦、actions.class.php を開いてみましょう。


<?php
//MY_PROJECT/apps/frontsample/modules/mypage/actions/actions.class.php
class mypageActions extends sfActions
{
　// http://MY_PROJECT/mypage/
　public function executeIndex(sfWebRequest $request)
　{
　　//処理
　}
}

こんな感じで「executeXxxxxx」というメソッド(命令)が記述されています。
この命令が以下の形式でアクセスするURLに対応しています。


http://MY_PROJECT/モジュール名/アクション名/

アクション名は、executeを取ってその後の文字を小文字にしたものです。


例:) http://MY_PROJECT/mypage/index

（実際には対応するURLはroutingの仕組みで変えたりできるので、必ずしも上記の形式になる訳ではありません。）

新しいページを作る場合、executeZzzzzzなどの命令を追加してから次に説明するテンプレートファイルを作る必要があります。
デザイナ向けの表示の為だけの編集用のモジュールを作ってあるという場合でなければ、
routingの設定や、処理の記述などなども絡む可能性があるので、actionはプログラマまかせでいいと思います。

さて、肝心のテンプレートファイルですが、上記の「Xxxxxx」にあたる部分と対応して、同じモジュール内のtemplatesディレクトリ(今回だと mypage/templates ) にファイルがあります。
executeを取って、最初を小文字にして、その後Success.phpを付けたファイル名がテンプレートになります。
例:)


「public function executeIndex() { ... } 」の場合、indexSuccess.php
「public function executeEditData() { ...} 」の場合、editDataSuccess.php

先ほどのactionに対応するテンプレートは以下になります。


MY_PROJECT/apps/frontsample/modules/mypage/templates/indexSuccess.php

このファイルに実際にユーザに出力されるHTMLや、テンプレートに埋め込むPHPの値が記述されています。
ただし、ここで注意があります。
このindexSuccess.php は表示されるページの一部分でしかありません。

symfonyに限らず、フレームワークを使った表示では（smartyの場合もそうですが）、テンプレートは複数のファイルから成り立っています。
ヘッダーやフッター、サイドバーなどの共通の部分は、ひとつのファイルにまとめて管理しています。

今回の場合は以下のような構成のデザインで考えてみましょう。

さきほどの説明のように各モジュール内のtemplatesディレクトリの
テンプレートが「content」部分に出力されます。

そして、レイアウトの灰色の部分にあたるのが、headタグや、bodyタグの全体を包む部分のテンプレートは、


MY_PROJECT/apps/frontsample/templates/layout.php

が担当します。

layout.phpの中身を見てみます。


<html>
　<head>
　　<!-- metaやtitleの設定 -->
　　<?php include_http_metas() ?>
　　<?php include_metas() ?>
　　<?php include_title() ?>
　</head>
　<body>
　　<div id="wrap">
　　　<?php include_partial('global/header') ?>
　　　<div>
　　　　<?php include_partial('global/sidebar') ?>
　　　　<?php echo $sf_content ?>
　　　</div>
　　　<?php include_partial('global/footer') ?>
　　</div>
　</body>
</html>

include_partialという命令を使って各部品を読み込んでいます。
'global/部品名'と指定しているファイルは、


MY_PROJECT/apps/frontsample/templates/_部品名.php

を読み込みます。

こんな感じで各エリアを部品化して管理しています。
各部品内でロジックを記述するような複雑な処理をして表示を変えたりする場合には、モジュールを作成し、コンポーネント(component)とよばれる機能を使いますが、今回はそこまでは、説明はしないようにします。

「content」にあたる部分を編集する場合には、どのモジュールかをURLから見当をつけモジュール内のtemplatesディレクトリにあるファイルを編集すればOKです。
が、テンプレートファイルを開くと、そこにはまた、フレームワークの機能をふんだんに使ったPHPコードが埋め込まれていることでしょう。。。
そこを語りだすと長くなりそうなので、今回は簡単にディレクトリ構成とテンプレート置き場についてで終わりたいと思います。

ではでは、また次回はいつになるかわかりませんが（他のメンバーが書いてくれるかも？）、symfonyは公式ドキュメントも日本語化されている部分も多いので、是非そちらも参考にしてみて下さい。

参考
http://www.symfony-project.org/
http://www.symfony-project.org/getting-started/1_2/ja/
http://www.symfony-project.org/jobeet/1_2/Doctrine/ja/