コードビュー中心で開発するDreamweaverテンプレート

コードビュー中心で開発する

Dreamweaverテンプレート

By Akira Maruyama
2007.3.23(Fri)
in Apple Store Shinsaibashi

簡単にプロフィールを…

‣ 岡山県出身、鳥取県在住。

‣ Web業界10年ほど、現在次に向けて充電中。

‣ 主にDreamweaver、Fireworksを利用。

‣ mixiやってます。
http://mixi.jp/show_friend.pl?id=7200

‣ FireworksやDreamweaverの機能拡張・カスタマイズを
サイトで公開しています。
http://homepage.mac.com/akira_maru/fireworks/

簡単にプロフィールを…

‣ CSS Nite LP, Disk 2に講師として参加しました。

（2006.12）
‣ 共著でDreamweaverプロフェッショナ

ル・スタイルの執筆に参加しました。

（2006.12）

全体の流れ
‣ Dreamweaver テンプレートとは？
・概要・テンプレートタグを理解しよう

‣ 編集可能領域
・編集可能領域とは？・コードビューで使えるTIPS

‣ オプション領域
・オプション領域とは？
・パラメータ設定用タグと条件振り分け用タグ
・条件式を理解する・テンプレート式の基本

‣ リピート領域
・リピート領域とは？・リピート変数とリピートオブジェクト
・テンプレート式を使った制御

Dreamweaverテンプレートとは？
概要
テンプレート＝Dreamweaverの神髄となる機能の1つ

‣ ひな形としての機能

適用
共通部分のデザインが完成された
<HTML> ページが出来上がる

テンプレート（DWT）テンプレートを適用したHTML

編集不可能領域
<HTML>

★ 不要な部分をロックして編集不可能にする
ノーマルHTML

➡ 編集可能領域

概要
‣ 同じデザインのページを“素早く”作成
新規ページ作成時にテンプレートから
ページを新規作成できます。

‣ テンプレートへの修正内容を
適用したページすべてに反映

テンプレート

適用したすべてのページ・
修正
テンプレートに反映される

修正

概要
‣ 単なる「ひな形」として以外の強力な機能
Dreamweaver MX以降の機能

➡ オプション領域

➡ リピート領域

➡ 編集可能タグ属性

‣ これらの機能はContributeで利用可能
独自機能と合わせてクライアント側で簡易CMSが構築できる

テンプレートタグを理解する
‣ DWテンプレートは「タグ」を挿入するだけ

Dreamweaverテンプレート（dwt）
＝（X） HTML + テンプレートタグ

タグで理解することでより細かい制御が可能になる
＝マークアップと同じ

個人的にはメニューから作成するよりも楽だったりする？
（コードスニペットなどの活用でさらに効率化）

条件式をマスターすることがテンプレート活用のキモ
（テンプレート式をマスターしよう）

編集可能領域
編集可能領域とは？
‣ テンプレート編集可能な部分
基本的にはテンプレートを作成したテンプレートを適用したHTML

だけでは編集できないのでタグで指
<HTML> ロックされた領域
定する編集可能な領域

‣ タグ

 開始タグ

数字または記号以外ではじまる任意の文字。日本語可能。

 終了タグ

予め編集可能領域に内容を入れておくと新規にテンプレートが適用された際に反映される。

編集可能領域
コードビューで使えるTIPS

‣ ヘッダに編集可能領域を追加
メニューからはヘッダーの中には「doctitle」「head」以外の編集
可能領域が作れない。

コードビューでは
任意の場所に可能

編集可能領域

‣ 編集可能領域をロック
テンプレートの入れ子の際に定義された編集可能領域は基本的に次
の子テンプレートや子ページに継承される。
テンプレートの入れ子とは？

親テンプレート（dwt）

子テンプレート（dwt）孫ページ（html）

<body> <body> <body>
  

  
</body> </body> </body>

編集可能領域

‣ 編集可能領域をロック
編集可能領域のロック


@@(" ")@@


デザインビュー

子ページに反映消える

コードビュー
<body> <body>

@@(" ")@@

非表示になる
</body> </body>

オプション領域
オプション領域とは？
ページの編集時に編集ユーザの制御により、指定したエリアの表示非表
示、複数箇所に同時に入力したテキストを挿入などを可能にします。

[修正]メニュー → [テンプレートプロパティ]

各パラメーター

オプション領域とは？

一例）編集可能領域の表示非表示の制御

チェックすると「真」になる

領域が挿入される

パラメータ設定用タグと条件振り分け用タグ

‣ オプション領域タグ

パラメータ設定用タグと条件振り分け用タグがある

● パラメーター設定用タグ：TemplateParam

● 条件振り分け用タグ（括弧は終了タグ）：
TemplateBeginIf（TemplateEndIf）
TemplateBeginMultipleIf（TemplateEndMultipleIf）
TemplateBeginIfClause（TemplateEndIfClause）

‣ TemplateParam → パラメーター設定用タグ


ヘッダに記述する必要がある 5つのタイプ
type="boolean"

type="number"

type="text"

パラメーター名初期値
type="URL" 注意： type="url" ではダメ！

タイプ別入力領域 type="color"

テンプレートを適用されたページでテンプレート
プロパティーでの設定をコントロールする。

‣ TemplateBeginIf

 開始タグ

条件がtrueのときにここに記述した内容を表示
 終了タグ

cond属性で返される値はtrueまたはfalseのみ

●パラメータ名の時

TemplateParamのtypeはboolean

●条件式の時

パラメータ == 1、! パラメータa）（パラメータb== "aaa"）など
（ &&

‣ TemplateBeginMultipleIf、TemplateBeginIfClause
→ 複数条件振り分け用タグ



