TechNote

Dreamweaver MX の新しいテンプレート機能

Macromedia Dreamweaver MX は、テンプレートの多くの新しい機能を備えました。これらの新機能の利用することで、ページ編集の管理を強化するテンプレートを作成することが可能になります。オプション領域、リピート領域、ネストされたテンプレートの登場により、複雑な、動的に近いページを作成することができるようになります。

この文書では、Dreamwear MX の新しいテンプレート機能についてご案内します。

ネストされたテンプレート

リピート領域

オプション領域/テンプレートパラメータ

編集可能なタグ属性

そのほかのテンプレート機能

コード例

ネストされたテンプレートとは、基本的にテンプレートの中のテンプレートです。それにより、これらのテンプレートから作成されたページに、数段階に分かれた更新を可能にします。]

ネスとされたテンプレートの利点

ネストされたテンプレートはいろいろな手法でご利用いただけますが、もっとも一般的な利用法は異なったレベルのコントロールと施行権を提供することです。この機能を活用する例としては、web サイト全般にわたって一貫性のあるデザイン (web サイトの全てのページに会社のロゴと問い合わせ先情報を配置する、など) である場合です。しかし、web サイトにはそのセクションごとに特有のデザインを持ったセクションもあるでしょう。web サイトの特別なセクションに、サイト共通の一般的なエレメントやレイアウトフィーチャーをネストされた、そのセクション特有のテンプレートを作ることができます。

この機能は、次のような場合に開発者にとって役に立つはずです。会社住所やロゴを変更する必要がある時は、それらの変更を親テンプレートファイルに変更を加えることで、全てのページを自動的に更新できます。また、製品セクションが新しいデザインに変わるとしたら、ただネストされたテンプレート (子テンプレート) を更新するに止まるので、その変更は製品セクションのページ中のみに止まります。

ネストされたテンプレートを作成するには

メモ: ネストされたテンプレートについてのより詳しい情報については、文書番号　228569　Dreamweaver MX でネストされたテンプレートを作成するをご覧ください。

1. ネストされたテンプレートの作成は、以前のバージョンの Dreamweaver と同じ手法で、普通のテンプレートを作成します。このテンプレートが親テンプレートとなります。以前のバージョン同様、テンプレートには最低でも一つ編集可能領域が必要です。
2. このネストされたテンプレートから新規にページを作成します。通常通り、編集可能領域だけ編集でき、ほかの領域はロックされていこのテンプレートが、ネストされた (もしくは子) テンプレートとなりますので、編集可能領域にページ内容を加えます。イメージやテキストといった web エレメントを加えられます。
3. この2番目のテンプレートの編集可能領域に、新たに編集可能領域を挿入します。このことで、テンプレートから作成したインスタンスから、ネストされたテンプレートへ変換します。
4. このファイルをテンプレートとして保存します。

二つのテンプレートの違いを見るには、ネストされたテンプレートを元にページを作成してみることです。予想通り、ネストされたテンプレートで編集可能領域として定義されていた部分の編集のみ可能になっています。ネストされたテンプレートに変更を加えると、ネストされたテンプレートを基にしているページのみ更新されます。オリジナルのテンプレートを編集すると、親テンプレートを基本としたページ―ネストされたテンプレートも含めて―がすべて更新されます。ネストされたテンプレートが更新されるので、ネストされたテンプレートを基にしたページもすべて更新されます。

メモ: 以下でご説明しているテンプレートの属性の例は、このページの下部で提供されているコード例でご覧いただけます。この文書のコード例はこの例から抜粋されています

テンプレートのリピート領域機能は、特定のエレメントがいくつ必要か知らないままでも開発者のテンプレート作成を可能にします。このことは開発者が特定のエレメントの見た目をコントロールできると同時に、テンプレートユーザに特定のエレメントを自由に繰り返し使用し、必要に応じてエレメントの内容を変更させることができます。

リピート領域の利点

一般的には、リピート領域はテーブルと連用されることが多いでしょう。テーブルが使用されているテンプレートには、単一の行や行のグループをリピート領域に設定することができます。その上で、そのリピート領域内に、編集可能領域を定義します。 (例としてテーブルを作成した場合に、テーブルセルが編集可能領域を含めるようにです。) そのテンプレートからユーザがファイルを作成するとき、必要なだけ、新しい行や行のグループを追加し、編集可能なテーブルセルに個別のコンテンツを追加することができます。テンプレート自体にはテーブルの一行 (もしくはグループの行) しかなくても、テンプレートを基にしたページでは、情報を表示させるのに必要なだけ作成することができます。列は追加したりはずされたり、リピートされている行の中なら上下に動かすことができます。この機能は、大元になっているテンプレートをかき回すことなく、開発者は柔軟にページを拡張させてゆけます。

