よく使うDreamweaverのTemplatesコードをレビューする
Posted by 867 on
ウチ「ドリって、Adobeじゃなかったんだよ」
新人「！！！！っまじっすか」
って時代になりましたね ┐(´д｀)┌。私が最初に使ったバージョンは、後ろに「J」付いてました（日本の「J」かなー）。Macromedia Dreamweaver 2J。それからずーっと、ドリにはお世話になっていて、なんだかんだずっと使ってます。CCになってから極端に動作が緩慢になったので、何とかしてほしいですが。
私がドリを好きな理由のひとつにTemplates（テンプレート）機能があるのですが、ドリ活用派は希少なのか新メンバーが来るたびに「勉強会」を開かないと共有できないのがなんだかな、と思いブログで公開することにしました。
なんで使うの
コーディングの編集機能だけだと、SublimeText を筆頭に魅力的なエディタは他にもあります。
ではなぜ未だに Dreamweaver を使うのか、編集機能以外の理由としては次があります。
- テンプレート機能によりコードの一括管理ができる
- 共同作業におけるトラブル（作業競合や先祖返り）を防止できる
- Subversion によるバージョン管理もできる（Git 連携もできる）
グランフェアズの場合は、遠隔地を含めた複数人で、ある程度の規模感のものを一気に仕上げることが多いので、テンプレートによるマスターコードが1つで制御できることはかなり重要です。それと、「作って終わり」ではないのが私たちのポリシー。担当者が変わっても、運用が長期になっても破綻しない、恒久的な運用に欠かせない存在かもしれません。
共同作業上、運用上のメリットが使う理由の大半を占めますが、今回はテンプレートに的を絞って具体的なコードをレビューしていきます。
基本的な制御構文
具体例の前に、基本的なテンプレートコードの制御構文の説明をさらっと。
すごくシンプルなのですぐ覚えられるし、基本はJavascript 構文なのでJSライクに書けば複雑な条件分岐もちゃんと動きます。ホームメンバーはしっかりと習得しましょう。
編集可能領域と不可能領域
Dreamweaverのテンプレート機能ってこれのことじゃないの？という人多数の一番基本のシンタックス。
<!-- TemplateBeginEditable name="任意の名前" -->ここが編集可能になる<!-- TemplateEndEditable -->
単純に編集できるところとできないところを設定します。
条件分岐
これを使わないと、Dreamweaverのテンプレートを知ってるとは言えません。いろんなシンタックスが用意されていますが、基本は次のコードでまかなえます。次のシンタックスでは、条件式が真の場合●●が挿入（実行）されます。
<!-- TemplateBeginIf cond="条件式" -->●●<!-- TemplateEndIf -->
これを次のように短縮形で指定することも出来ます。
@@(条件式 ? '真の場合の処理' : '偽の場合の処理')@@
特殊な記法@@()@@
短縮形で分かりやすく記述したい時や、設定したパラメータの値を代入する際に頻出するシンタックスです。
@@(式)@@
これで、式の結果（値）が挿入（実行）されます。
その他演算子とか
演算子は基本JavaScript構文と同じものが使えます。最も良く目にするのは、左右の式が等しい==、等しくない!=、且つ&&、または||です。これを覚えておけばほとんど書けます。
では、やっと具体例を…
頻出するテンプレートコードの解説
条件分岐によるナビゲーションやレイアウトの制御
テンプレートの条件分岐を使うことで、動的に処理しがちなナビゲーションの制御やページ全体のカラム構造（レイアウトの制御）を静的に管理することができます。手順は次。
2. 1で設置したパラメータの値を使って条件分岐処理を入れる。【dwtファイル】
3. テンプレートから新規作成した各ページにパラメータの値を設定する。【htmlファイル】
1. テンプレートパラメータの設置【dwt】
まずはdwtファイルの <head> 内に次のようなテンプレートパラメータを設置します。
パラメータの名前（name）は好きに決めればOKですが、弊社ではいつも各ページのグローバルID、セカンドID、必要があれば第三階層用のサードIDが指定できるパラメータを用意します。（各IDの値はディレクトリ名と同じものを入れると分かりやすい）
これで、このテンプレートから書き出した html に対し、グローバルID、セカンドIDが指定できるようになりました。
さらに4行目では、コンテンツボディのレイアウトが、1カラムか2カラムかを真偽（true / false）で指定できるようにしています。
2-1. 条件分岐 例1：ナビゲーションにカレント処理を入れる【dwt】
上で設定したパラメータを使って条件分岐することにより、グローバルナビのカレント処理を静的に制御する例が次です。
例えば3行目では、「グローバルIDが”works”の場合、<a>にclass="is-active"を付け、そうでない場合は何も付けない」という条件を指定しています。
2-2. 条件分岐 例2：レイアウトを制御する【dwt】
次のコードでは、”col2”の値が「真」の場合2カラムレイアウトに、「偽」の場合1カラムレイアウトになるよう分岐しています。
- 2行目：条件が
!col2なので「偽」の時、3行目～5行目が実行される（1カラム） - 7行目：条件が
col2なので「真」の時、8行目～29行目が実行される（2カラム） - 13行目以降は、グローバルID別のローカルナビのコードを入れたサンプルです
3. 各htmlにパラメータの値を設定する【html】
一通りテンプレートのコーディングが出来たら、サイトに必要な数のhtmlを「テンプレートから新規作成」し、各htmlの<head>内にあるテンプレートパラメータの値valueにグローバルID、セカンドIDやレイアウトの真偽を設定します。
上記サンプルのように指定したページは、グローバル「企業情報」内の「トップメッセージ」であり、ローカルナビのある2カラムレイアウトとなります。この値を設定した時点で、グローバル・ローカルナビのカレント処理とレイアウトがhtmlに反映され、結果次のようになります。（「●●～●●」の部分のみが編集可能領域で、他は編集不可能。）
テンプレートパラメータの値は「テンプレートプロパティ」と呼ばれ、コードに直接書く方法の他 Dramweaverのメニューバー【修正＞テンプレートプロパティ】から設定することができます。
<body>にグローバルIDとセカンドIDにちなんだclassを付ける
最近ではあまり<body>に付与したclassでスタイルを制御しませんが、システムが絡む場合やいざという時にスタイルが上書きができるよう、保険的に<body>にclassを付けています。例えば、グローバルIDのみを使って、<body class="t-@@(global)@@">とすると簡単ですが、スタイルの制御が大雑把になるので効果的ではありません。そんな場合は次のコードを使います。
例えば、グローバルIDがcompany、セカンドIDがmessageの場合、htmlには次のコードが出力されます。
<body class="t-company-message">
場合によってはセカンドIDがない場合もあるので、その場合はグローバルIDのみが付与されます。
<body class="t-company">
<html>の外にコードが必要な場合
これ何ですか？と一番聞かれるコードです。
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
PHPなどのサーバサイド言語の中には<html>の前や</html>の後に挿入するものがあります。サイト全体であればdwt自体に記述しますが、ファイル単体でこれを入れたい場合、テンプレートを更新すると記述が消えます。この問題を避けるため、dwtの<head>セクションにこのコードを挿入します。システム案件ではほぼ入ってますが、そうでない場合は入りません。
まとめ
ツール習得のススメ
私たちにとって、ドリみたいなツールは楽しいおもちゃであり強力な武器。押したことのないボタンやメニューがあるなんてもったいない。一度調べだすと、そこには魅惑の世界が広がってます。ドリは古い。でも奥が深い。ドリに限らず、与えられたツールに興味を持ち、積極的に刀を磨く姿勢が大事だと思います。
テンプレートのススメ
上で挙げたコードの例は、知っていれば使える単なるTips。テンプレートを組むことの一番のメリットは便利になることではなく、組むに当たって事前に決めておかなければいけないこと、考慮しなくてはいけないことの多さに気が付くことだと思います。
たとえば、それがシステムに組み込まれるのであれば、システムの仕様に合わせた構造になっていなければ手戻りが発生する。テンプレートに着手するまえに、組み込まれるシステム（ASPやパッケージ）の仕様を把握しなければいけないことが分かります。
またテンプレートで制御しすぎると、運用に支障が出たりテンプレートを毎回更新しなければ対応できかったりと逆効果になることもしばしば。誰がどのように運用するのか、自由度はどの程度が最適か。プロジェクトの特性に応じた柔軟な設計が求められます。
行き当たりばったりで単にコードを書くのではなく、成果物を体系的に設計するという視点を持ついい練習になります。