« Progression3でクラススタイルにコンポーネントを連携させる（1/3）
[作品紹介]映画「Dr.パルナサスの鏡」ブログパーツ »

DreamWeaverテンプレート機能のオプション領域などでグローバルナビゲーションを便利にする

2010 年 1 月 26 日 by 正宗

年末進行のせいにして年賀状も書いてない男。正宗です。さっきやっと寒中見舞いが刷り上がりました。

DreamWeaverのテンプレート機能。便利ですよね。うまくつかうとライブラリ機能と組み合わせる事によって大規模なサイト制作におけるケアレスミスを大幅に減らすことが出来ます。
今回はそのテンプレート機能でグローバルメニューをどう作ろうか考えたので、現時点で見つけた一番スマートではないかと思えるやり方を紹介したいと思います。

まずは僕が一生懸命作ったDreamWeaverのテンプレートを見て下さい。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <!-- TemplateBeginEditable name="doctitle" -->
  6. <title>マサムネット</title>
  7. <!-- TemplateEndEditable -->
  8. <link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
  9. <!-- TemplateBeginEditable name="head" -->
  10.  
  11. <!-- TemplateEndEditable -->
  12. </head>
  13. <body>
  14. <div id="page" class="top">
  15. <div id="header">
  16. <h1><a href="/">マサムネット</a></h1>
  17. <ul id="globalNavigation">
  18. <li><a href="/profile/">プロフィール</a></li>
  19. <li><a href="/gallery/">ギャラリー</a></li>
  20. <li><a href="/contact/">お問い合わせ</a></li>
  21. <li><a href="/link/">リンク</a></li>
  22. </ul>
  23. </div>
  24. <div id="contents" class="top">
  25. <!-- TemplateBeginEditable name="maincontents" -->
  26. ここにコンテンツが入ります。
  27. <!-- TemplateEndEditable -->
  28. </div>
  29. <div id="footer">
  30. コピーライト
  31. </div>
  32. </div>
  33.  
  34. </body>
  35. </html>

こうしたテンプレートを作っておく場合、例えば「/profile/」以下のファイルには全部

 
<li class="self"><a href="/profile/">プロフィール</a></li>
 

こんな感じで他のリストとは違ったクラス名を付けたくなるかもしれません。

また、/profile/index.htmlページは、メニューからプロフィールのリンクを押しても自身のページに飛ぶだけなのでアンカーを付けたくない、などといったようにページによってメニューが細かく変化する場合が出てきます。

グローバルメニューは編集可能領域にしてしまうとか、それだとテンプレート機能の便利さがスポイルされてしまうのでライブラリと組み合わせて運用するとか、いろいろ試してみたんですがどれも一長一短あって困っていましたが、面白いものを見つけました。

それが「編集可能オプション領域」と「オプション領域」です。
それぞれテンプレート編集画面から「挿入」→「テンプレートオブジェクト」から挿入できます。
普段よく使う「編集可能領域」と一緒の場所にあるので、これは何なのか不思議に思った方も多いと思います。
ところがこれ、実際に使ってみようと思っても、変な画面が出るだけでナニが何やらわけがわからないんですよね。

じつはこれ、JavaScriptの書式でテンプレートを動的に変化させることができるものみたいなんです。

編集可能オプション領域

まずは「編集可能オプション領域」の説明から。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <!-- TemplateBeginEditable name="doctitle" -->
  6. <title>マサムネット</title>
  7. <!-- TemplateEndEditable -->
  8. <link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
  9. <!-- TemplateBeginEditable name="head" -->
  10.  
  11. <!-- TemplateEndEditable -->
  12.  
  13. <!-- TemplateParam name="profile_class" type="text" value="menu" -->
  14. <!-- TemplateParam name="gallery_class" type="text" value="menu" -->
  15. <!-- TemplateParam name="contact_class" type="text" value="menu" -->
  16. <!-- TemplateParam name="link_class" type="text" value="menu" -->
  17. </head>
  18. <body>
  19. <div id="page" class="top">
  20. <div id="header">
  21. <h1><a href="/">マサムネット</a></h1>
  22. <ul id="globalNavigation">
  23. <li class="@@(profile_class)@@"><a href="/profile/">プロフィール</a></li>
  24. <li class="@@(gallery_class)@@"><a href="/gallery/">ギャラリー</a></li>
  25. <li class="@@(contact_class)@@"><a href="/contact/">お問い合わせ</a></li>
  26. <li class="@@(link_class)@@"><a href="/link/">リンク</a></li>
  27. </ul>
  28. </div>
  29. <div id="contents" class="top">
  30. <!-- TemplateBeginEditable name="maincontents" -->
  31. ここにコンテンツが入ります。
  32. <!-- TemplateEndEditable -->
  33. </div>
  34. <div id="footer">
  35. コピーライト
  36. </div>
  37. </div>
  38.  
  39. </body>
  40. </html>