条件式1がtrueの場合に表示して終了。falseの場合は条件式2に。


条件式2がtrueの場合に表示。



※条件式1がtrueの場合、条件式2以降が trueでも表示は条件式1の内容のみです。

条件式を理解する

‣ オプション領域の理解＝条件式の克服
A && B → A かつ B A II B → A または B A）→ Aでない etc
（
!

‣ 例題：複数の条件を同時に満たしたときだけ表示
●パラメーター（いずれもtype=boolean）





●振り分け条件式



内容

条件式を理解する
‣ 例題：レイアウトを切り替える
●パラメーター（type=number）


●振り分け条件式


レイアウト1

レイアウト2

テンプレート式の基本
‣ テンプレート式とは？
@@(パラメータ名または条件式)@@

●JavaScriptのシンタックスに準じている

●タグを含ませることができない

‣ 例題：複数箇所のテキストの一括更新 @@(パラメータ名)@@
●パラメーター（type=text）

●挿入タグタイトル：<title>@@(title)@@ I CSSNite</title>
見出し： <h1>@@(title)@@</h1>
ナビゲーション：<p><a href="../index.html">トップ</a> 
<span>>></span> @@(title)@@</p>

テンプレート式の基本
‣ @@(条件式)@@
❖ 例題：バナーの差し換え

●パラメーター（type=boolean、type=URL）



●挿入タグ
<p class="img"><img src="@@((特価品) ? imgurl1 : imgurl2 )@@" alt=""
width="600" height="147"></p>

@@((条件式) ? trueの値 : falseの値 )@@

返す値は変数でない場合は " "内に記述する

リピート領域
リピート領域とは？

●ブロックや表組みの行など、ある一定のレイアウトの反復を指定するために利用
●基本的に編集可能領域と組み合わせて利用する
●入れ子での利用も可能

コントローラー選択エントリーの下に
選択エントリーを削除
エントリーを追加
各エントリー

選択エントリーの順序選択エントリーの順序
を下のエントリーと入を上のエントリーと入
れ替えれ替え

リピート領域
リピート領域とは？
‣ TemplateBeginRepeat


反復する内容


‣ InstanceBeginRepeatEntry
リピートエントリーを作成するとエントリー毎に自動で生成される

リピート領域
リピート変数とリピートオブジェクト
テンプレート式で利用可能。

_index 0から始まる現在のエントリ数を返す。値は半角数字

_numRows このリピート領域に含まれるエントリの合計数を返す。値は半角数字

_isFirst そのエントリがリピート領域の最初のエントリかどうかを判別。値はtrue/false

_isLast そのエントリがリピート領域の最後のエントリかどうかを判別。値はtrue/false

_prevRecord 前のエントリのリピートオブジェクト。例)_prevRecord._index
領域の最初のエントリに対してこのプロパティを使用するとエラーになる
_nextRecord 次のエントリのリピートオブジェクト。例)_nextRecord._numRows
領域の最後のエントリに対してこのプロパティを使用するとエラーになる
_parent 入れ子されたリピート領域で外側のリピート領域のリピートオブジェクトを指定する。
ネストされたリピート領域以外でこのプロパティを使用するとエラーになる。

リピート領域
テンプレート式を使った制御

‣ 例題：現在x番目の番号を表示する
リピート変数 _index を利用
エントリー数＝_index+1

@@(_index+1)@@

一歩進んだリピート領域の使い方

‣ 例題： 1つおきに表示非表示
偶数、奇数を取得が必要。
_index&1を利用→偶数の時：1、奇数の時：0を返す
条件式：（(_index&1) ? 偶数の時の値 : 奇数の時の値)

@@((_index&1) ? 偶数の時の値 : 奇数の時の値)@@


‣ 例題： nおきに表示非表示
_indexをnで割り切れる時がtrue
_index%nを利用→_indexをnで割ったときの余りを返す
条件式：（(_index%n==0) ? 割り切れる時 : 余りがある時)

@@((_index%n==0) ? 割り切れる時 : 余りがある時)@@

‣ 例題：親リピート領域のエントリ番号を取得
親リピート
リピート領域の入れ子の時に利用
親エントリ1 子リピート
_parent._indexを利用
子エントリ1
子エントリ1

親エントリ2 子リピート

子エントリ1

子エントリ1
@@((_parent._index+1))@@

おまけ

‣ もっと知りたい人は
●Dreamweaverヘルプ
ページのレイアウト > テンプレートの管理 > Dreamweaverのテンプレートについて > テンプレート式
ページのレイアウト > テンプレートの管理 > Dreamweaverのテンプレートについて > テンプレート式 > テンプレートの言語
ページのレイアウト > テンプレートの管理 > Dreamweaverのテンプレートについて > テンプレート式 >テンプレートコードの複数の If 条件

●Dreamweaver テクニカルノート一覧
Dreamweaver MX の新しいテンプレート機能
http://www.adobe.com/jp/support/dreamweaver/ts/documents/dw0385.html
Dreamweaver MX テンプレートのカスタムパラメータと式
継承された編集可能領域を編集不可能にする

●Dreamweaver デベロッパーセンター
DreamweaverMXテンプレート機能を活用したContributeテンプレートファイルの作成
http://www.adobe.com/jp/devnet/dreamweaver/articles/contribute_page1.html
Consistent Web Design with Dreamweaver Templates（英文）
http://www.adobe.com/devnet/dreamweaver/articles/dw_templates.html

ありがとうございました

コードビュー中心で開発するDreamweaverテンプレート

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to コードビュー中心で開発するDreamweaverテンプレート

Similar to コードビュー中心で開発するDreamweaverテンプレート (20)

More from Akira Maruyama

More from Akira Maruyama (11)