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

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

Dreamweaverテンプレート

By Akira Maruyama2007.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つ

‣ ひな形としての機能

適　用

テンプレート（DWT）

ノーマルHTML

<HTML>

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

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

編集不可能領域

★ 不要な部分をロックして編集不可能にする

➡ 編集可能領域

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

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

修正

テンプレート

修正

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


概要

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


概要

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

➡ オプション領域

➡ リピート領域

➡ 編集可能タグ属性


テンプレートタグを理解する

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

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

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

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

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

‣ テンプレート編集可能な部分

‣ タグ

編集可能領域

編集可能領域とは？

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





開始タグ

終了タグ

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

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

<HTML> ロックされた領域

基本的にはテンプレートを作成しただけでは編集できないのでタグで指定する

編集可能な領域

‣ ヘッダに編集可能領域を追加

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

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

編集可能領域

コードビューで使えるTIPS

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

<body>

</body>

‣ 編集可能領域をロック

親テンプレート（dwt）

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

<body>

</body>

<body>

</body>

テンプレートの入れ子とは？

編集可能領域

‣ 編集可能領域をロック

@@(" ")@@

編集可能領域のロック

デザインビュー

コードビュー

<body>@@(" ")@@</body>

子ページに反映

<body>

</body>

非表示になる

消える

編集可能領域

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

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

各パラメーター

オプション領域

オプション領域とは？

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

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

領域が挿入される


オプション領域とは？

‣ オプション領域タグ

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

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


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

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

パラメーター名初期値

タイプ別入力領域

5つのタイプtype="boolean"

type="number"

type="text"

type="URL"

type="color"

注意： type="url" ではダメ！





ヘッダに記述する必要がある

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

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

‣ TemplateBeginIf



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



開始タグ

終了タグ

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

●パラメータ名の時

　TemplateParamのtypeはboolean

●条件式の時

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

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

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



　

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

　

　

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

　



…

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





●振り分け条件式



内容



A && B → A かつ B　　A II B → A または B　　!（A）→ Aでない　etc


条件式を理解する

‣ オプション領域の理解＝条件式の克服

‣ 例題：レイアウトを切り替える

●パラメーター（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)@@


リピート領域

テンプレート式を使った制御

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

偶数、奇数を取得が必要。_index&1を利用→偶数の時：1、奇数の時：0を返す条件式：（(_index&1) ? 偶数の時の値 : 奇数の時の値)


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


‣ 例題： 1つおきに表示非表示


_indexをnで割り切れる時がtrue_index%nを利用→_indexをnで割ったときの余りを返す条件式：（(_index%n==0) ? 割り切れる時 : 余りがある時)


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


‣ 例題： nおきに表示非表示

リピート領域の入れ子の時に利用_parent._indexを利用





@@((_parent._index+1))@@



親リピート

親エントリ1

親エントリ2

子リピート子エントリ1子エントリ1

子リピート子エントリ1子エントリ1

‣ 例題：親リピート領域のエントリ番号を取得

おまけ

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

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

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

ありがとうございました

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

Design

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