フレームワークのレイアウト機能を使わないという選択

選択したフレームワークが、TeedaであってもRailsであってもDjango*1であっても、HTMLのテンプレート機能があると思います。通常、ヘッダやナビゲーションなどの共通部分にテンプレート機能を使うでしょう。テンプレート機能を使う事でコードの再利用性を高め、共通部分への修正が発生した場合の影響を小さくします。
このようにテンプレート機能は良いこと尽くしと考えられますが、デメリットもあります。それはサーバで動かさなければレイアウトが有効にならないという事です(Teedaではプレビュー可能Teeda - Extension - 逆引きリファレンス - プレビュー)でした。koichikさん、ご指摘有難うございます。:2008/10/21)。したがって、HTML部分だけでページ全体のレイアウトを確認できません。これはガチガチの管理画面を作成するのであれば些細な点かと思います。しかし、一般に公開されるWebサイトなど、見た目を重視するプロジェクトの場合は大きな問題です。
今回はデザイナとプログラマの隙間を埋める話題から、テンプレート(レイアウト)機能をどう扱うかについてです。対象とするプロジェクトは、1人以上のプログラマとデザイナが開発に参加するユーザインターフェイスへの優先度が高いケースになります*2

フレームワークと開発ツール

動的なWEBサイトを作成する場合、デザイナとプログラマの両方が必要になります。しかし、両者のコミュニケーションを阻害する要素が多いと、お互いにギクシャクして気分良く仕事ができません。元請の都合で、デザインとプログラムを別の会社に発注する事もありますが、おそらくは最悪のパターンでしょう。
プログラマとデザイナが気持ちよく作業を共有できるヒントの1つはフレームワークにあります。例えばRailsプログラマが気持ちよくビュー(HTML)を書くことができるフレームワークですが、デザイナにとっては鬼門かと思います。何故ならば、HTML中にコードや特殊なタグが氾濫してしまい、HTMLとCSSのコーディングに集中できません。また、Dreamweaverなどの開発ツールで適切な処理が行えず、プレビューなどが正常に機能しません。
したがって、TeedaDjango+GenshiのようにXHTMLをベースにしたフレームワークが有効になります。プログラマ視点からすれば好みの範囲になるかもしれませんが、デザイナ視点から見ると得意とする開発手法が通じるか否かなので重大です。
WEBデザイナの間では、AdobeDreamweaverが標準的な開発ツールとなっています。DreamweaverにはWEB開発に必要な機能がデザイナ向けに用意されており、この後発売されるCS4ではJavaScriptのデバッカ、AIRへの正式対応、Subversionのサポートなどプログラム寄りの機能が追加される予定です。
一方、プログラマはAptamaやEclipseのHTMLエディタ等を使っているかと思います。それぞれタグの補完やCSSの入力補完などHTMLをコーディングする為のアプリケーションとしては十分かと思います。ですが、あくまでプログラマ向けのツールでありWEB製作を行うデザイナ向けのツールではありません。

Dreamweaverのテンプレート機能を使う

DreamweaverにはWEBサイトの共通部分(ヘッダ、ナビゲーション、フッタ)等を効率よく管理する為にテンプレート機能が提供されています。テンプレート機能を使うと共通部分への変更などが発生した場合、効率よく修正する事が可能です。
それならばフレームワークのレイアウト(テンプレート)機能でも変わらない気がしますが、決定的な違いがあります。Dreamweaverは元々は静的なWEBサイトを製作する為のツールである為、テンプレート機能は静的なサイトの数多くのページに対して共通のテンプレートを適用したいという目的で用意されているのです。これに対して、WEBアプリケーションフレームワークの場合は、動的なページが大前提ですから共通する部分はコンポーネント化して再利用したいという目的です。
したがって、Dreamweaverのテンプレート機能を使用した場合、すべてのHTMLに共通のヘッダが出力されます。テンプレート部分は別ファイルで管理され、テンプレートを変更すると各HTMLのテンプレート部分は置き換えられる方式だからです。

このDreamweaverのテンプレート機能がもたらすメリットは大きいと思います。例えば、ショッピングカート付きのオンラインショップを作成するとしましょう。この時、商品の一覧などは動的な部分ですが、店舗案内やトップページなど静的な部分も多く存在します。これをTeedaで実装しようとした場合、動的な箇所がなくとも動的に生成することになります。また、HTMLの一部(例えばトップページのお知らせ等)は手動で修正したいという要求があったならば、まとめてTeedaの管理下に置くよりは静的ページを別管理する方がデプロイの手間がありません。ですが、Teedaのレイアウト機能を静的な部分に適用できません。一方、Dreamweaverのレイアウト機能の場合、出力されるHTMLには共通部分が挿入されます。したがって、動的なページも静的なページも別管理であってもレイアウト機能が有効になります。
さらにWEBアプリケーションのフレームワークではテンプレートはサーバ上で実行しなければ動きませんが、Dreamweaverのテンプレート機能ではその心配もありません。デザイナも自分達の仕事に集中できるでしょう。
また、Dreamweaverにはテンプレート内の特定の項目をページごとに変数として埋め込む機能もあります。例えば、タイトル部分はテンプレートに含まれるが、タイトルはページごとに異なるような場合です。プログラマが作るとすれば、タイトル部分をプログラム側から返すように実装して…と考えるかと思います。ですが、Dreamweaverでは各ページにプロパティとしてタイトルの文字列を設定する事で設定可能です。

このようにデザイナ視点で考えると、デザイナのツールとやり方を十分に考慮することで気分良く開発してもらえるでしょう。今回はプログラマのデザイナ側への歩み寄りですが、逆にソースコードのバージョン管理などデザイナがプログラマに歩み寄るパターンもあります。同じもの作っているのですから、作業を分離するのではなく共同作業するという意識が重要です。

2008/10/21 追記

TeedaではKumuの機能を使ったレイアウト機能を使うことができました。そういえば以前、見かけた気もします…(その時はレイアウト機能だけ覚えてスルーしたかも)。申し訳ありませんでした。
尚、一応確認してみましたが、Dreamweaver(CS3)でのプレビューではJavaScriptは働かない為に有効になりません。ページデザインをDwでやるかEclipseでやるかによって使い分けると良いかと思います。

*1:厳密に言えばDjangoはプレゼンテーションフレームワークは自由に選択可能。

*2:一般消費者向けのWEBサイトであれば当然ながら高い。