テンプレート機能を使ってみよう パート2：コピペで利用できる、複雑なテンプレート式のサンプル
作成日
6 May 2010
ページ ツール |
必要条件
ユーザーレベル
中級
必要な製品
- Dreamweaver CS4 (Download trial)
テンプレート機能を使ってみようのパート1では、Dreamweaverのテンプレート機能の基本的な使い方を紹介しました。テンプレート機能にはいくつかのテンプレートオブジェクトが用意されており、これらを活用すればテンプレートにさまざまな設定を埋め込むことができます。
パート2では、「テンプレートタグ」と「テンプレート式」の使い方を、5つの利用シーンを想定したサンプルをもとに解説します。ご紹介するサンプルには一部にJavaScirptの演算子やメソッドを利用していますが、JavaScriptが苦手な方でもご紹介するサンプルをコードをコピーして利用することができるでしょう。
テンプレートコードの構成
テンプレートタグ・式を書く準備として、基本的なテンプレートがどのように構成されているのかを知っておきましょう。一般的には、テンプレートタグ・式に利用するパラメータ(TemplateParam)を設定したうえで、テンプレートタグ・式を記述します。パラメータはテンプレート上で変数の役割をします。例えば、以下のようにのように記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<!-- TemplateParam name="sample" type="text" value="初期値" -->
</head>
<body>
@@('<p>' + sample + '</p>')@@
</body>
</html>
この例では<head>内に「sample」というパラメータを設定し、<body>内に式を記述しています。テンプレートを適用したページの<body>内には「<p>初期値</p>」が出力されます。テンプレートで利用するパラメータには以下の5つのタイプで指定することができます。
テンプレートオブジェクトは一般的にDreamweaverのメニュー項目やダイアログから挿入しますが、上記のようにテンプレートタグ・式を直接書くことでも同様、またはそれ以上の効果を得ることができます。Dreamweaverの挿入だけでは実現できないコードのサンプルをみていきましょう。
なお、どのようなテンプレートタグが用意されているかの詳細は、下記のWebページを参考になるでしょう。
サンプルデータの利用方法
次ページからは、5つの利用シーンを想定したサンプルをもとにテンプレート式の活用例を紹介していきます。サンプルデータを使用する場合には、ダウンロードしたフォルダがルートとなるようにDreamweaverで[サイト定義]し、ルート直下にTemplateフォルダがある状態にしてください。するとファイルパネルが以下の構成になります。
上記の状態でテンプレートを適用した新規ファイルを作成し、[テンプレートプロパティ]ダイアログを操作することで動作を確認いただくことができます。
サンプル1 : title要素、パンくず、ページ大見出しをまとめて管理する
ページタイトルや見出しなど、ページ内に同じ文字列を挿入することがあります。そうした場合には、1つの値を複数の箇所に出力できる特性を活かしたテンプレートを作ります。まずパラメータに「pagetitle」を用意して、title要素内、パンくずの末尾、ページの大見出しに「pagetitle」の内容を一括出力します。
サンプル：sampleSite1_root.zip（ZIP、3KB）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@@(pagetitle)@@ | サンプルのサイト</title>
<link rel="stylesheet" type="text/css" href="../styles/template.css" />
<!-- TemplateParam name="pagetitle" type="text" value="初期値" -->
</head>
<body>
(省略)
<div id="main">
<p id="topicPath"><a href="#">home</a>
(省略)
> @@(pagetitle)@@
</p>
<h2>@@(pagetitle)@@</h2>
<p>text text text text text text...</p>
</div>
(省略)
</body>
</html>
このテンプレートを適用した新規ファイルで、パラメータ「pagetitle」の値に「商品情報」と入力した場合には、タイトル、パンくずの末尾、大見出しの内容が一括で「商品情報」となります。
一方、パラメータ「pagetitle」の値に「会社概要」と入力した場合には、タイトル、パンくずの末尾、大見出しの内容が一括で「会社概要」となります。
サンプル2 : body要素のclass属性値とid属性値を管理する
bodyのidやclassを活用して「body#layoutA #contents{...}」などのようにCSSを構築し、ページごとにデザインに変化をつけることがあります。そうした場合のテンプレートとしては、パラメータに「bodyId」と「bodyClass」を用意し、この値がbodyのid属性値、class属性値に反映されるようにします。さらに、三項演算子（条件 ? 真の場合の値 : 偽の場合の値）による条件分岐を使い、各パラメータが空の時には属性自体出力されないようにしておきます。
サンプル：sampleSite2_root.zip（ZIP、3KB）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプルページ | サンプルのサイト</title>
<link rel="stylesheet" type="text/css" href="../styles/template.css" />
<!-- TemplateParam name="bodyId" type="text" value="初期値" -->
<!-- TemplateParam name="bodyClass" type="text" value="初期値" -->
</head>
<body @@((bodyId == '') ? '' : 'id="' + bodyId + '"';)@@@@((bodyClass == '')?'' : ' class="' + bodyClass + '"';)@@>
(省略)
</body>
</html>
このテンプレートを適用した新規ファイルで、パラメータ「bodyId」の値に「sampleId」、パラメータ「bodyClass」の値に「sampleClass」と入力した場合には、bodyのid属性値、class属性値にそれぞれが反映されます。
一方、パラメータ「bodyId」の値、パラメータ「bodyClass」の値を空白にした場合には、条件分岐によりbodyのid属性、class属性自体も出力されません。そのため属性値が空の状態で出力されるということはありません。
TemplateBeginIfやTemplateBeginMultipleIfで複雑な条件式を設定する
ここまでで紹介した「@@ @@」の書き方では、三項演算子による条件分岐はできますが、ある程度のブロック単位のコンテンツ出し分けには向きません。条件分岐でブロック単位のコンテンツ出し分けをしたい場合には、オプション領域の挿入時にも利用されるテンプレートタグ「TemplateBeginIf」や「TemplateBeginMultipleIf」を使います。
TemplateBeginIfやTemplateBeginMultipleIfの条件式には、ブール値（真/偽）だけでなく、テキストや数値も扱うことができます。また、 や &&、 ! などの演算子や正規表現を組み合わせることでより複雑な条件を設定することができます。これらの特性を利用した例をご紹介します。
サンプル3 : 条件式でサイドバーの出し分けを行う
ページごとにコンテンツをブロック単位で切り替えたい場合があります。このサンプルでは、TemplateBeginIfを使って条件式を設定し、パラメータ「category」の値によってサイドバーの表示コンテンツを切り替えます。例えば、パラメータ「category」の値が「商品情報」に一致すれば商品一覧用のサイドバーを、「会社情報」に一致すれば会社情報のサイドバーを表示します。なお、このサンプルではtest()メソッドを用い、正規表現を使った分岐を行っています。
Dreamweaverのテンプレート式には、JavaScriptのtest()メソッドやreplace()メソッドと正規表現を利用することもできます。例えば、このサンプルで使用する「^」は行頭を意味し、「$」は行末を意味するので、「^商品紹介$」の条件の場合、値「商品紹介」は真となりますが、値「この商品紹介です」は行頭は「この...」、行末は「...です」なので偽となります。この他にも正規表現の様々なメタ文字を利用できます。
サンプル：sampleSite3_root.zip（ZIP、3KB）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプルページ | サンプルのサイト</title>
<link rel="stylesheet" type="text/css" href="../styles/template.css" />
<!-- TemplateParam name="category" type="text" value="" -->
</head>
<body>
(省略)
<div id="side">
<!-- TemplateBeginIf cond="/^商品情報$/.test(category)" -->
<h2>商品情報</h2>
<ul>
(省略 : categoryの値が「商品情報」と一致するときのサイドバー)
</ul>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="/^会社情報$/.test(category)" -->
<h2>会社情報</h2>
<ul>
(省略 : categoryの値が「会社情報」と一致するときのサイドバー)
</ul>
<!-- TemplateEndIf -->
</div>
(省略)
</body>
</html>
このテンプレートを適用した新規ファイルで、パラメータ「category」の値に「商品情報」と入力した場合には、商品情報に対応したサイドバーが表示されます。
パラメータ「category」の値に「商品情報です」と入力した場合には、何も表示されません。
パラメータ「category」の値に「会社情報」と入力した場合には、会社情報に対応したサイドバーが表示されます。
サンプル4 : 入力した内容に応じてナビゲーションの出し分けをする
ナビゲーションでは、デザイン的な変化を加え、現在表示してるページの位置を示すことが当たり前となっています。こうした仕組みをテンプレートで実現するには、メニューごとにデザインの異なるナビゲーションを用意し、パラメータ「category」の値によってナビゲーションのデザインを切り替えます。
サンプル3では、条件式を設定にTemplateBeginIfを使いましたが、例外時の場合は何も表示できないため、常時表示する必要があるナビゲーションには使えません。そこで、TemplateBeginMultipleIfを使います。TemplateBeginMultipleIfでは、「条件1の場合、条件2の場合、どちらでもない場合」のように、条件に当てはまらない場合にも対応することができます。例えば、パラメータ「category」の値が「商品情報」に一致すれば商品一覧用のナビゲーションを、「会社情報」に一致すれば会社情報のナビゲーションを、どちらにも一致しなければ通常のナビゲーション表示します。「どちらでもない場合」は、TemplateBeginMultipleIfの最後に配置し、その条件は常にtrueとなるよう、<!-- TemplateBeginIfClause cond="true" -->と記述します。
サンプル：sampleSite4_root.zip（ZIP、3KB）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプルページ | サンプルのサイト</title>
<link rel="stylesheet" type="text/css" href="../styles/template.css" />
<!-- TemplateParam name="category" type="text" value="" -->
</head>
<body>
<div id="header">
<h1>サンプルのサイト</h1>
<!-- TemplateBeginMultipleIf -->
<!-- TemplateBeginIfClause cond="/^商品情報$/.test(category)" -->
<ul>
(省略 : categoryの値が商品情報と一致するときのナビ)
</ul>
<!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="/^会社情報$/.test(category)" -->
<ul>
(省略 : categoryの値が会社情報と一致するときのナビ)
</ul>
<!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="true" -->
<ul>
(省略 : categoryの値がどれとも一致しないときのナビ)
</ul>
<!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
</div>
(省略)
</body>
</html>
このテンプレートを適用した新規ファイルで、パラメータ「category」の値に「商品情報」と入力した場合には、商品情報に対応したナビゲーションが表示されます。
パラメータ「category」の値に「会社情報」と入力した場合には、会社情報に対応したナビゲーションが表示されます。
パラメータ「category」の値が上記以外や空の場合は通常時のナビゲーションが表示されます。
repeat領域内で定義済み変数を利用する
任意のコンテンツブロックをTemplateBeginRepeatタグで囲むと、デザインビューの「+」「-」ボタンでその領域をリピート制御することができます。repeat領域はここまでに紹介したテンプレートタグとやや性質が違い、ブログの記事のように一定のブロック単位で増減を制御できます。repeat領域内では、7つの定義済み変数を利用することができます。例えば以下のような定義済み変数があります。
- _index
- repeat領域内での現在のエントリーの順番（0からスタート）
- _numRows
- repeat領域内のエントリーの合計
- _isFirst
- 現在のエントリーがrepeat領域の先頭ならtrue。それ以外はfalse
- _isLast
- 現在のエントリーがrepeat領域の最後ならtrue。それ以外はfalse
これらの定義済み変数を活用することで、ただコンテンツを繰り返すだけでなく、アクセントや条件をつけた繰り返しを実現することができます。
サンプル5 : 2倍数のブロックにだけ特別なclass属性を指定し、ストライプ表現を管理する
リストやテーブルなどの繰り返しコンテンツは、行が多くなると見づらくなるため、背景色を交互に変えるなどして見やすくすることがあります。そうしたストライプ表現をテンプレートで自動化する場合は、repeat領域と定義済み変数を利用します。
定義済み変数「_index」を利用し、「_index % 2 == 0」のような条件で_indexを2で割り切った時の余りが1か0かを判断すれば、現在のエントリーが奇数番目か偶数番目のどちらなのかを判別できます。エントリーが偶数番目だった場合には、class属性値に「even」を追加するようにし（CSSで異なる背景色を指定）、自動でストライプ表現を行うことができます。なお、エントリーを追加、削除した場合にもこの関係が保たれます。
サンプル：sampleSite5_root.zip（ZIP、3KB）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
(省略)
<style type="text/css">
li.even{ background:#ddd;}
</style>
(省略)
</head>
<body>
(省略)
<ul>
<!-- TemplateBeginRepeat name="リピートリスト_サンプル" -->
<li @@(_index % 2 == 0 ? 'class="even"' : '')@@>
<!-- TemplateBeginEditable name="リピートリスト_サンプルの内容" -->
ここにエントリー内容が入る
<!-- TemplateEndEditable -->
</li>
<!-- TemplateEndRepeat -->
</ul>
(省略)
</html>
このテンプレートを適用した新規ファイルで、repeat領域のエントリーを増やしていくと、交互にclass="even"が挿入されます。
エントリーを追加した場合などには、class="even"が振りなおされます。
まとめ
テンプレート機能は、Dreamweaverの機能で挿入できる[オプション領域][属性を編集可能にする]などの他にも、これらを応用し自分でテンプレート式を書くという選択肢があります。既存のテンプレートオブジェクトだけでなく、自分で書いたテンプレート式を併用すれば、今までよりももっとスマートなテンプレートを構築することができるでしょう。今回ご紹介したサンプルはテンプレート式でできることの一部にすぎませんが、今後、皆様がテンプレート式を書く際の参考になれば幸いです。
