テンプレートの使い方
Last update 2013/03/15 18:11
Yahoo!ブックマークに登録とうとうAdobe Dreamweaver CS5 日本語版を購入してしまいました。
今までDreamweaver MX2004を使っていたのですが、スマートフォン用サイトを本格的に作成したくて、思わず購入してしまいました。
MXは8年以上前の製品ですが、だいぶ進化して使いやすくなっていました。
その中でも特に便利だな、と思った機能の一つが「テンプレート」です。
テンプレートは
Dreamweaverのテンプレートは、基本となる部分をファイルとして保存しておき、新しくページを作成するときは、そのテンプレートから作成する、ということが出来る機能。
これだけだったら、Dreamweaverがなくても出来るかもしれませんが、この「テンプレート」が便利なところは、ベースとなるテンプレートを修正すると、それを元に作成したページは全て自動で変更される点。
例えば、ページのデザインを変更したい時も、普通であればすべてのページを開いて修正しなければなりませんが、このテンプレートという機能を使っていると、テンプレートを修正するだけで関連するページが全て修正できるんです。
jQueryで作成したページは、jQueryのバージョンが新しくなったら、こまめにリンクを変更してやる必要があるのですが、すべてのページのリンクを変更するのは大変！
また、google Analyticsなどのコードを挿入したり、アフィリエイトタグを修正したり・・・・も、テンプレートファイルを修正すれば、自動ですべてのページに反映されます。
一度この便利さになれると、高いお金を出して購入したかいがあったなぁと感じました。
それと、テンプレートでは修正できる部分を指定するのですが、誤ってそれ以外の部分を修正できないように、入力できないようにロックされるんです。
テンプレートの使い方は？
ただ、ちゃんとした手順でテンプレートを作成しないと、どうもうまく動作してくれないみたいで、ずっとテンプレートの良さがわからないままでした。
今回、ようやく使い方がわかったので、正しい使い方と言うか正しく活用できる使い方を紹介したいと思います。
テンプレートファイルの作成
まずはベースとなるページの作成です。
私の場合は、最近スマートフォンサイトの作成に興味があって「jQuery」や「HTML5」の勉強をしているんですけれど、「jQuery」などはスタイルシートやJavascriptのリンクが同一なので、その部分はいちいち0から作成しなくていいので、このテンプレートを使うとすごく簡単にページの作成に取り掛かれるんです。
まずはベースとなるページを作成します。
新規ファイルの作成を選択。
「空白ページ」を選択し、「HTML テンプレート」をクリック。
レイアウトを「なし」（もしくはお好きなレウアウトをクリック）にし、「作成」ボタンをクリック。
すると、ある程度タグが埋まったページが作成されます。
普通の空白ページと違うのは、ちょっと特殊なコメントタグが挿入されている点です。
それをこんな感じに編集しました。
「jQuery Mobile」では、いろいろなスマートフォンで便利に機能するJavaScriptやCSSを実現するために、ヘッダー部分にちょっと手を加える必要が有るのですが、この部分はテンプレートとして保存しておき、TITLEタグとBODYタグの部分のみページごとに編集出来るようにしてみます。
先ほど自動的に作成されたページだと、ヘッダー部分も修正できるようになっていましたが、それをタイトル部分だけ編集できるように、コメントタグを削除。
で、jQuery Mobileを実現するためのリンクタグを挿入しました。
BODY内を編集できるようにする
続いてBODY内部も編集できるようにします。
まずは、「BODY」タグに挟まれた部分の行番号をクリックします。
複数行にまたがっている場合は、行番号の編集可能な領域をドラッグして選択します。
続いてメニューの中の「挿入」をクリック。
その中にある「テンプレートオブジェクト」を選択。さらにその中の「編集可能領域」を選択します。
このような警告が出るので「OK」をクリックします。
この編集可能領域の名前をつけます。
わかりやすい名前をつけておくといいでしょう。
このように特殊なコメントタグが挿入されました。
この
<!-- TemplateBeginEditable name="ボディ" -->
と
<!-- TemplateEndEditable -->
で囲まれた部分が、編集できる範囲になります。
今回のように自由度が高いテンプレートを作成する場合は、これでOKですが、本格的なサイトの場合は、ブログのようにトップページやカテゴリーページへのリンクはそのままに、メインの本文部分を編集可能領域にしたり、指定できる範囲は自由に、そしていくつも設定出来ます。
<!DOCTYPE HTML>
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<!-- TemplateBeginEditable name="ボディ" -->
<!-- TemplateEndEditable -->
</body>
</html>
結局こんな（↑）感じでテンプレートを作成しました。
この例だと、タイトルとボディの部分が編集可能領域です。
テンプレートが作成できたら、そのまま普通に保存します。
テンプレートの名前と説明を入力します。大規模なサイトの場合は、どのテンプレートがどのファイル化識別できるように名前と説明を詳しくしておくと良いでしょう。
今回は「BASIC」という名前にしました。
するとサイト上に「Template」というフォルダが作成され、そこにテンプレートファイルが保存されます。
拡張子は「dwt」になります。
テンプレートからページを作成する
では、実際にテンプレートからページを作成してみましょう。
まずは「新規作成」ボタンをクリック。
①「テンプレートから作成」をクリックし、②作成したいドメインを選択。
③作成したテンプレートを選択します。
④最後に「作成」ボタンをクリック。
すると先ほど指定した編集可能領域以外のタグが、薄いグレーでページが作成されました。
この薄いグレー、つまり編集可能領域以外の部分は、編集しようとしても編集できなくなっています。
もし、この部分を編集したい場合は、先ほど作成したテンプレートファイル自体を編集する必要があります。
これで、不用意に余計な部分を誤って編集してしまったりすることはなくなりました。
また、新たにページを作成するときもテンプレートを選択すれば、必要なタグなどが記述された状態で開かれるので、ページの追加が簡単になりました。
テンプレートを編集する
テンプレートファイルの方を編集し、保存すると同じテンプレートから作成した他のファイルも自動的に更新されます。
テンプレートを編集し、保存するとこのように他の影響するファイルにも反英させるか聴いてくるので「更新」をクリック。
するとあっという間に同じテンプレートで作成した他のファイルにも反映されました。
ただ、どうもPHPなど動的に表示するページなどは、手動で保存しないと反映されないっぽい（？）。
例えば、テンプレートにこのようなコメントタグを付け加えると・・・
そのテンプレートで作成した他のページもこのように自動的にコメントタグが追加されていました。
戻るボタンをつけたページ
jQuery Mobileなど、スマホ用のサイトを作成していくと、画面上部にヘッダ部分と「戻る」ボタンを設置するのをつい忘れてしまいがち。めんどーだし。
そこでこの部分も含め、テンプレート化してみました。
<!DOCTYPE HTML>
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,
user-scalable=no,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href=
"//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script src=
"//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<!-- TemplateBeginEditable name="H1" --><h1>
</h1><!-- TemplateEndEditable -->
</div>
<!-- TemplateBeginEditable name="ボディ" -->
<div data-role="content">
</div>
<!-- TemplateEndEditable -->
</div>
</body>
</html>
注意点
1つ、注意する点があります。
Dreamweaverで、ファイル名に「template」というつづりが含まれるファイル名を作成しようとすると、テンプレート用のファイルと識別されるのか、テンプレートとして保存されてしまいます。
具体的には「template」というディレクトリの中に、拡張子が「dwt」というファイル名で保存されてしまうようです。
まとめ
このようなテンプレート用のファイルの作成は、ある程度今までのソフトでもエディタだけでも実現できていましたが、このDreamweaverのテンプレートは、新たにページを作成するまでの手順がすごく簡単な点。
いちいちテンプレートファイルを開いて、必要な部分をコピーして・・・別名で保存・・・というようなめんどくさい手順を踏まなくても、簡単にページを量産することができます。
また、後でCSSやJavaScriptを編集したり、トップページへのリンクを変更したりしても、1つのファイルを編集すれば、一気に他のファイルも更新できてしまいます。
実際に使ってみるとすごく便利。
特に私のように、AjaxやjQuery、HTML5などを勉強したり覚えたい人は、実験用に作成したサンプルファイルが散乱してしまいがち。
で、途中で勉強をあきらめてしまったり・・・。
それがこの機能を使えば、必要な部分だけを編集していけばいいので、ブログ感覚でページが作成できてしまうんですよね～。
| 
| 
