Dreamweaverのテンプレート機能でパターンページを量産する
前回に引き続きDreamweaver関連の記事を。Dreamweaverはコーディングを快適にするための機能がたくさん用意されています。その中の一つにテンプレート機能というものがあります。この機能を使うことで、静的なHTMLファイルでも条件分岐で異なるタグを切り出したり、共通エリアを定義できたりと高度なコーディングができるようになります。今回は基本的な部分として「編集可能領域」を定義することで大量のページ物のコーディングを行うときに使えるフローを見ていきたいと思います。
任意の場所にサイトのドキュメントルートを作成し保存します。CSSや画像が読み込まれない場合は一度、Dreamweaverを終了し再度.dwtファイルを開くと読み込まれるようになります。
テンプレート機能で編集する領域を設定していきます。今回はグローバルナビ直下のコンテンツエリアを対象にします。この部分がページごとに編集する箇所で、それ以外の場所は共通エリアとなります。
対象領域を選択した状態で「挿入」→「テンプレート」→「編集可能領域」から選択した部分を編集可能な状態になるよう設定していきます。
編集可能領域にユニークとなるよう名前を設定します。
そうするとHTMLタグ内に下記のようなコメントアウトが追加されます。先ほど選択した部分を囲むように記述されます。
続いて「ファイル」→「テンプレートとして保存」から、編集可能領域を設定したHTMLをDreamweaverのテンプレートファイルとして保存します。テンプレート名は任意のものを入力します。
テンプレートはドキュメントルート直下に「Templates」というフォルダが自動的に作成され、その中に先ほど設定したテンプレート名のファイルが保存されます。このテンプレート名の拡張子は「.dwt」になり、Dreamweaverのテンプレートファイルとして機能します。これでパターンページを量産する準備が整いました。
テンプレートファイルを元にした新規のHTMLドキュメントが開かれますが、テンプレートで設定した編集可能領域以外のコードがグレーアウトされ、編集できないようにロックされているのが確認できます。デザインビューの方でも確認してみると、表示可能領域以外の要素は選択できないようになっています。
こうすることで、共通エリアは変更ができなくなるので、コンテンツの内容が異なる部分だけを安全に編集できるようになります。
テンプレートからの編集が終わると、そのまま保存することもできますが不要なテンプレート用のコメントアウトタグが残ってしまいます。ですので「ツール」→「テンプレート」→「マークアップを省略して書き出し」を選択します。書き出し先フォルダーを設定すると、Dreamweaverのテンプレート関連のコメントアウトが全て削除された状態でHTMLが書き出されます。
ちなみに、「******.html.xml」という名前でテンプレートの編集可能領域部分のみを抜き出したXMLファイルも合わせて書き出されます。XMLファイルの中を見ると表示可能領域はCDATAとしてitem要素として書き出されているのが確認できます。
【******.html.xml】
1. Dreamweaverのテンプレートファイル（.dwt）を作成
今回はデフォルトで用意されているHTMLのフォーマットを利用します。「スターターテンプレート」からいろんなパターンを選択できます。
任意の場所にサイトのドキュメントルートを作成し保存します。CSSや画像が読み込まれない場合は一度、Dreamweaverを終了し再度.dwtファイルを開くと読み込まれるようになります。
テンプレート機能で編集する領域を設定していきます。今回はグローバルナビ直下のコンテンツエリアを対象にします。この部分がページごとに編集する箇所で、それ以外の場所は共通エリアとなります。
対象領域を選択した状態で「挿入」→「テンプレート」→「編集可能領域」から選択した部分を編集可能な状態になるよう設定していきます。
編集可能領域にユニークとなるよう名前を設定します。
そうするとHTMLタグ内に下記のようなコメントアウトが追加されます。先ほど選択した部分を囲むように記述されます。
<!-- TemplateBeginEditable name="テンプレート名" --> ............ <!-- TemplateEndEditable -->また、デザインビューの部分では設定した編集可能領域の名前が表示され、対象領域が枠で囲まれて表示されます。選択するとわかりやすいですね。
続いて「ファイル」→「テンプレートとして保存」から、編集可能領域を設定したHTMLをDreamweaverのテンプレートファイルとして保存します。テンプレート名は任意のものを入力します。
テンプレートはドキュメントルート直下に「Templates」というフォルダが自動的に作成され、その中に先ほど設定したテンプレート名のファイルが保存されます。このテンプレート名の拡張子は「.dwt」になり、Dreamweaverのテンプレートファイルとして機能します。これでパターンページを量産する準備が整いました。
2. 作成したテンプレートファイルからページを量産
Dreamweaverの新規作成から「サイトテンプレート」を選択し、作成したDreamweaverのテンプレートファイルを選択します。
テンプレートファイルを元にした新規のHTMLドキュメントが開かれますが、テンプレートで設定した編集可能領域以外のコードがグレーアウトされ、編集できないようにロックされているのが確認できます。デザインビューの方でも確認してみると、表示可能領域以外の要素は選択できないようになっています。
こうすることで、共通エリアは変更ができなくなるので、コンテンツの内容が異なる部分だけを安全に編集できるようになります。
テンプレートからの編集が終わると、そのまま保存することもできますが不要なテンプレート用のコメントアウトタグが残ってしまいます。ですので「ツール」→「テンプレート」→「マークアップを省略して書き出し」を選択します。書き出し先フォルダーを設定すると、Dreamweaverのテンプレート関連のコメントアウトが全て削除された状態でHTMLが書き出されます。
ちなみに、「******.html.xml」という名前でテンプレートの編集可能領域部分のみを抜き出したXMLファイルも合わせて書き出されます。XMLファイルの中を見ると表示可能領域はCDATAとしてitem要素として書き出されているのが確認できます。
【******.html.xml】
<?xml version="1.0" encoding="utf-8"?> <templateItems template="/Templates/*******.dwt" codeOutsideHTMLIsLocked="false"> <item name="編集可能領域名"> <![CDATA[ ............テンプレートの内容 ]]> </item> <item name="編集可能領域名"> <![CDATA[ ............テンプレートの内容 ]]> </item> </templateItems>そのほかにも、Dreamweaverのテンプレート内で使える独自タグなども多数存在し、条件分岐やループなども可能となります。また、PHPなどのコードがhtml要素の外側であったり、DOCTYPE宣言の前に入る場合には下記のコードが必要になります。次のようにheadタグ内に記述しておきます。
<head> ............ <!-- TemplateInfo codeOutsideHTMLIsLocked="true" --> </head>このDreamweaverのテンプレート機能をうまく使いこなすことで、PHPやjavascriptの制限を受けずとも、合理的に大量のパターンページ作成が捗るのではないでしょうか。複数人で分担する作業の時なども便利そうですね。ただし、使い慣れるのと操作を覚えるコストはかかりそうですが、、使う機会があれば試してみたいと思います。 （参考にさせて頂いたサイト） テンプレート機能を使ってみよう パート1：「編集可能領域」と「オプション領域」の使い方
