雇われWebデザイナー、SWDのサイトです。なにも目指してません。すみません。

2008

04/29

[超いまさら]Dreamweaverテンプレートって便利だね この記事をはてなブックマークに登録 この記事をクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
CATEGORY:, TAG:,
MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。

フリーになってからというもの、個人で請け負える範囲でのお仕事をと考えると、どうしても小・中規模サイトの案件が多くなりがち。

それにくわえて、ここ最近の案件でPHPを好きに置いちゃいけないとか、クライアント側で更新したいとか、いろいろと制約のある案件が重なり、そんななかで効率的な制作進行をするためにはどうしたもんかと
思案し「Dreamweaverテンプレート」(以下DWT)を選択したのですが、これがなかなか使える機能だったりしましたので今さらながらに紹介しておこうと思います。

すでにDWTを使用したことがある方には、ホントいまさらなTIPSになるのですが、使ったことのない人のためにざっくり説明しますと、DWTってのは、コンテンツ本文部分だけ編集可能にして、
ナビゲーションやサイトの共通のインターフェイス部分をテンプレートとしてたくさんのページを管理しようねっていうDreamweaverの機能のひとつなのです。

ですので、DWTを導入しておけば
たとえナビゲーションが制作途中で変更になるとか
あり得ない要求が来たとしてもテンプレート自体をちょちょっと修正してやればすべてのページにその修正内容を反映させてしまえるわけです。

あ、そうだ。
そもそもソースの中にテンプレート文がいろいろ入ってしまうのが嫌だという理由で導入を見送っている方も多いかもしれませんが、
リリース時に、Dreamweaverのメニューから
[修正]→[テンプレート]→[マークアップを省略して書き出し]
を選択することで テンプレート文を取り除いたリリース用のファイルを書きだすことも可能ですので、テンプレートの機能を使ったことのない方は
だまされたと思って一度試してみてください。「やっぱだまされた」とかの声には答えられませんが。w 


さて、そんなDWTの主な機能(タグ)は以下の通り。

・編集可能領域
ここは編集できません。
<!-- TemplateBeginEditable name="編集可能領域その1" -->
ここは編集可能です。
<!-- TemplateEndEditable -->
ここは編集できません。
・リピート領域
<!-- TemplateBeginRepeat name="リピート領域その1" -->
<div class="sample">この内容が繰り返されます。</div>
<!-- TemplateEndRepeat -->
・オプション領域
<!-- TemplateBeginIf cond="_document['表示・非表示領域その1']" -->
チェックが入っていたら、ここのテキストが表示されます。
<!-- TemplateEndIf -->
HTMLのコメントアウトタグの中に
Dreamweaver独自のテンプレート文が入るのが基本です。
例外としてコメントアウトタグの代わりに
@@~@@でつなげることもできますが、これは最後に紹介したいと思います。

上記は例として実際のテンプレート文のサンプルソースを記載していますが、Dreamweaver上のメニューからテンプレートオブジェクトの中の編集可能領域等を選択することで自動でこのテンプレート文が挿入されますので、テンプレート文を手打ちできるようになる必要は特にないかと思いますのでご安心を。

編集可能領域は、その名の通り編集が可能なエリアです。
そのコメントアウトタグで挟まれた中だけが編集でき、それ以外の個所はDreamweaver上では一切編集できなくなります。
次にリピート領域ですが、これも文字どおり、コメントアウトタグで挟まれた中身を繰り返させるためのものです。
テンプレートを適用したページでこのリピート領域を見ると下図のようになります。[+]を押せば要素が増えますし、[-]で削除[▼][▲]で要素の並び変えが可能です。 

リピート領域

これを使用するシーンは、ニュースとかトピックスみたいな決まったパターンの領域が連続する場合に適していると思います。

最後にオプション領域ですが、これは少し特殊で、単純に表示・非表示を制御するだけではなく特定の条件によってソースを差し替えたりすることも可能です。これはテンプレート式と呼ばれるもので、ヘルプを見ると下記のような解説になっていますのでそのまま抜粋してみました。

テンプレート式の言語は JavaScript の少数のサブセットであり、JavaScript のシンタックスと優先ルールが使用されています。 たとえば以下のように JavaScript の演算子を使用して、式を記述します。

@@(firstName+lastName)@@

サポートされている機能および演算子は以下のとおりです。

・数字リテラル、ストリングリテラル (二重引用符のシンタックスのみ)、ブールリテラル (true または false)
・変数リファレンス (この項の後半に示された定義済みの変数のリストを参照)
・フィールドリファレンス ("dot" 演算子)
・単項演算子 : +, -, ~, !
・バイナリ演算子 : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
・条件演算子 : ?:
・カッコ : ()


ちょっとややこしげな書き方ですが、要するにこういう使い方をします。

先ほども書きましたとおり、テンプレート文の基本はコメントアウトタグとして記述しますが、これだとたとえば、タグの中の属性だけを条件指定で変更させたいとか細かな指定がしたくてもタグの中にタグは書けないので、たとえ書いたとしてもDreamweaver上では残念な結果になってしまいますよね。
そんなときに使用するのがこの「テンプレート式」というわけ。

例として、コメントアウトタグで書いたものと、テンプレート式で書いたものを並べておきます。 

▼コメントアウトでのテンプレートだと崩れますね

<div <!-- TemplateBeginIfClause cond="テンプレート式サンプル == 1" -->class="act"<!-- TemplateEndIfClause -->>その1</div>
<div <!-- TemplateBeginIfClause cond="テンプレート式サンプル == 2" -->class="act"<!-- TemplateEndIfClause -->>その2</div>

▼@@のテンプレート式で条件分岐してやると無問題
<div@@((テンプレート式サンプル == 1)? ' class="act"':'')@@>その1</div>
<div@@((テンプレート式サンプル == 2)? ' class="act"':'')@@>その2</div>

と、こんな感じで並べると理解しやすいかな。

まぁ、まったくDWTを使ったことのない方にとっては、これだけじゃあ説明不足でなんのこっちゃな世界だと思いますし、使ったことある人にとってはいまさらな、ほんと中途半端な記事ですね。すみません。

べ、別に食べ物ネタが続いたので無理やりWebネタ用意したわけじゃないんだからねっ!

トラックバック(0)
トラックバックURL: http://www.heion.net/mt/mt-tb.cgi/200
コメント(0)
[PR]
_FEED
このRSSを取得する
_CATEGORY
_TAG
                                       
_ARCHIVE
2010年5月 (5)
2010年4月 (2)
2009年10月 (3)
2009年8月 (1)
2009年7月 (2)
2009年6月 (6)
2009年5月 (1)
2009年4月 (2)
2009年3月 (2)
2009年2月 (1)
2009年1月 (3)
2008年12月 (5)
_BLOG PARTS


あわせて読みたいブログパーツフィードメーター - 日々平穏スカウター : 日々平穏
OpenID対応しています OpenIDについて

このブログはクリエイティブ・コモンズでライセンスされています。