WebTecNote

[Dreamweaver] テンプレートパラメータのサンプルと解説

以前TwitterでDreamweaverってどうよ？メモ帳でよくね？的なRTが回ったとき、
私が便利機能として挙げたのはサイト内全文検索と正規表現置換だったのだけど、もうひとつ、
140文字じゃ到底説明しきれないテンプレートパラメータについて熱く語ってみようと思う。

Dreamweaverのイメージといったらコードの自動補完の次にテンプレート機能っていう感じだから
ソフト使ったことがある人なら１００％に近い確率でdwtファイルを作成したり修正したりしたことがあるはずだ。
しかしテンプレートパラメータについては意外と知らない人の方が多い。
メニューを良く見ると「修正」の「ページプロパティ」の下にテンプレートプロパティっていうのがあったりするんだけども、
正規表現に似てプログラミングっぽいからとっつきにくいのかな。

TemplateParamコメントタグ

テンプレートプロパティはテンプレートパラメーターをテンプレートファイル内に挿入してから有効になる。
オプション領域を追加したときにテンプレートパラメーターは追加されるが、設定しない場合には都度手打ち入力しなければならない。
割と面倒なので次のソースのスニペット登録をオススメする。

<!-- TemplateParam name="param_name" type="type of value" value="the value of the parameter" -->

パラメーターはdwtファイル内ならどこでも配置出来るけどヘッダ内がデフォな感じ。

設定箇所

テンプレートプロパティを使う上で一番お手軽なのはオプション領域を設定すること。

  1. オプション領域にしたい範囲を選択
  2. メニューから「挿入」→「テンプレートオブジェクト」→「オプション領域」を選択
  3. 表示されたダイアログで名前などの設定をする
  4. OKを押すとテンプレートタグが追加されてオプション領域化する

パラメータを利用した表示

ある範囲をパラメーターで操作する場合はTemplateBeginIfというテンプレートタグを使用する。
メニューではオプション領域という名前です。

<!-- TemplateBeginIf cond="param_name" --><!-- TemplateEndIf -->

領域の表示を制御するのも便利だがパラメーターだけ使いたいということもある。

テンプレートタグの場合

<!-- #TemplateExpr expr="param_name" -->

@@で囲まれた文字列

@@(param_name)@@

上記のタグを使用するとパラメーターに設定された値だけが表示されます。

例：

<!-- TemplateParam name="hello" type="text" value="World!" -->
<strong>@@(hello)@@</strong>

テンプレート式

式を使えばもっと複雑なことも出来る。テンプレートへの挿入の仕方は値と同じ。
パラメータのキーを書いていた場所に式を書きます。

<!-- TemplateBeginIf cond="式" --><!-- TemplateEndIf -->
<!-- TemplateExpr expr="式" -->
@@(式)@@

式で使える演算子一覧

JavaScriptとほぼ同じ。

ブール値リテラルというのがオプション領域で使われるものです。
基本的にどんな演算子を使ってもtrueかfalseかを判別するものになる。

定義済みテンプレート変数

※以上公式サイトより引用

_documentについて

データはオブジェクト形式 Object {'param_name':'param_value'} になっており、
_document.param_name または _document[param_name]でパラメータにアクセスすることが出来る。
式の内部では値、それ以外はキーにアクセスします。

@@(_document.param_name)@@ → param_nameの値を表示

@@((param_name==false) ? _document.param_name:'hoge')@@ → param_nameの値かhogeを表示

MultipleIf

条件文をいくつか並べたくなったらMultipleIfを使おう。

構文：

<!-- TemplateBeginMultipleIf --> 
	<!-- TemplateBeginIfClause cond="式" -->式が真の場合に適用されるコンテンツ<!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

TemplateBeginIfClauseは条件式（TemplateBeginIf）を複数並べることが出来る。
上から順に式の内容をチェックしていき、trueである場合にだけタグ内のコンテンツが表示される。
defaultのないSwitch文、もしくはelseのないif文という感じです。

例：

<!-- TemplateParam name="pageid" type="text" value="" -->

<!-- TemplateBeginMultipleIf --> 
	<!-- TemplateBeginIfClause cond="pageid == 'home'" -->
		<div>HOMEです</div>
	<!-- TemplateEndIfClause --> 
	<!-- TemplateBeginIfClause cond="pageid == 'contact'" -->
		<div>CONTACTです</div>
	<!-- TemplateEndIfClause-->
	<!-- TemplateBeginIfClause cond="(pageid != 'home')&&(pageid!='contact')" -->
		<div>HOMEでもCONTACTでもない</div>
	<!-- TemplateEndIfClause-->
<!-- TemplateEndMultipleIf -->

テンプレート式使用例

真の場合だけ要素を表示（単項演算）：

<!-- TemplateParam name="cat" type="boolean" value="false" -->
<!-- TemplateBeginIf cond="!cat" -->
<div>ワン！</div>
<!-- TemplateEndIf -->

クラス切り替え（２項演算）:

<!-- TemplateParam name="count" type="number" value="2" -->
<div@@((count>1)? ' class="over"':' class="safe"')@@>

タイトルの自動挿入（文字列連結＋２項演算＋条件演算）：

<!-- TemplateParam name="pagetitle" type="text" value="" -->
<title>@@((pagetitle=='')?'': _document.pagetitle+'｜')@@SAMPLE CORPORATION</title>

※式内では+で文字列連結できる。数値相手に使うと計算式になる。

上記ソースを使う場合はタイトルについている編集可能領域タグを外す必要がある。

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

テーブルの背景色を交互に変える（リピート領域）：

<!-- TemplateParam name="oddColor" type="text" value="#ff0000" -->
<!-- TemplateParam name="evenColor" type="text" value="#0000ff" -->

<tr bgcolor="@@((_index & 1) ? oddColor : evenColor )@@">

パンくずリンク（リピート領域＋MultipleIf）：

<!-- TemplateParam name="pageid" type="text" value="" -->
<!-- TemplateParam name="pagetitle" type="text" value="" -->

<!-- TemplateBeginIf cond="pageid!='home'" -->
<p class="breadcrumb"><a href="index.html">HOME</a>
<!-- TemplateBeginRepeat name="breadcrumb" --> &gt; 
	<!-- TemplateBeginMultipleIf --> 
		<!-- TemplateBeginIfClause cond="!_isLast" --><a href="@@(pageid)@@/index.html"><!-- TemplateBeginEditable name="page" -->parentName<!-- TemplateEndEditable --></a><!-- TemplateEndIfClause -->
		<!-- TemplateBeginIfClause cond="_isLast" --><span class="current">@@(pagetitle)@@</span><!-- TemplateEndIfClause -->
	<!-- TemplateEndMultipleIf -->
<!-- TemplateEndRepeat -->
</p>
<!-- TemplateEndIf -->

テンプレートタグを使った場所は空白になるので、気になる時は改行なしで全部つなげてしまおう！

正規表現もだけどテンプレートパラメータもJavaScriptがベースになっているそうなので、
使える演算子とか+で文字列を繋げられるところとかはまんまJavaScriptです。

JavaScriptの関数を使用する

試しにmatch使ってみたら正規表現のマッチングが出来た…！
関数全てはチェックしてないですが、matchとreplaceは覚えておくと便利だと思う。

match例：

<!-- TemplateBeginIf cond="pageid.match(/contact/)" -->テンプレートパラメータpageidにcontactという文字列があれば表示<!-- TemplateEndIf -->

replace例：パラメータpagetitleの文字列からひらがなを取り除く

@@(pagetitle.replace(/[あ-ん]/g,''))@@
モバイルバージョンを終了