上図はよくみるリピート領域の使用方法で、Dreamweaver はリピートテーブルというテーブルのテンプレートオブジェクトがあります。このオブジェクトでは一つのダイアログボックス内でテーブルとリピート領域を設定することができます。

リピート領域を作成するには

メモ: この件については、ヘルプ文書において細かく明記されています。ここでは、リピート領域を利用する方法の概要を案内するにとどまります。

1. 新しいテンプレートを作成するか、開きます。
2. 繰り返したいコンテントを決めます。文章の集まりでもかまいませんし、イメージでもかまいません。
3. [挿入]-[テンプレートオブジェクト]-[リピート領域] を選択します。
4. リピート領域を半角スペースや特殊文字の含まれていない半角英数字のみ使った名前で名づけ、OK をクリックします。
5. オプション：今作成したリピート領域のコンテントを選択し、[挿入]-[テンプレートオブジェクト]-[編集可能領域] を選択して編集可能にします。
6. テンプレートファイルを保存します。
7. テンプレートから新規ファイルを作成します。そこにコンテントが追加されていることを確認してください。上図のように、リピート領域のインスタンスを追加したり削除したりできるようにプラスとマイナスのアイコンがあるのと、順番変えのために上下のアイコンが見えるでしょう。

リピート領域の指定の仕方によっては、本当は編集可能領域が必要ないことがあることをお気をつけください。このような例としては、イメージを挿入してそれをリピート領域にしますが、編集可能領域にしません。このテンプレートを基にしたドキュメントでは、プラスアイコンをクリックするだけで、イメージを繰り返し追加できます。

リピートテーブルを作成するには

メモ: この件については、ヘルプ文書において細かく明記されています。ここでは、リピートテーブルを利用する方法の概要を案内するにとどまります。また、リピートテーブルは、リピート領域の特別使用法であるということも特筆すべき点です。

1. 新しいテンプレートを作成するか、開きます。
2. [挿入]-[テンプレートオブジェクト]-[リピートテーブル] を選択します。
3. リピートテーブルダイアログボックスでは、テーブルで使用したい設定を入力し、リピートしたい行を指定します。[終了行] は何行リピートさせるのかを指定するのに利用され、入力する必要があります。一番初めの行だけ繰り返したい場合は、[開始行] と [終了行] テキストボックス両方に 1 を入力します。
4. OK をクリックします。行のそれぞれのセルは、自動的に編集可能に指定されているので、テンプレートユーザはそれぞれのセルにコンテンツを追加できます。

オプション領域は、つまりオプショナルということです。コンテンツや編集可能領域をオンにしたりオフにしたりできます。(表示させたりさせなかったりします。)

オプション領域の利点

オプション領域の使用は単純なものから複雑なものにわたり、複雑なものは深慮とスクリプティング能力が必要になるでしょう。

オプション領域の単純な使用法は、テンプレートをベースにしたページで、コンテンツを表示させるかさせないかです。オプション領域として定義されたコンテンツは、テンプレートで追加することができます。オプション領域を含むテンプレートを作成したユーザは、後でオプション領域をページに残すか消すかを判断できます。ユーザがオプション領域をオフにすると、オプション領域としてい定義されたコンテンツはページに表示されなくなるでしょう。これは開発者がちょっとしたコンテンツを配置・表示させるのをコントロールする場合に利用できるでしょうし、また開発者はテンプレートユーザがそのコンテンツを使いたいか使いたくないかを選ばせることもできるでしょう。

さらに複雑なオプション領域の使用では、パラメータにオプション領域を表示させるかさせないかを指定させることができます。そのため、テンプレートユーザがオプション領域のいじるのでなく、オプション領域はパラメータに反応してオンになったりオフになったります。

交互に背景色の変わるテーブル行は、複雑なリピート領域使用の例です。リピートテーブル (上記で取り上げられ表示されているような) を使用している場合、テンプレートで固定されているため、開発者はテーブルの行の見た目を変更することができません。Dreamweaver はしかし、テーブルの行数を記録しておくことができます。つまり、テンプレートでパラメータを設定することができるのです。オプション領域を、行数に反応してオンにしたりオフにしたりするよう定義することができます。

オプション領域を作成し実際に使用するには

