Dreamweaverテンプレート機能調査メモ

特集やLPページなど、静的なHTMLをそのままアップするタイプのページが大量にあり、ヘッダーやフッターなど共通部分を何回も書くのが大変です。かつ、アップした先でPHPなどのincludeも使ってはいけない、恐らくそういう知識もないのだろう会社でのDWテンプレート機能との格闘メモです。
最終的にテンプレート機能を調査し、環境、メンバースキルなどを考慮し、廃止することにしました。
もしかしたら、またDWテンプレート機能が襲い掛かってくる可能性もあるので、調査したメモを残したいと思います。

テンプレート利用の基本的な流れ

-もちろんDWのインストールが必要。

• テンプレートを使いたいフォルダをサイトの設定作成。
  ※サイトの設定をしないと、テンプレートファイルを反映しようと思っても反映できない。
• テンプレートファイルのベースになるhtmlファイルを用意。
• 「挿入」→「テンプレート」→「テンプレートの作成」をクリック。テンプレートファイルの名称を決めて保存。
  Templetesフォルダの中にdwtを拡張子にしたテンプレートファイルができる。
  -「ファイル」→「新規」をクリック。テンプレートから新規のHTMLを作成。
• テンプレートを編集したら、テンプレートから作成したページを開いた状態で、「ツール」→「現在のページを更新」とすると編集したテンプレートが反映されます。
  -【オプション】できたHTMLからテンプレートに利用されているコメントタグを削除して書き出す。
  「修正」→「テンプレート」→「マークアップを省略して書き出し」

設定系

下記タグを入れると、DOCTYPE、html要素など外側を編集できないように設定されます。

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

※デフォルトはfalse。trueにしたからってタグの中とかはいじれてしまうので、適宜ページの更新をしないといけないかも。

パラメータの設定

テンプレートファイル（dwt）のhead内に、下記のようにパラメータを設定できます。

<!-- InstanceParam name="pagetitle" type="text" value="" -->
<!-- InstanceParam name="lang_tw" type="boolean" value="false" -->
<!-- InstanceParam name="img_path" type="URL" value="./img/" -->
<!-- InstanceParam name="disp_cnt" type="number" value="2" -->

typeの種類：text、boolean、URL、number

このテンプレートを元にしたhtmlファイルのvalueの中身は編集することが可能です。
編集したあとに修正→テンプレート→ページ更新をして編集した中身を反映しましょう。

テンプレートファイル内のtitle要素に変数、head内にパラメータの設定：
<title>@@(pagetitle)@@</title>
（@@(_document['pagetitle'])@@も可能）
<!-- InstanceParam name="pagetitle" type="text" value="" -->

htmlファイル内で下記のように設定：
<!-- InstanceParam name="pagetitle" type="text" value="ヘルプ - サンプル株式会社" -->

↓

htmlファイル内　ページ更新すると下記のように記述される：
<title>ヘルプ - サンプル株式会社</title>

領域の設定

「挿入」→「テンプレート」に追加する機能があります。

編集可能領域

nameに編集領域の名前を決める。
直書きもできるが、「編集」→「テンプレートのプロパティ」から値の編集が可能。

<!-- TemplateBeginEditable name="コンテンツ" -->
～この間がテンプレートから作られたページで自由に編集が可能になる～
<!-- TemplateEndEditable -->

★タグの中だけ編集可能にもできる
<h2><!-- TemplateBeginEditable name="中項目タイトル" -->中項目タイトル<!-- TemplateEndEditable --></h2>

オプション領域

if文的な使い方。
パラメータのboolean変数を利用した出しわけができます。
下記の例だとname=lang_jpのvalueがtrueの場合に「

日本語

」が表示されます。

<!-- TemplateParam name="lang_jp" type="boolean" value="false" -->

<!-- TemplateBeginIf cond="lang_jp" -->

<p>日本語</p>

<!-- TemplateEndIf -->

★少し難しいけど、条件分岐もできる
例：グローバルナビゲーションの画像の出しわけ

テンプレート：
<ul id="gnavi">
<li><a href="#"><img src="@@((gnavi01 == true) ? 'images/gnavi01_o.gif' : 'images/gnavi01.gif')@@" /></a></li>
<li><a href="#"><img src="@@((gnavi02 == true) ? 'images/gnavi02_o.gif' : 'images/gnavi02.gif')@@" /></a></li>
<li><a href="#"><img src="@@((gnavi03 == true) ? 'images/gnavi03_o.gif' : 'images/gnavi03.gif')@@" /></a></li>
</ul>

