第7章 レイアウト

目次

7.1. レイアウト機能
7.1.1. 共通レイアウトを使う
7.1.2. コンテンツ挿入先の指定
7.1.3. 利用するコンテンツの範囲指定

7.1. レイアウト機能

7.1.1. 共通レイアウトを使う

Web サイトを構成するためいくつかのページを準備する際、 それらページの全てでヘッダ情報 (<head> ) や外観を共通のものとして利用したいことがあるでしょう。 そのような場合は、レイアウト機能を使用すればよいでしょう。

レイアウト機能を使用すれば、本来の描写内容として指定するテンプレートとは別に、 外観 (外枠) が記述してあるレイアウトテンプレートを別途指定することで、 レイアウトテンプレートとコンテンツテンプレートを組み合わせた結果を画面に描写させることができます。

レイアウト機能を使用するためには、 コンテンツテンプレートを指定する cast メソッドの前の段階において setLayout メソッドを使用し、レイアウトテンプレート名を指定します。 またレイアウトテンプレート内ではコンテンツ内容を挿入する場所として、適当のエレメントに「content_for_layout」属性を付与させたものを準備します。

例 7.1. レイアウト機能の利用

レイアウトテンプレート (Layout.html)
<html>
<head>
  <title>Runemasterマニュアル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div content_for_layout></div>
</body>
</html>
コンテンツテンプレート (Content.html)
<h1>Hello, World!</h1>
PHP コード
$master = new Rune_Master('/path/to/templateDirectory');

$master->setLayout('Layout');
$master->cast('Content');
実行結果
<html>
<head>
  <title>Runemasterマニュアル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div><h1>Hello, World!</h1></div>
</body>
</html>

7.1.2. コンテンツ挿入先の指定

前述のとおり、レイアウトテンプレートではコンテンツテンプレートの内容の挿入先を指定するため、content_for_layout 属性を準備します。 この属性が指定されたエレメントの内部に、コンテンツ内容が挿入されることになります。

<div content_for_layout></div>

これは、次のように書くことも可能で、同じ結果を得ることができます。

<div content_for_layout="inner"></div>

またこれまでのようにレイアウトテンプレートの指定エレメントの内部にコンテンツを挿入するのではなく、 指定エレメントそのものをコンテンツに置き換えることもできます。 次の例のように置き換える対象となるエレメントの属性値として「content_for_layout="outer"」を準備することで、コンテンツの内容がそのエレメントに置き換わって描写されることになります。

例 7.2. レイアウトの指定エレメントごとコンテンツに置き換える

レイアウトテンプレート (Layout.html)
<html>
<head>
  <title>Runemasterマニュアル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div content_for_layout="outer"></div>
</body>
</html>
コンテンツテンプレート (Content.html)
<h1>Hello, World!</h1>
PHP コード
$master = new Rune_Master('/path/to/templateDirectory');

$master->setLayout('Layout');
$master->cast('Content');
実行結果
<html>
<head>
  <title>Runemasterマニュアル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <h1>Hello, World!</h1>
</body>
</html>

7.1.3. 利用するコンテンツの範囲指定

レイアウトへ挿入するコンテンツの内容は、テンプレート内の全てではなく範囲を限定させることも可能です。 利用するコンテンツの範囲を指定するには、コンテンツテンプレートにおいてその箇所をエレメントで囲み、「contents」属性を付与します。

次の例では <div> に contents 属性を付与させていますので、 そのエレメント内にある「<h1>Hello, World</h1>」がコンテンツの内容として利用されることになります。

例 7.3. レイアウトへ挿入するコンテンツを限定する

<html>
<head>
  <title>Runemaster チュートリアル</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div contents><h1>Hello, World</h1></div>
</body>
</html>

これはレイアウトテンプレートにおける content_for_layout 属性と同じく、次のように書くことも可能です。

<div contents="inner"><h1>Hello, World</h1></div>

また contents 属性の値として「outer」を設定することで、contents 属性をもったエレメントそのものをコンテンツとして使用するよう範囲指定することもできます。次の例では、<div> を含めた全てがコンテンツとなります。

<div contents="outer"><h1>Hello, World</h1></div>