メモ: この件については、ヘルプ文書において細かく明記されています。ここでは、オプション領域を作成し利用する方法の概要を案内するにとどまります。また、このセクションではテンプレートパラメータの作成方法と使用方法についての一般情報もご案内しておりますが、この文書の趣旨とは異なるため、テンプレートパラメータを作成する手順そのものを提供はしておりません。

テンプレートファイルでオプション領域を作成する

1. 新しいテンプレートを作成するか、開きます。
2. 繰り返したいコンテントを決めます。文章の集まりでもかまいませんし、イメージでもかまいません。
3. [挿入]-[テンプレートオブジェクト]-[オプション領域] を選択します。
   メモ: オプション領域に含まれたコンテンツをテンプレートユーザが編集や追加可能にしたい場合は、編集可能領域を追加します。そうすることで、追加したコンテンツの横 (コンテンツを囲うのでなく) に領域が追加されます。
4. 新規オプション領域ダイアログボックスは [基本] と [高度] の二つのタブがあります。単純なオプション領域―テンプレートユーザ自身でオンやオフにするオプション領域―を作成するのには、[基本] タブで領域に名前を付け、OK をクリックします。
5. テンプレートファイルを保存します。

テンプレートファイルをベースにしたファイルでオプション領域をオンにしたりオフにしたりする

1. テンプレートから新規ドキュメントを作成します。
2. [修正]-[テンプレートプロパティ] を選択します。
3. テンプレートプロパティダイアログボックスに上記で設定したオプション領域の一覧が表示されます。オプション領域の名称を選択します。デフォルトでは、オプション領域は表示するよう設定されています。そのため、オプション領域の値は「真」です。
4. オプション領域をオフにするには、[<オプション領域名> を表示] オプションをクリックします。OK を選択します。

テンプレートパラメータの作成はテンプレートファイルのコードに手動で行うことができますが、また、テンプレートパラメータは上記で説明したとおり、オプション領域を作成すると、自動的にも作成されます。どちらの場合も、全てのテンプレートパラメータはドキュメントの HEAD に記されている必要があり、下記のシンタックス (<custom> 部分をカスタマイズされた値に変更し) に準じている必要があります。

<!-- TemplateParam name="<custom>" type="<custom>" value="<custom>" -->

上記の手段を用いてオプション領域を作成すると、テンプレートパラメータは特別に以下のように記載されます。

<!-- TemplateParam name="<custom>" type="boolean" value="true" -->

テンプレートファイルでは、テンプレートパラメータを使用したオプション領域の作成は新規オプション領域ダイアログボックスの [高度] タブを使って可能です。

• パラメータの使用：もし、テンプレートパラメータがブール値タイプで値が真が偽である場合には、既存のテンプレートパラメータを使用してオプション領域を作成することができます。この規格に見合ったパラメータは、ポップアップメニューに表示されｍす。
• 式を入力：原則的に、作成されたパラメータは、JavaScript で存在するパラメータのゆおに使用することができます。事実、パラメータ式は JavaScript のコードルールを基にしており、シンタックスは JavaScripting コード法と同一です。加算、減算、乗算、除算といった数式をパラメータに使用し、複雑性を加えることもできます。

テンプレートパラメータを使用したオプション領域の作成はコードに直接書き込むこともできます。コード内容はオプション領域をどこで使うかによって異なります。

• テンプレートパラメータを使用した領域は、変数として表現できます。この方法は、タグの属性を変数に置き換え、またコンテンツの代用としてもしようできるので、より柔軟性のある方法といえるでしょう。パラメータを変数として表現する場合は、以下のシンタックス (<parameter> を定義したテンプレートパラメータ名と置き換え) を使用します。

@@("<parameter>")@@

• テンプレートパラメータを使用した領域は、タグとして表現できます。テンプレート式タグは、HTML コメントとして立っていますが、中に単体の属性と値を持ったタグとしても機能しています。この手段は、タグそのものであるので、タグの属性の値を取り替えることはできません。テンプレート式タグは、以下のシンタックス (<parameter> を定義したテンプレートパラメータ名と置き換え) を使用します。

<!-- TemplateExpr expr="<parameter>" -->

両方の場合において、Dreamweaver はコードを理解し、テンプレートを基にしたどんなページのコードも値と取り替えます。どのように二つが異なるかについて感覚をつかむには、以下の例がその使用方法の違いを浮き彫りにしてくれるでしょう。

