テンプレート機能を使ってみよう　パート1：「編集可能領域」と「オプション領域」の使い方

Dreamweaverには、Webサイト内で共通する部分（ヘッダやフッタ、サイドバーなど）を1つのファイルでまとめて管理することができる「テンプレート機能」が備わっています。テンプレート機能を使えば、数十～数百ページ規模のWebサイトでも、1つのファイルを編集するだけで全てのページに対して修正や追加を行うことができます。また、テンプレート機能を利用する上で、CMSやSSI（サーバサイドインクルード）、PHPなどのようにサーバ側の機能が一切必要ないため、サーバ環境に左右されずに利用できることも特徴です。

本連載では、2回にわたりテンプレート機能の使い方を解説します。まずは、基本となる「編集可能領域」と「オプション領域」の使い方です。

テンプレートを導入する前（記事を見ながらテンプレートの使い方を学べます）

テンプレート機能において基本となるのは「編集可能領域」です。HTMLファイルに対して「編集可能領域」を設置してテンプレートに変換し、Webサイトの雛形を用意しましょう。

STEP01　「サイト定義」をしている状態で、雛形としたいHTMLファイルを開きます。

STEP02　編集可能としたい部分を選択します。「編集可能領域」の外が雛形となります。デザインビューからも該当箇所を選択することができますが、コードビューを併用するとより確実に選択できます。ここでは<div id="main">の中身を選択しました。

STEP03　STEP02で選択した範囲を「編集可能領域」として設定します。選択した状態でメニューバーから「挿入 → テンプレートオブジェクト → 編集可能領域」を選びます。

STEP04　「編集可能領域」の設定時に、領域に名前を付ける必要があります。ここでは、メインコンテンツの領域を編集可能領域にしたので、領域の名前は「コンテンツエリア」としました。

STEP05　領域の名前を設定すると、デザインビューには領域の囲みが、コードビューにはテンプレート用のコメントが挿入されます。

STEP06　メニューバーから「ファイル → テンプレートとして保存」を選び、このファイルをテンプレートとして保存します。[テンプレートとして保存]ダイアログの[保存名]には任意でファイル名を入力しましょう。ここでは「template」としました。

STEP07　これでdwtファイルが作成されました。ファイルパネルには「Templates」というディレクトリが自動で生成され、STEP06で保存したテンプレートは、拡張子が.dwtとなりこのディレクトリに格納されます。

dwtファイルを利用する

次に、dwtファイル（テンプレートファイル）を元に新しいページを作成する手順を説明します。

STEP01　新規ページを作成する際にdwtファイルを利用する場合は、メニューバーから「ファイル → 新規」を選んだ際に開く[新規ドキュメント]ダイアログにて[テンプレートから作成]を選択し、前項目で作成したテンプレートを選択します。

STEP02　STEP01で開いた状態では、img要素のsrc属性などのパスがローカル環境のフルパスになってしまいます。一度保存することで、これを相対パスに自動修正することができます。

STEP03　テンプレートを利用したHTMLでは、「編集可能領域」以外はロックされており、誤操作防止にもなります。デザインビューでは編集可能領域外は操作禁止のカーソルで表示され、コードビューでは編集可能領域外のソースコードはグレーで表示されます。

dwtファイルを編集すると、そのdwtファイルを利用したファイルも自動で更新されます。ナビゲーションやバナーの追加やコピーライトの文言変更など、Webサイト全体に関わるような修正が発生した際に活躍するでしょう。

「編集可能領域」導入後のサンプルサイト一式

サンプルファイル

sample_step1.zip（ZIP、169KB）

多くのWebサイトでは、現在表示しているページのカテゴリに対応するグローバルナビゲーションが反転して表示されます。テンプレート機能では、このよう な仕組みを実装することもできます。ページのカテゴリによって反転されるナビゲーションの表示を変えるためには、「オプション領域」による条件分岐の設定 を利用します。

STEP01　 先ほど作成したdwtファイル「template.dwt」を開きます。

STEP02　編集可能領域の外にあるナビゲーションをコピーし修正して、切り替え表示のパターンを用意します。

STEP03　STEP02で用意したパターンの1つ目を選択した状態で、メニューバーから「挿入 → テンプレートオブジェクト → オプション領域を選びます。

STEP04　[新規オプション領域]のダイアログが表示されるので、名前を付けます。この例ではトップページが反転しているので、名前を「gnav_top」としました。

STEP05　その他のパターン全てに対しても同様に、[オプション領域]を設定し、名前を付けていきます。名前はあとで判別しやすいように、それぞれに同じ接頭辞を付けておくとよいでしょう。ここでは、STEP 04 の「gnav_top」に合わせ、「gnav_products」「gnav_order」「gnav_blog」「gnav_company」としまし た。また、これらについては[初期設定では表示]のチェックは外しておきましょう。

STEP06　全てのパターンに対して[オプション領域]を設定し終えると、デザインビューでは次のように[名前]が表示された状態になります。この状態 で一度このdwtファイルを保存します。保存する際に、[テンプレートファイルの更新]ダイアログが表示されるので、[更新]ボタンを選択します。

STEP07　更新保存したファイルを再度開いてみると、グローバルナビゲーションの変更が適用され、[初期設定では表示]のチェックを入れた「gnav_top」パターンが表示されています。

「テンプレートプロパティ」で表示を切り替える

次に、「オプション領域」を設定したdwtファイルを元に新しいページを作成する手順を説明します。ここでは、商品一覧ページを作成するとして、グローバルナビゲーションの「商品一覧」部分が反転したパターンを表示させるようにします。

STEP01　メニューバーから「ファイル → 新規」を選んだ際に開く[新規ドキュメント]ダイアログにて[テンプレートから作成]を選択し、前項目で作成したテンプレートを選択します。

STEP02　グローバルナビゲーションの反転位置を変更してみましょう。前項目で設定した分岐の条件を変更するためには、メニューバーから「修正 → テンプレートプロパティ」を選び、[テンプレートのプロパティ]ダイアログを開きます。先ほど設定したプロパティの一覧が表示されるので、ここから gnav_productsのみを[真]に、それ以外を[偽]に設定します。

STEP03　設定が終わると表示が切り替わります。

[オプション領域]を利用した表示／非表示切り替えは、この作例の他にもサイドバーなど、Webページのさまざまなパーツに応用できるでしょう。

「編集可能領域」と「オプション領域」導入後のサンプルサイト一式

サンプルファイル

sample_step2.zip（ZIP、169KB）

まとめ

テンプレート機能を利用すれば1つのファイルを編集するだけでWebサイト全体の修正を行うことができます。まずは「編集可能領域」と「オプション領域」の使い方を理解すれば普段の業務などでテンプレート機能を活かすことができるでしょう。

また、ここで紹介した他にも、テンプレートに関連する機能には「リピート領域」や「ネストされたテンプレート」、「編集可能なタグ属性」などがあり、「オプション領域」に対してはさらに複雑な条件分岐を設定することも可能です。次回の記事では、より複雑な条件分岐について触れていきます。

Webサイトの構築フェーズから運用フェーズまで活躍するテンプレート機能をぜひ利用してみてください。