Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
コードビュー中心で開発するDreamweaverテンプレート      By Akira Maruyama        2007.3.23(Fri) in Apple Store Shinsaibashi
簡単にプロフィールを…‣   岡山県出身、 鳥取県在住。‣   Web業界10年ほど、現在次に向けて充電中。‣   主にDreamweaver、Fireworksを利用。‣   mixiやってます。    http://mixi.jp/show...
簡単にプロフィールを…‣   CSS Nite LP, Disk 2に講師として参加しました。    (2006.12)‣               共著でDreamweaverプロフェッショナ                ル・スタイルの執...
全体の流れ‣   Dreamweaver テンプレートとは?    ・概要 ・テンプレートタグを理解しよう‣   編集可能領域    ・編集可能領域とは? ・コードビューで使えるTIPS‣   オプション領域    ・オプション領域とは?   ...
Dreamweaverテンプレートとは?概要テンプレート=Dreamweaverの神髄となる機能の1つ‣   ひな形としての機能                       適 用                                ...
Dreamweaverテンプレートとは?概要‣   同じデザインのページを“素早く”作成    新規ページ作成時にテンプレートから    ページを新規作成できます。‣   テンプレートへの修正内容を    適用したページすべてに反映      ...
Dreamweaverテンプレートとは?概要‣   単なる「 ひな形」として以外の強力な機能    Dreamweaver MX以降の機能     ➡ オプション領域     ➡ リピート領域     ➡ 編集可能タグ属性‣   これらの機能は...
Dreamweaverテンプレートとは?テンプレートタグを理解する‣   DWテンプレートは「タグ」を挿入するだけ    Dreamweaverテンプレート(dwt)    =(X) HTML + テンプレートタグ    タグで理解することでよ...
編集可能領域編集可能領域とは?‣   テンプレート編集可能な部分    基本的にはテンプレートを作成した                                  テンプレートを適用したHTML    だけでは編集できないのでタグで指 ...
編集可能領域コードビューで使えるTIPS‣   ヘッダに編集可能領域を追加    メニューからはヘッダーの中には「doctitle」「head」以外の編集    可能領域が作れない。        コードビューでは        任意の場所に可能
編集可能領域コードビューで使えるTIPS ‣     編集可能領域をロック      テンプレートの入れ子の際に定義された編集可能領域は基本的に次      の子テンプレートや子ページに継承される。         テンプレートの入れ子とは? ...
編集可能領域コードビューで使えるTIPS‣   編集可能領域をロック    編集可能領域のロック    <!-- InstanceBeginEditable name="編集可能領域名" -->    @@(" ")@@    <!-- Ins...
オプション領域オプション領域とは?ページの編集時に編集ユーザの制御により、指定したエリアの表示非表示、複数箇所に同時に入力したテキストを挿入などを可能にします。  [修正]メニュー → [テンプレートプロパティ]                ...
オプション領域オプション領域とは?一例)編集可能領域の表示非表示の制御                     チェックすると「真」になる                                     領域が挿入される
オプション領域パラメータ設定用タグと条件振り分け用タグ‣   オプション領域タグ    パラメータ設定用タグと条件振り分け用タグがある    ● パラメーター設定用タグ :TemplateParam    ● 条件振り分け用タグ(括弧は終了タグ...
オプション領域パラメータ設定用タグと条件振り分け用タグ‣ TemplateParam → パラメーター設定用タグ  <!-- TemplateParam name="パラメータ名" type="タイプ" value="初期値" --> ヘッダに...
オプション領域パラメータ設定用タグと条件振り分け用タグ‣   TemplateBeginIf     <!-- TemplateBeginIf cond="パラメータ名または条件式" -->   開始タグ     条件がtrueのときにここに記...
オプション領域パラメータ設定用タグと条件振り分け用タグ‣   TemplateBeginMultipleIf、TemplateBeginIfClause    → 複数条件振り分け用タグ     <!-- TemplateBeginMultip...
オプション領域条件式を理解する‣   オプション領域の理解=条件式の克服    A && B → A かつ B  A II B → A または B    A)→ Aでない etc                                 ...
オプション領域条件式を理解する‣   例題:レイアウトを切り替える    ●パラメーター(type=number)    <!-- TemplateParam name="レイアウト" type="number" value="1" -->  ...
オプション領域テンプレート式の基本‣   テンプレート式とは?      @@(パラメータ名または条件式)@@    ●JavaScriptのシンタックスに準じている    ●タグを含ませることができない‣   例題:複数箇所のテキストの一括更...
オプション領域テンプレート式の基本‣   @@(条件式)@@❖ 例題:バナーの差し換え    ●パラメーター(type=boolean、type=URL)    <!-- TemplateParam name="特価品" type="boole...
リピート領域リピート領域とは? ●ブロックや表組みの行など、ある一定のレイアウトの反復を指定するために利用 ●基本的に編集可能領域と組み合わせて利用する ●入れ子での利用も可能         コントローラー            選択エントリ...
リピート領域リピート領域とは?‣   TemplateBeginRepeat    <!-- TemplateBeginRepeat name="リピート領域名" -->    反復する内容    <!-- TemplateEndRepeat ...
リピート領域リピート変数とリピートオブジェクト  テンプレート式で利用可能。  _index        0から始まる現在のエントリ数を返す。値は半角数字  _numRows      このリピート領域に含まれるエントリの合計数を返す。値は半...
リピート領域テンプレート式を使った制御‣   例題:現在x番目の番号を表示する    リピート変数 _index を利用    エントリー数=_index+1     <!-- TemplateBeginRepeat name="リピート領域名...
一歩進んだリピート領域の使い方‣   例題: 1つおきに表示非表示    偶数、奇数を取得が必要。    _index&1を利用→偶数の時:1、奇数の時:0を返す    条件式:((_index&1) ? 偶数の時の値 : 奇数の時の値)   ...
一歩進んだリピート領域の使い方‣   例題: nおきに表示非表示    _indexをnで割り切れる時がtrue    _index%nを利用→_indexをnで割ったときの余りを返す    条件式:((_index%n==0) ? 割り切れる...
一歩進んだリピート領域の使い方‣    例題: 親リピート領域のエントリ番号を取得                                                親リピート        リピート領域の入れ子の時に利用     ...
おまけ‣   もっと知りたい人は●Dreamweaverヘルプページのレイアウト > テンプレートの管理 > Dreamweaverのテンプレートについて > テンプレート式ページのレイアウト > テンプレートの管理 > Dreamweaver...
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

2,211 views

Published on

2007年3月23日に開催されたCSS Nite in OSAKA 2007春の陣 前夜祭の講演資料

Published in: Design
  • Be the first to comment

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

  1. 1. コードビュー中心で開発するDreamweaverテンプレート By Akira Maruyama 2007.3.23(Fri) in Apple Store Shinsaibashi
  2. 2. 簡単にプロフィールを…‣ 岡山県出身、 鳥取県在住。‣ Web業界10年ほど、現在次に向けて充電中。‣ 主にDreamweaver、Fireworksを利用。‣ mixiやってます。 http://mixi.jp/show_friend.pl?id=7200‣ FireworksやDreamweaverの機能拡張・カスタマイズを サイトで公開しています。 http://homepage.mac.com/akira_maru/fireworks/
  3. 3. 簡単にプロフィールを…‣ CSS Nite LP, Disk 2に講師として参加しました。 (2006.12)‣ 共著でDreamweaverプロフェッショナ ル・スタイルの執筆に参加しました。 (2006.12)
  4. 4. 全体の流れ‣ Dreamweaver テンプレートとは? ・概要 ・テンプレートタグを理解しよう‣ 編集可能領域 ・編集可能領域とは? ・コードビューで使えるTIPS‣ オプション領域 ・オプション領域とは? ・パラメータ設定用タグと条件振り分け用タグ ・条件式を理解する ・テンプレート式の基本‣ リピート領域 ・リピート領域とは? ・リピート変数とリピートオブジェクト ・テンプレート式を使った制御
  5. 5. Dreamweaverテンプレートとは?概要テンプレート=Dreamweaverの神髄となる機能の1つ‣ ひな形としての機能 適 用 共通部分のデザインが完成された <HTML> ページが出来上がる テンプレート(DWT) テンプレートを適用したHTML 編集不可能領域 <HTML> ★ 不要な部分をロックして編集不可能にする ノーマルHTML ➡ 編集可能領域
  6. 6. Dreamweaverテンプレートとは?概要‣ 同じデザインのページを“素早く”作成 新規ページ作成時にテンプレートから ページを新規作成できます。‣ テンプレートへの修正内容を 適用したページすべてに反映 テンプレート 適用したすべてのページ・ 修正 テンプレートに反映される 修正
  7. 7. Dreamweaverテンプレートとは?概要‣ 単なる「 ひな形」として以外の強力な機能 Dreamweaver MX以降の機能 ➡ オプション領域 ➡ リピート領域 ➡ 編集可能タグ属性‣ これらの機能はContributeで利用可能 独自機能と合わせてクライアント側で簡易CMSが構築できる
  8. 8. Dreamweaverテンプレートとは?テンプレートタグを理解する‣ DWテンプレートは「タグ」を挿入するだけ Dreamweaverテンプレート(dwt) =(X) HTML + テンプレートタグ タグで理解することでより細かい制御が可能になる =マークアップと同じ 個人的にはメニューから作成するよりも楽だったりする? (コードスニペットなどの活用でさらに効率化) 条件式をマスターすることがテンプレート活用のキモ (テンプレート式をマスターしよう)
  9. 9. 編集可能領域編集可能領域とは?‣ テンプレート編集可能な部分 基本的にはテンプレートを作成した テンプレートを適用したHTML だけでは編集できないのでタグで指 <HTML> ロックされた領域 定する 編集可能な領域‣ タグ <!-- TemplateBeginEditable name="編集可能領域名" --> 開始タグ 数字または記号以外ではじまる任意の文字。日本語可能。 <!-- TemplateEndEditable --> 終了タグ 予め編集可能領域に内容を入れておくと新規にテンプレートが適用された際に反映される。
  10. 10. 編集可能領域コードビューで使えるTIPS‣ ヘッダに編集可能領域を追加 メニューからはヘッダーの中には「doctitle」「head」以外の編集 可能領域が作れない。 コードビューでは 任意の場所に可能
  11. 11. 編集可能領域コードビューで使えるTIPS ‣ 編集可能領域をロック テンプレートの入れ子の際に定義された編集可能領域は基本的に次 の子テンプレートや子ページに継承される。 テンプレートの入れ子とは? 親テンプレート(dwt) 子テンプレート(dwt) 孫ページ(html)<body> <body> <body><!-- TemplateBeginEditable name="header" --> <!-- InstanceBeginEditable name="header" --> <!-- InstanceBeginEditable name="header" --><!-- TemplateEndEditable --> <!-- InstanceEndEditable --> <!-- InstanceEndEditable --></body> </body> </body>
  12. 12. 編集可能領域コードビューで使えるTIPS‣ 編集可能領域をロック 編集可能領域のロック <!-- InstanceBeginEditable name="編集可能領域名" --> @@(" ")@@ <!-- InstanceEndEditable --> デザインビュー 子ページに反映 消える コードビュー <body> <body> <!-- InstanceBeginEditable name="header" --> @@(" ")@@ <!-- InstanceEndEditable --> 非表示になる </body> </body>
  13. 13. オプション領域オプション領域とは?ページの編集時に編集ユーザの制御により、指定したエリアの表示非表示、複数箇所に同時に入力したテキストを挿入などを可能にします。 [修正]メニュー → [テンプレートプロパティ] 各パラメーター
  14. 14. オプション領域オプション領域とは?一例)編集可能領域の表示非表示の制御 チェックすると「真」になる 領域が挿入される
  15. 15. オプション領域パラメータ設定用タグと条件振り分け用タグ‣ オプション領域タグ パラメータ設定用タグと条件振り分け用タグがある ● パラメーター設定用タグ :TemplateParam ● 条件振り分け用タグ(括弧は終了タグ) : TemplateBeginIf(TemplateEndIf) TemplateBeginMultipleIf(TemplateEndMultipleIf) TemplateBeginIfClause(TemplateEndIfClause)
  16. 16. オプション領域パラメータ設定用タグと条件振り分け用タグ‣ TemplateParam → パラメーター設定用タグ <!-- TemplateParam name="パラメータ名" type="タイプ" value="初期値" --> ヘッダに記述する必要がある 5つのタイプ type="boolean" type="number" type="text" パラメーター名 初期値 type="URL" 注意: type="url" ではダメ! タイプ別入力領域 type="color" テンプレートを適用されたページでテンプレート プロパティーでの設定をコントロールする。
  17. 17. オプション領域パラメータ設定用タグと条件振り分け用タグ‣ TemplateBeginIf <!-- TemplateBeginIf cond="パラメータ名または条件式" --> 開始タグ 条件がtrueのときにここに記述した内容を表示 <!-- TemplateEndIf --> 終了タグ cond属性で返される値はtrueまたはfalseのみ ●パラメータ名の時  TemplateParamのtypeはboolean ●条件式の時  パラメータ == 1、! パラメータa) (パラメータb== "aaa")など ( &&
  18. 18. オプション領域パラメータ設定用タグと条件振り分け用タグ‣ TemplateBeginMultipleIf、TemplateBeginIfClause → 複数条件振り分け用タグ <!-- TemplateBeginMultipleIf -->  <!-- TemplateBeginIfClause cond="条件式1" -->  条件式1がtrueの場合に表示して終了。falseの場合は条件式2に。  <!-- TemplateEndIfClause -->  <!-- TemplateBeginIfClause cond="条件式2" -->  条件式2がtrueの場合に表示。  <!-- TemplateEndIfClause --> <!-- TemplateEndMultipleIf --> ※条件式1がtrueの場合、条件式2以降が trueでも表示は条件式1の内容のみです。
  19. 19. オプション領域条件式を理解する‣ オプション領域の理解=条件式の克服 A && B → A かつ B  A II B → A または B    A)→ Aでない etc ( !‣ 例題:複数の条件を同時に満たしたときだけ表示 ●パラメーター(いずれもtype=boolean) <!-- TemplateParam name="第2階層" type="boolean" value="true" --> <!-- TemplateParam name="リード" type="boolean" value="true" --> ●振り分け条件式 <!-- TemplateBeginIf cond="(第2階層)&&(リード)" --> 内容 <!-- TemplateEndIf -->
  20. 20. オプション領域条件式を理解する‣ 例題:レイアウトを切り替える ●パラメーター(type=number) <!-- TemplateParam name="レイアウト" type="number" value="1" --> ●振り分け条件式 <!-- TemplateBeginMultipleIf -->  <!-- TemplateBeginIfClause cond="(レイアウト)==1" -->  レイアウト1  <!-- TemplateEndIfClause -->  <!-- TemplateBeginIfClause cond= "(レイアウト)==2" -->  レイアウト2  <!-- TemplateEndIfClause --> <!-- TemplateEndMultipleIf -->
  21. 21. オプション領域テンプレート式の基本‣ テンプレート式とは?  @@(パラメータ名または条件式)@@ ●JavaScriptのシンタックスに準じている ●タグを含ませることができない‣ 例題:複数箇所のテキストの一括更新 @@(パラメータ名)@@ ●パラメーター(type=text) <!-- TemplateParam name="title" type="text" value="" --> ●挿入タグ タイトル:<title>@@(title)@@ I CSSNite</title> 見出し: <h1>@@(title)@@</h1> ナビゲーション:<p><a href="../index.html">トップ</a>&nbsp;         <span>&gt;&gt;</span>&nbsp;@@(title)@@</p>
  22. 22. オプション領域テンプレート式の基本‣ @@(条件式)@@❖ 例題:バナーの差し換え ●パラメーター(type=boolean、type=URL) <!-- TemplateParam name="特価品" type="boolean" value="false" --> <!-- TemplateParam name="imgurl1" type="URL" value="" --> <!-- TemplateParam name="imgurl2" type="URL" value="" --> ●挿入タグ <p class="img"><img src="@@((特価品) ? imgurl1 : imgurl2 )@@" alt="" width="600" height="147"></p> @@((条件式) ? trueの値 : falseの値 )@@ 返す値は変数でない場合は " "内に記述する
  23. 23. リピート領域リピート領域とは? ●ブロックや表組みの行など、ある一定のレイアウトの反復を指定するために利用 ●基本的に編集可能領域と組み合わせて利用する ●入れ子での利用も可能 コントローラー 選択エントリーの下に 選択エントリーを削除 エントリーを追加 各エントリー 選択エントリーの順序 選択エントリーの順序 を下のエントリーと入 を上のエントリーと入 れ替え れ替え
  24. 24. リピート領域リピート領域とは?‣ TemplateBeginRepeat <!-- TemplateBeginRepeat name="リピート領域名" --> 反復する内容 <!-- TemplateEndRepeat -->‣ InstanceBeginRepeatEntry リピートエントリーを作成するとエントリー毎に自動で生成される
  25. 25. リピート領域リピート変数とリピートオブジェクト テンプレート式で利用可能。 _index 0から始まる現在のエントリ数を返す。値は半角数字 _numRows このリピート領域に含まれるエントリの合計数を返す。値は半角数字 _isFirst そのエントリがリピート領域の最初のエントリかどうかを判別。値はtrue/false _isLast そのエントリがリピート領域の最後のエントリかどうかを判別。値はtrue/false _prevRecord 前のエントリのリピートオブジェクト。 例)_prevRecord._index 領域の最初のエントリに対してこのプロパティを使用するとエラーになる _nextRecord 次のエントリのリピートオブジェクト。 例)_nextRecord._numRows 領域の最後のエントリに対してこのプロパティを使用するとエラーになる _parent 入れ子されたリピート領域で外側のリピート領域のリピートオブジェクトを指定する。 ネストされたリピート領域以外でこのプロパティを使用するとエラーになる。
  26. 26. リピート領域テンプレート式を使った制御‣ 例題:現在x番目の番号を表示する リピート変数 _index を利用 エントリー数=_index+1 <!-- TemplateBeginRepeat name="リピート領域名" --> @@(_index+1)@@ <!-- TemplateEndRepeat -->
  27. 27. 一歩進んだリピート領域の使い方‣ 例題: 1つおきに表示非表示 偶数、奇数を取得が必要。 _index&1を利用→偶数の時:1、奇数の時:0を返す 条件式:((_index&1) ? 偶数の時の値 : 奇数の時の値) <!-- TemplateBeginRepeat name="リピート領域名" --> @@((_index&1) ? 偶数の時の値 : 奇数の時の値)@@ <!-- TemplateEndRepeat -->
  28. 28. 一歩進んだリピート領域の使い方‣ 例題: nおきに表示非表示 _indexをnで割り切れる時がtrue _index%nを利用→_indexをnで割ったときの余りを返す 条件式:((_index%n==0) ? 割り切れる時 : 余りがある時) <!-- TemplateBeginRepeat name="リピート領域名" --> @@((_index%n==0) ? 割り切れる時 : 余りがある時)@@ <!-- TemplateEndRepeat -->
  29. 29. 一歩進んだリピート領域の使い方‣ 例題: 親リピート領域のエントリ番号を取得 親リピート リピート領域の入れ子の時に利用 親エントリ1 子リピート _parent._indexを利用 子エントリ1 子エントリ1 親エントリ2 子リピート <!-- TemplateBeginRepeat name="親リピート" --> 子エントリ1 <!-- TemplateBeginRepeat name="子リピート" --> 子エントリ1 @@((_parent._index+1))@@ <!-- TemplateEndRepeat --> <!-- TemplateEndRepeat -->
  30. 30. おまけ‣ もっと知りたい人は●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
  31. 31. ありがとうございました

×