Dreamweaver記事

サッポロビールにおけるテンプレート活用事例

テンプレート化は大変？

実はページを作るとき、ある程度は考えているはず

製品情報以外のカテゴリでも、更新が掛かる箇所はDreamweaverテンプレートとして各ページに展開しています。

知る・楽しむ

知る・楽しむ TEMPLATE

グルメ・レシピ

グルメ・レシピ TEMPLATE

会社情報

会社情報 TEMPLATE

多くのページに対し、これらの機能を盛り込んだDreamweaverテンプレート化を行うことは大変に思えるかもしれません。しかし、Webサイトを制作するときは運用のことを考えずに制作することは稀です。つまり、このようなケースのときにはこう対応する、ということはサイトを設計する時点で考慮しているはずなのです。
であれば、あとはどうDreamweaverテンプレートの形に落とし込むかを考え、実装すればよいだけです。

設計はあえて紙とペンで

サッポロビールWebサイトの場合は、仕様書とそれに基づいたデザインをまず紙に出力し、蛍光ペンで編集可能領域・リピート領域・テンプレートオプションなどを明示していきました。意外に思われる方もいらっしゃるかもしれませんが、実は素早く検討と修正を繰り返すことができ、またいくつかのページに対して同じ作業を行っていくうちに「このリピート領域はこちらでも使える」「このメニューブロックはこちらと同じもので行ける」というようなことが感覚的に見えてくるため、おすすめです。

注意点

テンプレートの各項目名はこの時点で精査しておきましょう。入力内容や行える操作がわかりやすい名前であるか、ほかの項目名と整合がとれているか、細かいようですが後からの使いやすさに影響してきます。
各領域の親子関係について正しく理解した上で設計に着手するようにしましょう。たとえばリピート領域の中にオプション領域は設定できませんし、編集可能領域内に別の領域を設定する場合はテンプレートをネストする必要があります。

編集はテキストエディタで

テンプレートの制御はすべてコメントを利用したテンプレートタグで行われているため、実装時はDreamweaverのメニューを使用せず、テキストエディタを使用してテンプレートタグを直接書き込んでいきました。その際、以下のようなテキストをすぐに挿入できるような形（クリップボード拡張ツール、IMEに辞書登録など）にしておくと便利です。

編集可能領域：
リピート領域：
テンプレートオプション（条件分岐コンテナ）：
テンプレートオプション（条件分岐パターン）：
テンプレートオプション（初期パラメータ）：

なおテキストエディタでなく、コードビュー＋スニペットでも同じことが実現できると思います。
この手法で作るときはDreamweaverをテンプレートの構文チェッカーとして利用しました。作成したテンプレートをDreamweaverで開くと、エラーがあった場合に該当箇所を指摘してくれるのです。

テンプレートからページ作成ではなく、ページからテンプレート化

この手法を応用すると、既にあるページをテンプレート化することもできます。
テンプレートから展開されたページには

参照するテンプレートのパス
そのテンプレートで使用しているテンプレートタグがインスタンスタグに置き換えられたもの

が書き込まれており、これによってどのテンプレートからどんな形で作成されたかをDreamweaverが判断しています。なので、

既存のページの要素を最小限にし、内容をサンプルに変える
テンプレートタグを書き込み、Dreamweaverテンプレートとして保存
そのDreamweaverテンプレートからページを新規作成して保存
保存したページに書かれているテンプレートへのパス、インスタンスタグを実際のページにテキストエディタなどで移植
移植したページをDreamweaverで開き、正常に開かれることを確認する

というステップを踏むと、もともとDreamweaverテンプレートありきでそこからページが作成されたような状態を簡単に作ることができます。インスタンスタグの詳細などは省きますが、こういう使い方もあるということを覚えておくと役に立つことがあるかもしれません。