例1：この例では、コードはタグの属性の値を取り替えるのに使用されているのではないので、どちらのハンドコーディングの方法でもオプション領域 (赤文字) は機能するでしょう。両方の場合において、Dreamweaver はテンプレートを基にしたどのページでこのコードを見ても、コードを実際に定義された値 (値はテンプレートユーザにより、テンプレートのプロパティでと編集可能になります) 取り替えます。

• 動作する：<title>@@("title")@@</title>
• 動作する：<title><!-- TemplateExpr expr="title" --></title>

例2：この例では、コードがタグの属性を置き換えるため、テンプレート式タグを使用したハンドコーディングは誤りです。しかしはじめの方法では、Dreamweaver はテンプレートを元にしたどのページでもコードを認識し、コードを実際に定義された値 (値はテンプレートユーザにより、テンプレートのプロパティでと編集可能になります) 取り替えます。どの方法でも、パラメータにしようとしたコードは赤文字です。

• 動作する：<table width="279" border=@@("border")@@ cellpadding=3 cellspacing=0>
• 動作しない：<table width="279" border=<!-- TemplateExpr expr="border" --> cellpadding=3 cellspacing=0>

時に、テンプレートユーザがエレメントの全てのコードにアクセス可能にすることなく、ページの一面のみ修正を許可したいと思うでしょう。そのような要望にこたえるのが編集可能なタグ属性です。編集可能なタグ属性は、タグそのものにアクセスすることなくテンプレートユーザにタグの特定の属性を変更させることができます。

メモ: 編集可能タグ属性は特別仕様のオプション領域です。基本的には、編集可能タグ属性を追加するのはタグ属性をオプション領域として定義したのを同じです。この機能は、テンプレート作成者が値を定義して、テンプレートユーザがほかのオプション領域のパラメータの値を変更するのと同じように、テンプレートパラメータを作成します。

編集可能なタグ属性の利点

HTML では、属性は割り当てられたタグの詳細です。例えば、テーブルタグはテーブルの背景色を指定する bgcolor 属性を持っているかもしれません。多くの場合、テンプレート開発者がテンプレートユーザにテーブルの背景色などを編集可能にするには、開発者はテーブル全体を編集可能にする必要がありました。(つまりテーブルの場合には、テーブルそのものが実際編集可能領域に追加されている必要がありました。) ところが編集可能なタグ属性を使用することで、開発者はテーブルを追加し、テーブルセルのみを編集可能領域にして、背景色― bgcolor 属性―を編集可能タグ属性に指定すればいいのです。そのようなテンプレートを基にしたページでは、ユーザはテーブルそのものは修正できませんが、bgcolor 属性を変更でき、テーブルセルの編集可能領域にどのようなコンテンツでも追加もしくは編集することができます。

編集可能なタグ属性を作成するには

編集可能なタグ属性はテンプレート開発者に作成されます。

1. 新しいテンプレートを作成するか、開きます。
2. ページにコンテンツを追加します。例えばテーブルの例であれば、テーブルをページに追加します。何をページに加えても、タグで囲われた内容のタグである必要があります。(よって、テキストだけの、テキストそのものには機能しないが、段落タグに囲われたテキストには適応されるようにです。)
3. 可能にしたいタグの属性のタグを選択します。例えば、テーブルの例であれば、テーブルを選択し、それ用の背景色を定義します。また、このステップを省略し、ステップ 5 の属性の名前を入力することもできますが、これには属性の名称を知っていることが前提となります。
4. オブジェクトが選択されていることを確認し、[挿入]-[テンプレートオブジェクト]-[属性を編集可能にする] を選択します。編集可能なタグ属性ダイアログボックスが開きます。
   
   
   
5. 属性ポップアップメニューでから、編集可能にしたい属性を選択します。ステップ 2 で属性を設定しておかなかった場合は、[追加] ボタンをクリックして、有効な属性名を入力します。重要：属性名はそのタグに有効な属性でなければなりません。
6. 「属性を編集可能にする」オプションにチェックをいれます。
7. この編集可能属性の名前を入力します。Dreamweaver が自動的に入力しているものが入力されていますが、自分で他では使われていないと知っている名前を入力した方がよいでしょう。テンプレートのユーザは、定義された属性を設定しようとする際、一覧の中からこの名称をみて認識するということを忘れないでください。
8. 既に指定されている属性を編集可能にしようとするなら、Dreamweaver でタイプ設定を選択したほうがいいでしょう。ステップ 5 で属性名を追加している場合は、ポップアップメニューから適切なタイプを選択する必要があります。テンプレートユーザは希望する値を選択するのに、この設定によって手段が異なるので、データにとって正しい設定であるか確認します。選択肢は以下のとおりです。

