レイアウト

　サイト内のイメージを確立するために、デザイン的にパーツ（ヘッダやフッタ、メニューなど）を複数画面で共通して使用する場合がほとんどだと思います。レイアウトは、そのようなパーツを部分的に切り出して、プログラムレベルで共通化し、メンテナンスコストを減らすことが目的です。

1. レイアウトの構成要素

レイアウト例

　まず、左図のような画面構成を例としてレイアウトの設定を説明します。

　レイアウトを設定するために必要なパーツは、基本構成要素1つと、ヘッダ（header）／メニュー（menu）／コンテンツ（contents）／フッタ（footer）のパーツ要素4つから成り立ちます。
　基本構成要素は、HTMLのBODYタグ以外の部分や、BODYタグ内部の骨組みを含み、パーツ要素4つは基本構成要素から部分的に呼び出される要素になります。

　基本構成要素の内容は、下記のようにヘッダやフッタをインクルードする構文を含んだ内容になります。
※下記はSmartyテンプレートの例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=EUC-JP" />
<link rel="stylesheet" type="text/css" href="/css/default.css" />
<title>レイアウトの例</title>
</head>

<body>

<div id="container">

<!-- ヘッダ -->
<div id="header">
{include file=$_HEADER_}
</div>

<!-- メニュー -->
<div id="menu">
{include file=$_MENU_}
<br><br>
</div>

<!-- コンテンツ -->
<div id="contents">
{include file=$_CONTENTS_}
<br><br>
</div>

<!-- フッタ -->
<div id="footer">
{include file=$_FOOTER_}
</div>

</div>

</body>
</html>

2. レイアウトの設定

　レイアウトの設定方法は、次のようになります。

(1) レイアウト用のテンプレートの作成
(2) レイアウト設定ファイル（layouts.xml）の修正
(3) ルーティング設定ファイル（routers.xml）の修正

(1) レイアウト用のテンプレートの作成

　レイアウト用のテンプレートの作成は、「1. レイアウトの構成要素」で作成したような、 1つの基本構成要素と、0つ以上のパーツ要素を作成します。

　ここでも「1. レイアウトの構成要素」で作成した構成と同じレイアウトで設定してみます。
それぞれの物理ファイルの場所は、下記のようになります。

名称	基本構成要素	パーツ要素	ファイルの場所
基本レイアウト	○	-	SYL_APP_DIR /templates/common/default.html
ヘッダ	-	○	SYL_APP_DIR /templates/common/header.html
メニュー	-	○	SYL_APP_DIR /templates/common/menu.html
コンテンツ	-	○	（各画面毎に異なる）
フッタ	-	○	SYL_APP_DIR /templates/common/footer.html

(2) レイアウト設定ファイル（layouts.xml）の修正

　(1)のファイルを元にレイアウト設定ファイル（layouts.xml）を修正します。

SYL_APP_CONFIG_DIR /layouts.xml

<syl-layouts>

<layout name="default"
        file="common/default.html"
        enable="true">
  <template name="_HEADER_" file="common/header.html" />
  <template name="_MENU_" file="common/menu.html" />
  <content name="_CONTENTS_" />
  <template name="_FOOTER_" file="common/footer.html" />
</layout>

</syl-layouts>

赤字のところを追加します。
※タグ内容については、「3.8 設定ファイルの仕様（layouts.xml）」参照

(3) ルーティング設定ファイル（routers.xml）の修正

　(2) のレイアウトの設定が終了したら、そのレイアウトに対するアクションの適用範囲をルーティング設定ファイル（routers.xml）に追加します。

　適用するアクション領域（requestAction）に対して、(2)で設定したレイアウト名（name）を layoutName に設定し、viewType をレイアウト対応のタイプに変更します。

SYL_APP_CONFIG_DIR /routers.xml

...
<router requestAction="/(.+).php"
        viewType="layout.smarty"
        layoutName="default" />
...

　設定は以上で完了です。実際に表示してみて、想定通り表示されるか確認します。

3. レイアウト設定の追加パラメータ

　レイアウト設定に共通のテンプレート（1. の例ではヘッダなど）を定義し、かつそこに対して変数値がURLごとに異なる場合、アクションごとに変数にセットするか、または、共通のアクションクラスで分岐しセットするかになります。
　後々変数値を修正する場合、プログラムファイルの管理が発生し、最悪複数ファイルを修正することになり、煩雑で手間がかかる場合があります。

　ここでは、そのような変数値をレイアウト設定ファイルに一元的に記述し、管理する方法を示します。

...
<layout name="default"
        file="common/default.html"
        enable="true">
  <template name="_HEADER_" file="common/header.html" />
  <template name="_MENU_" file="common/menu.html" />
  <content name="_CONTENTS_" />
  <template name="_FOOTER_" file="common/footer.html" />

  <params>
    <action path="/aaa.php">
      <param name="html_title" value="タイトルA" />
    </action>
    <action path="/bbb.php">
      <param name="html_title" value="タイトルB" />
    </action>
  </params>
</layout>
...

上記例では、/aaa.php アクションファイルにリクエストされた場合、html_title 変数に「タイトルA」をセットし、同様に、/bbb.php アクションファイルにリクエストされた場合、html_title 変数に「タイトルB」をセットします。

このように設定することで、共通のテンプレートファイルにセットする変数を設定ファイルレベルで可変できるようになります。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=EUC-JP" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>{$html_title}</title>
</head>
...