ややこしい記述が増えてきたので順番に見て行きます。
先ずは１３行目〜１６行目

 
<!-- TemplateParam name="profile_class" type="text" value="menu" -->
<!-- TemplateParam name="gallery_class" type="text" value="menu" -->
<!-- TemplateParam name="contact_class" type="text" value="menu" -->
<!-- TemplateParam name="link_class" type="text" value="menu" -->
 

これはDreamWeaverのテンプレート用の記述方式で、例えば１３行目はprofile_classという変数の中に"menu"という値がセットすることを意味します。１４行目、１５行目、１６行目も全く同じで、それぞれgallery_class、contact_class、link_classという変数に"menu"という値をセットしています。
そんな変数なんて変なものセットしてどこで使うんだYO!!と思いたいところですが、次に２４行目〜２７行目を見てみます。

 
<li class="@@(profile_class)@@"><a href="/profile/">プロフィール</a></li>
<li class="@@(gallery_class)@@"><a href="/gallery/">ギャラリー</a></li>
<li class="@@(contact_class)@@"><a href="/contact/">お問い合わせ</a></li>
<li class="@@(link_class)@@"><a href="/link/">リンク</a></li>
 

「class="@@(profile_class)@@"」なんていうオットロシイ文字が出てきましたが、落ち着いてみるとこれ、ただのli タグに追加されたクラス属性です。

class="何々”の中がちょっと変わった書き方になってるので複雑に見えますが、
@@(　　　)@@の中はさっき１３行目〜１６行目で設定した変数が入っています。
先ほどセットした変数をここで実際につかっている、というイメージですね。

テンプレートをこのようにしておくと、このテンプレートからページを作った時に

 
<li class="menu"><a href="/profile/">プロフィール</a></li>
<li class="menu"><a href="/gallery/">ギャラリー</a></li>
<li class="menu"><a href="/contact/">お問い合わせ</a></li>
<li class="menu"><a href="/link/">リンク</a></li>
 

こんな感じで作成してくれる、っていうのが「編集可能オプション領域」になります。

ここから当初の目的である「どうやってページごとの特定のメニューだけクラス名を変えるのか？」を実際に試してみます。

テンプレート機能を使おうという記事なので、ここまで読んでる方はその前段階である、DreamWeaverのサイト定義はもう済ませてあると前提で進めて行きます。
サイト定義がよくわからない場合は「DreamWeaver サイト定義」などの語句でヘルプやWEB上の情報を検索してみて下さい。

ファイルの新規作成で「test.html」などのHTMLファイルを作成して開いておいて、メニューの「修正」→「テンプレート」→「テンプレートをページに適用」でHTMLファイルをテンプレートと関連づけます。
テンプレートをページに適用

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <!-- InstanceBeginEditable name="doctitle" -->
  6. <title>マサムネット</title>
  7. <!-- InstanceEndEditable -->
  8. <link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
  9. <!-- InstanceBeginEditable name="head" -->
  10.  
  11. <!-- InstanceEndEditable -->
  12.  
  13. <!-- InstanceParam name="profile_class" type="text" value="menu" -->
  14. <!-- InstanceParam name="gallery_class" type="text" value="menu" -->
  15. <!-- InstanceParam name="contact_class" type="text" value="menu" -->
  16. <!-- InstanceParam name="link_class" type="text" value="menu" -->
  17. </head>
  18. <body>
  19. <div id="page" class="top">
  20. <div id="header">
  21. <h1><a href="/">マサムネット</a></h1>
  22. <ul id="globalNavigation">
  23. <li class="menu"><a href="/profile/">プロフィール</a></li>
  24. <li class="menu"><a href="/gallery/">ギャラリー</a></li>
  25. <li class="menu"><a href="/contact/">お問い合わせ</a></li>
  26. <li class="menu"><a href="/link/">リンク</a></li>
  27. </ul>
  28. </div>
  29. <div id="contents" class="top">
  30. <!-- InstanceBeginEditable name="maincontents" -->
  31. ここにコンテンツが入ります。
  32. <!-- InstanceEndEditable -->
  33. </div>
  34. <div id="footer">
  35. コピーライト
  36. </div>
  37. </div>
  38.  
  39. </body>
  40. <!-- InstanceEnd --></html>

test.htmlはこんな感じになると思います。

