概要
前回、NetAdvantage AppStylist for Windows Formsについて解説しましたが、今回はASP.NET用のNetAdvantage AppStylist for ASP.NETを使用したスタイリング方法を紹介します。AppStylist for ASP.NETはコントロールの各要素に対してCSSを作成可能なデザインツールです。さらに、作成したスタイルセットを実行時に切り替えることも可能となります。
NetAdvantage AppStylist for ASP.NETの背景
Windows Formsアプリケーションでのスタイル時の問題と同様に、ASP.NETアプリケーションにおいても同じような課題が存在しています。NetAdvantage AppStylist for Windows Formsのデザインモデルをもとに、インフラジスティックスは2007年初頭にNetAdvantage AppStylist for ASP.NETをリリースしました。
Windows Formsアプリケーションスタイリングとの比較
Webアプリケーションを構成するCSS、HTMLマークアップ、画像ファイルそれぞれに対応し、かつInternet Explorerの互換モードと標準モードなど、同じブラウザ内の異なる解釈の下でのデザイン環境を提供するために、既存Application Styling Framework（ASF）の改良が必要でした。以下はAppStylist for Windows FormsとAppStylist for ASP.NETにおける相違点です。
フォルダベースのスタイルライブラリ
デザイナはスタイルライブラリの構成情報が含まれている.wsl（Webスタイルライブラリ）ファイルを使用しますが、スタイルライブラリはスタイルセットおよびコントロール別に整理された.cssおよび画像ファイル（.gif、.png、.jpg）で構成されています。そのためスタイルライブラリはルートのフォルダを起点とし複数のフォルダ、ファイルにまたがって構成されます。このため、他のツールからのグラフィックスファイルのインポートおよびエクスポートを容易にします。
Cascading Style Sheet（CSS）の使用
AppStylist for Windows Formsでは外観設定と画像リソースをXMLフォーマットでシリアル化しましたが、AppStylist for ASP.NETでは、CSSを活用することにより、大手のブラウザによってサポートされるプロパティに適合したスタイル設定が行われます。
「web.config」における構成
アプリケーションスタイリングを有効にするためにコードを記述する必要はありません。「web.config」ファイルでenableAppStyling、styleSetNameおよびstyleSetPath属性を設定することで即座にWebサイト全体へ適用されます。
CSS限定のWebデザインとの比較
すべてのWeb開発者とデザイナが思いつく疑問は、AppStylist for ASP.NETと通常のCSS使用との相違点は何かということです。AppStylist for ASP.NETは、Webアプリケーション全体をスタイリングする際に標準CSSを活用することで、アーキテクチャによって提供されるメリットを享受しつつ、独自の機能を加えることにより、デザイン時の利便性を追求しています。
AppStylist for ASP.NETはアプリケーションのページ、コントロールのすべてに対して自動指定でCSSを適用し、デザインへの焦点を高めることで、デザイナと開発者の生産性を向上させます。
Webサイトで10の異なるコントロールを使用するには、多数のCSSクラスの参照が必要となります。これらのCSSクラスは、名前の競合や特定のCSSスタイル定義を編集するために管理スキームが必要となります。ASFではこの問題を解決するためにスタイルセット、コントロールタイプ、スタイルロールに基づいて固有のCSSクラス名を生成します。また、Webスタイルライブラリでは、一つのスタイルシート内に共通するCSSスタイル定義が統合されています。Webサイトに表示される各コントロールは、コントロールタイプ独自のCSSスタイルシートを追加参照するので、通信時の不要なオーバーヘッドを削減します。
加えてASFはスタイルロールにより、コントロール要素を細部まで管理します。スタイルロールは、コントロールの各状態別にわかれており、選択時、無効時など、コントロールのそれぞれの状態において外観設定が可能です。描画時にHTMLのどの部分がどのCSSクラスを必要とするかを瞬時に認識し、その場でCSSクラス参照を指定できます。これにより、開発者またはデザイナ手動でスタイルを適用せずとも、結果をすぐに得ることができます。このため、実装およびメンテナンス時間の削減や開発者とデザイナのやり取りを簡素化します。
アプリケーション全体でCSSクラスの指定が行われることは、設定されたデザインが自動的に適用されることを意味します。AppStylistを使用しなければ、デザイナが特定の外観を試す場合、実際のページにあるコントロールにおいてCSSを参照する多数のプロパティ設定を必要とするでしょう。スタイルが希望するものではなかった場合、CSS参照を元に戻す必要があり、これは、非生産的な作業となります。NetAdvantage AppStylist for ASP.NETを使用すれば、多くのCSSクラスに影響を及ぼす変更を短時間で行うことができ、生産性が向上します。
コントロールプリセットとの比較
2004年、インフラジスティックスは、整合性のある外観を提供するためにプリセットをリリースしました。プリセットはXMLファイルで、シリアル化が解除されると、コントロールのプロパティおよびスタイル設定が行われます。外観設定に加え、動作設定を定義可能です。このため、例えばプリセットを適用することにより、すべてのUltraWebGridインスタンスが同じ外観、動作となります。
ただし、すべてのインスタンスに対してプリセットをロードする必要があり、このことはWebアプリケーション全体を通しての整合性を確約しませんでした。また、プリセットがコントロール上のプロパティ自体に直接影響するため、プリセットを変更した場合の保守作業が増加したり、複数のプリセットを適用する場合に競合が発生したりする欠点がありました。
「コントロールのオブジェクトモデル上でプロパティに直接影響を与えない」というアプリケーションスタイリングの主要なデザイン目標の一つは、プリセットにおいての経験が基になっています。ASFは元の状態のプロパティ値に影響を与えることなく、外観プロパティを適用します。ASFはプリセットで提供しているコントロールの動作設定については定義しません。そのため、コントロールの動作を設定する場合はプリセットと組み合わせることになります。
アプリケーションスタイリングをASP.NETテーマと比較
Microsoftが2005年にASP.NET 2.0を発表した際、テーマメカニズムを導入しました。スタイリングの方法としては有望でしたが、アプリケーションのスタイルを編集するには、ASP.NETの知識が必要でした。
これに対して、AppStylist for ASP.NETではプラットフォームの知識を必要としません。また、デザインツールに留まらず、配備を容易に行うことができるアプリケーションスタイリングコンフィギュレーションアドインを提供します。
