Dreamweaverのテンプレート 〜 1:テンプレートの基本構造 〜

Dreamweaver

仕事の都合でDreamweaver（以下DW）のテンプレートを用意することになりました。個人的には好きじゃないけど、その方が仕事がうまく回るなら使った方がいいに決まってる。

どうせならテンプレートの仕様を覚えて自分でちゃんと制御した方がいいよね、ということで少し調べてみました。手元にあるのがDreamweaver8と古いけど、基本的な仕様は多分ほとんど変わらないはず。

なお、エントリのパーマリンクからお越しの皆様へ。現在、はてダではスーパーPRE記法の中にHTMLコメントを入れると何故か表示されない不具合があるようです。日付のページからだとちゃんと表示されるので、ソース内のHTMLコメントが表示されない場合は2008/09/20のページへどうぞ。

■テンプレートの構造

DWのテンプレート機能は、HTMLに埋め込まれたコメントをDWが独自に解釈することで成立している。

テンプレートファイルはプロジェクトのルートディレクトリにTemplatesという名前で作られる。拡張子は.dwt。

dwtは基本的に通常のHTMLファイル。ここに以下のような「編集可能領域」をコメントで確保していく。

<!-- TemplateBeginEditable name="領域名" --><!-- TemplateEndEditable -->

この2つのコメントの間がDWで編集できるようになる。

領域名は自由に設定できるが、同じ名前の領域が複数あるとテンプレートをうまくパースできなくなって、DW上でダイアログがボコボコ出て大変なことになるので避ける。

テンプレートを使ったページは、この編集可能領域だけが書き換えられる。ただのコメントなので当然DW以外では書き換えられるが、テンプレートが更新されたりすると編集可能領域の外側は全てテンプレートの内容で上書きされる。当然、このコメントの構造が崩れるとDWでテンプレートを制御できなくなる。

DWでテンプレートを新規作成すると、初期状態としてhead要素の末尾と、title要素を編集可能領域としたHTMLが展開される。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>無題ドキュメント</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
</body>
</html>

DOCTYPE宣言やcharsetの定義は、DWの環境設定でデフォルトとして設定したものが適用される。

title部分は

<title><!-- TemplateBeginEditable name="doctitle" --><!-- TemplateEndEditable --></title>

こうして、タイトルの内容だけを編集可能にした方がいいんじゃないかと思ったが、こうするとコメントもタイトルとしてブラウザに表示されてしまうことが判明して敗北。

ただ、そうなるとdoctitleとheadで編集可能領域を2つ持たせる意味がないので、head内は

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="head" -->
<title></title>
<!-- TemplateEndEditable -->
</head>

だけでいいと思う。

こうして TemplateBeginEditable 〜 TemplateEndEditable を適宜確保するのが一番基本的なテンプレートの作り方。

ひとまず、こんなテンプレートを書いてみた。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="head" -->
<title></title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="css/base.css" type="text/css" media="all">
</head>
<body>
<!-- TemplateBeginEditable name="body" -->
<!-- TemplateEndEditable -->
</body>
</html>

■テンプレートからページを作る

こうして作ったテンプレートからページを作成。HTMLがどのように展開されるかを確認してみる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="head" -->
<title></title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="Templates/css/base.css" type="text/css" media="all">
</head>
<body>
<!-- InstanceBeginEditable name="body" -->
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

TemplateBeginEditable 〜 TemplateEndEditable が InstanceBeginEditable 〜 InstanceEndEditable に変換されるらしい。

InstanceBeginがテンプレートの開始、InstanceEndが終了に対応してるっぽい。

DOCTYPE宣言やhtml要素は何故かInstanceの外側になっている。html要素の外側にコメントを置くとvalidじゃなくなるとか、そんな理由なんだろうか。

そして、そのせいなのか該当部分は編集可能になっている。DOCTYPE宣言とかページ毎に変更可能です。でもテンプレート更新して、再適用したらまた元の状態に戻る。正直、何がしたいのかよく分からない。

InstanceBeginをもう少し見てみると、2つ属性が定義されてる。tempalteで、そのページがどのテンプレートから作られたかを保持してるっぽい。

codeOutesideHTMLIsLocked="false"というのはよく分からない。ヘルプを見ると、

テンプレートのサーバースクリプトおよびテンプレートから作成されたドキュメント

サーバースクリプトの中には、ドキュメントの最先端または最後尾 ( タグの前、または タグの後) に挿入されるものがあります。このようなスクリプトは、テンプレートおよびテンプレートから作成したドキュメントにおいて、特別な扱いが必要です。通常、テンプレートの タグの前、または タグの後にあるスクリプトコードを変更しても、テンプレートから作成するドキュメントに変更はコピーされません。そのため、テンプレートの本体に含まれる他のサーバースクリプトが、コピーされなかったスクリプトに依存している場合、サーバーにエラーが生じる可能性があります。このような理由により、Dreamweaver では、テンプレートの タグの前または タグの後にあるスクリプトを変更する際に、警告が表示されます。

この問題を避けるには、テンプレートの head セクションに、以下のコードを挿入します。

このコードがテンプレートに挿入されると、 タグの前または タグの後のスクリプトへの変更は、テンプレートから作成されたドキュメントにコピーされます。ただし、ドキュメント側でこれらのスクリプトを編集することはできなくなります。つまり、これらのスクリプトの編集は、テンプレート、またはテンプレートから作成したドキュメントのいずれかで行います。両方では編集できません。

という何だかよく分からない解説が。

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

とテンプレートに書いておけば、作成したページでhtml要素の外に書いたコードが、テンプレートを再適用しても上書きされないらしいです。でも、DOCTYPE宣言とhtmlタグその物は、編集可能だけどテンプレート再適用で上書きされる。このへん、何か中途半端な印象がぬぐえない。

trueにしておいた方がテンプレートが安定しそうな気がするけど、htmlの開始・終了タグの名前を変えた瞬間に編集できなくなって元に戻せなくなる（undoは効くからそれで直せるけど）とか、何だか適当に作ったような機能なのでデフォルトのままfalseにした方が安心かも。

それはそうと、CSSがうまく読めてないですね。

<link rel="stylesheet" href="Templates/css/base.css" type="text/css" media="all">

テンプレートを格納したディレクトリを起点として、DWがディレクトリを書き換えるみたいです。なので、テンプレートがTemplates内にある場合は

<link rel="stylesheet" href="../css/base.css" type="text/css" media="all">

としておかないといけない。絶対パスで書けば安定するけど、DWのテンプレートを使うケースというのは大抵Windowsのローカルで作っているはずなので難しいですね。

CSS以外にも何かファイルを読む場合や、リンクを貼る場合はdwtのあるディレクトリが起点になるので注意。

■まとめ

  • DWのテンプレートはHTMLコメントで構成される
  • TemplateBeginEditable 〜 TemplateEndEditableで編集可能領域を作る
  • 外部ファイルは、テンプレートがあるディレクトリを起点に相対パスで記述する

ひとまず、今回のテンプレートは以下で完成。次回に続く。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="head" -->
<title></title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="../css/base.css" type="text/css" media="all">
</head>
<body>
<!-- TemplateBeginEditable name="body" -->
<!-- TemplateEndEditable -->
</body>
</html>

■関連エントリ