• テキスト：テキストを必要とした値に適しています。 テーブルタグの整列属性などがこの例です。テンプレートユーザは、テキストボックスに取替えになるテキストを入力します。
• URL：ファイルのへのパスを定義するのに適しています。イメージ (img) タグのソース (src) 属性などがこの例です。テンプレートユーザは、横にファイルをブラウズするためのフォルダアイコンがついているテキストボックスに入力します。
• カラー：色を設定するのに適しています。テーブルタグの背景色 (bgcolor) などがこの例です。テンプレートユーザは、テキストボックスと色を選択できるカラーピッカーで設定できます。
• 真/偽：オンにしたりオフにしたりする属性に適してます。テーブルセルのタグの折り返さない設定などがこの例です。テンプレートユーザはポップアップメニューで真か偽を選択できます。
• 数字：数字を必要とする属性に適しています。テーブルタグの幅の値なぢがこの例です。テンプレートユーザーは数値をテキストボックスに入力します。

1. 属性のデフォルト値を指定します。
2. OK をクリックします。
3. このテンプレートから新規ページを作成し、[修正]-[テンプレートプロパティ] を選択します。 編集可能属性の一覧がダイアログボックスに表示されます。オプション領域もこのダイアログボックスに表示されているでしょう。 編集したい属性を選択し、ダイアログに値を設定します。OK をクリックすると、新しい値がページに設定されます。

テンプレートから作成しやページで、[修正]-[テンプレートプロパティ] と進むと、ダイアログに編集可能なパラメータのリストが表示されます。編集したい属性を選択し、ダイアログの中で値を設定します。OK をクリックすると、ページに新しい値が設定されます。

テンプレート領域の削除

編集可能なエリアやその他のテンプレート領域を削除するには、領域を選択し、[修正]-[テンプレート]-[テンプレートマークアップの削除] と進みます。

テンプレートシンタックスの確認

Dreamweaver MX の別な新機能は、書かれたテンプレートコードが正しいかの検証する機能です。追加された複雑性やいくつかのテンプレート式とパラメータに必要になってくるハンドコーディングには、コードエラーの可能性が増大します。[テンプレートシンタックスのチェック] はコードのデバッギングの手助けをします。

この機能は実際のテンプレートファイルのみで使用可能です。[修正]-[テンプレート]-[テンプレートシンタックスのチェック] と選択します。

以下のコート例はリピート領域に編集可能領域を含んでいます。コード例を使用するには、以下の指示に従ってください。

1. Dreamweaver で新規に HTML テンプレートファイルを作成 ([ファイル]-[新規]-[テンプレートページ]-[HTML テンプレート]) します。
2. このファイルを、[ファイル]-[テンプレートして保存] と進み、サイトリストでサイトを選択し、ファイルに名前を付けて、テンプレートとして定義されたサイトに保存します。
3. ブラウザの画面で、以下のコード例を選択し、[編集]-[コピー] を選択します。
4. Dreamweaver のテンプレートファイルに戻ってきます。
5. テンプレートファイルの全てのコードを選択 (コードビューに変更し、[編集]-[全て選択] を選択) し、[編集]-[ペースト] でコピーしたコードをペーストします。
6. [ファイル]-[保存] を選択し、テンプレートを保存します。
7. このテンプレートから [ファイル]-[新規]-[テンプレート] を選択して、該当するサイトからテンプレートを選んでファイルを作成します。リピート領域機能を更に使用するには、[修正]-[テンプレート]-[リピートエントリー] を選択し、新しくエントリーを追加します。これらの色は、[修正]-[テンプレートプロパティ] を選択し、テンプレートから作成したファイルで修正することができます。

テンプレートには以下が含まれます。

• 編集可能タグ属性
• 式
• 編集可能領域
• リピート領域
• テンプレートパラメータ

Dreamweaver MX の新しいテンプレート機能についての詳細は、米国 Dreamweaver Support Center の Using Templates* セクションをご覧ください。

ネストされたテンプレート作成についての詳細は、文書番号　228569　Dreamweaver MX でネストされたテンプレートを作成するをご覧ください。

なお、この文書は、米国 Adobe Systems, Inc. の New template features in Dreamweaver MX (TechNote 16347) をもとに作成されました。

関連ドキュメント (Related Records)

This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of Adobe® Flash® Player.

Download the free Flash Player now!

サポート情報検索 (Search Support)