ページ：
<!-- TemplateParam name="gnavi01" type="boolean" value="false" -->
<!-- TemplateParam name="gnavi02" type="boolean" value="true" -->
<!-- TemplateParam name="gnavi03" type="boolean" value="false" -->

適用後のHTML：
<ul id="gnavi">
<li><a href="#"><img src="images/gnavi01.gif" /></a></li>
<li><a href="#"><img src="images/gnavi02_o.gif" /></a></li>
<li><a href="#"><img src="images/gnavi03.gif" /></a></li>
</ul>

リピート領域

下記のようにコメントを書くとリピート領域として認識される。
「デザインビュー」から増減、中のテキストの編集などが行える。

リピート領域の中で編集可能な領域の設定も同時にする。img要素については全体を囲わないといけないみたい。

<!-- TemplateBeginRepeat name="product_list" -->
<div class="cnt">
<h2 class="ttl"><!-- TemplateBeginEditable name="product_name" -->商品名商品名商品名商品名<!-- TemplateEndEditable --></h2>
<p class="img"><!-- TemplateBeginEditable name="product_img" --><img src="./img/test.jpg" alt="テスト画像" width="100" height="100" /><!-- TemplateEndEditable --></p>
<p class="txt"><!-- TemplateBeginEditable name="product_exp" -->商品説明商品説明商品説明商品説明商品説明商品説明商品説明<!-- TemplateEndEditable --></p>
</div><!-- ./cnt -->
<!-- TemplateEndRepeat -->

定義済み変数

テンプレートでは、パターンの出しわけや変数を使っての管理のため、7つの定義済み変数を利用できます。

• _document
  ドキュメント内のパラメーターごとに 1 つずつフィールドがあり、ドキュメントレベルのテンプレートデータを保持します
• _repeat
  リピート領域内に表示される式に対してのみ定義されます。領域に関する組み込み情報を指定します。
• _index
  現在のエントリの数字インデックス（0 から）。
• _numRows
  このリピート領域に含まれるエントリの合計数。
• _isFirst
  現在のエントリがリピート領域の最初のエントリの場合は true。
• _isLast
  現在のエントリがリピート領域の最後のエントリの場合は true。
• _prevRecord
• _repeat オブジェクト。領域の最初のエントリに対してこのプロパティを使用するとエラーになります。
• _nextRecord
• _repeat オブジェクト。領域の最後のエントリに対してこのプロパティを使用するとエラーになります。
• _parent
  ネストされたリピート領域で、外側のリピート領域の "_repeat" オブジェクトを指定します。ネストされたリピート領域以外にこのプロパティを使用するとエラーになります。

リピート領域内　2個おきにclassを振る

<div class="cnt@@(_index % 2 == 0 ? '' : ' even')@@">

感想

• 複雑な出しわけはできない。
• テンプレート機能はベース作ってそれをコーディングできない人がDWのデザインビューでリピートコンテンツをいじるために主に使われている雰囲気。
• この仕組みを理解して、きちんとテンプレートを作成しないと破たんする。
• リピート領域も便利だが、画像を変えたいときとかwidth、height属性が勝手に設定されてしまったり予期せぬコードを入れられる可能性があり、レスポンシブ対応で困る。
• 1ページに対して1テンプレートという形にすると結局共通部分全部を修正することになる。とあるバックナンバーのページでは、編集領域を狭めたかったのかもしれないが、コーディングスキルが上がってきた今は必要ないと思われる。
• 宣伝LPなどの超大量で全部同じレイアウトなら効果的だけど、４枚程度のページでは微妙。

参考文献

基本は下記ページたちを読み込めばおｋ。

• [Dreamweaver] オプション領域を極める！テンプレート上級編
• テンプレートを利用する方法 （Dreamweaver CS6）
• テンプレート機能を使ってみよう　パート1：「編集可能領域」と「オプション領域」の使い方 | デベロッパーセンター
• テンプレート機能を使ってみよう　パート2：コピペで利用できる、複雑なテンプレート式のサンプル| デベロッパーセンター
• [Dreamweaver] テンプレートタグを一括で削除する | バシャログ。
• DreamWeaverテンプレート機能のオプション領域などでグローバルナビゲーションを便利にする | 宇都宮ウエブ制作所
• Dreamweaverのテンプレートタグ記述メモ | indigonote
• リピートエントリ/編集メニュー/Dreamweaver/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top