ここでメニューから「修正」→「テンプレートプロパティ」を選択します。
テンプレートプロパティをえらぶ！

さきほど苦労してテンプレートで作った変数がずらっと並んでいると思うので、そこからうまく「profile_class」という変数を見つけて、中身の「menu」を「self」と書き換えて下さい。
きみはうまくみつけられるか！？

お見事！グローバルナビゲーション部分のリストが次のように変わったかと思います。

 
<li class="self"><a href="/profile/">プロフィール</a></li>
<li class="menu"><a href="/gallery/">ギャラリー</a></li>
<li class="menu"><a href="/contact/">お問い合わせ</a></li>
<li class="menu"><a href="/link/">リンク</a></li>
 

オプション領域

次に「オプション領域」を試してみたいと思います。
これは何かと言うと、テンプレートの中に、オプションとして「付けるか付けないか」をページごとに決められる部分を作る機能です。

（一個前にやったtest.htmlではなく）先ほどのテンプレートに戻って、テンプレート変数を増やしてみます。

<!-- TemplateParam name="profile_class" type="text" value="menu" -->
<!-- TemplateParam name="gallery_class" type="text" value="menu" -->
<!-- TemplateParam name="contact_class" type="text" value="menu" -->
<!-- TemplateParam name="link_class" type="text" value="menu" -->
 
<!-- TemplateParam name="profile_anchor" type="boolean" value="true" -->
<!-- TemplateParam name="gallery_anchor" type="boolean" value="true" -->
<!-- TemplateParam name="contact_anchor" type="boolean" value="true" -->
<!-- TemplateParam name="link_anchor" type="boolean" value="true" -->

追加しているのは下４行目です。上４行と比べて、今度は
type="boolean"
となっています。

プログラムに慣れた方で勘の良い方はこれで理解したかと思いますが、「オプション領域」と「編集可能オプション領域」の違いは、変数がbooleanかそうでないかの違いだけです。

なので先ほどの「編集可能オプション領域」と同じように、こんども変数のセットを行ったら、次はその変数を実際に使う部分を作っていきます。

 
<li class="@@(profile_class)@@">@@( (profile_anchor) ? '<a href="/profile/">プロフィール</a>' : 'プロフィール' )@@</li>
<li class="@@(gallery_class)@@">@@( (gallery_anchor) ? '<a href="/gallery/">ギャラリー</a>' : 'ギャラリー' )@@</li>
<li class="@@(contact_class)@@">@@( (contact_anchor) ? '<a href="/contact/">お問い合わせ</a>' : 'お問い合わせ' )@@</li>
<li class="@@(link_class)@@">@@( (link_anchor) ? '<a href="/link/">リンク</a>' : 'リンク' )@@</li>
 

なにやら@@ばっかりで複雑になったようですが、落ち着いて下さい。

実は@@(　　　)@@この中にはJavaScriptが書けるんです。
なので例えば

@@( (link_anchor) ? '<a href="/link/">リンク</a>' : 'リンク' )@@

こんなのも@@(　　　)@@の中だけに注目してみると

(link_anchor) ? '<a href="/link/">リンク</a>' : 'リンク'

こうなります。

こうしてみると、オプション領域の中はただの二項演算子（if 〜 elseのかっこいいやつ）で書けるということになります。

テンプレートを編集したら、test.htmlに戻ってみましょう。
さっき作った変数profile_ancher
さっき作ったばかりの変数「profile_anchor」を選択して下の「profile_anchorを表示」のチェックを外して下さい。

 
<li class="self">プロフィール</li>
<li class="menu"><a href="/gallery/">ギャラリー</a></li>
<li class="menu"><a href="/contact/">お問い合わせ</a></li>
<li class="menu"><a href="/link/">リンク</a></li>
 

こんな感じで、プロフィールだけアンカーが無いリストになったと思います。

まとめ

実は@@(　　　)@@とかJavascriptなんてものを使わなくても、最初からテンプレート編集画面で「挿入」→「テンプレートオブジェクト」から「編集可能オプション領域」や「オプション領域」を選ぶと、何かUIが現れて設定できるのですが、そっちを覚えるよりは僕はJavascriptのほうが馴染みがあるのでこっちの方法を紹介しました。
とにかくテンプレート機能が見違えるくらい柔軟かつ強力になる機能には間違いないので、興味がある方でJavascriptよりはUIからの設定に自信のある方はそちらを試してみても良いと思います！

タグ: , , ,

Related posts

この投稿は 2010 年 1 月 26 日 火曜日 2:13 AM に 未分類 カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。

コメントをどうぞ