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の場合に「<p>日本語</p>」が表示されます。

```
<!-- 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] オプション領域を極める！テンプレート上級編](http://hidef.jp/post-279/)
* [テンプレートを利用する方法 （Dreamweaver CS6）](https://helpx.adobe.com/jp/dreamweaver/kb/cpsid_91525.html)
* [テンプレート機能を使ってみよう　パート1：「編集可能領域」と「オプション領域」の使い方 | デベロッパーセンター](http://www.adobe.com/jp/devnet/dreamweaver/articles/using_template_part1.html)
* [テンプレート機能を使ってみよう　パート2：コピペで利用できる、複雑なテンプレート式のサンプル| デベロッパーセンター](http://www.adobe.com/jp/devnet/dreamweaver/articles/using_template_part2.html)
* [[Dreamweaver] テンプレートタグを一括で削除する | バシャログ。](http://bashalog.c-brains.jp/11/10/26-150053.php)
* [DreamWeaverテンプレート機能のオプション領域などでグローバルナビゲーションを便利にする | 宇都宮ウエブ制作所](http://utweb.jp/blog/archives/585)
* [Dreamweaverのテンプレートタグ記述メモ | indigonote](http://indigonote.com/2010/10/17/dreamweaver-templete-tag/)
* [リピートエントリ/編集メニュー/Dreamweaver/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top](http://www.iltt.info/page/dreamweaver/reference/02_edit/21.htm)