CSS Friendly Control AdaptersのダウンロードおよびASP.NET Webサイトへの統合
CSS Friendly Control Adaptersを使ってCSS対応のASP.NET Webサイトの構築を開始するには、最初に、Microsoftからファイルをダウンロードする必要があります。CSS Friendly Control AdaptersのWebサイトから最新バージョンを入手できます。CSS Friendly Control Adapters Version 1.0はここからダウンロードできます。
これらのコントロールアダプタは、VSIファイルとして提供されます。Visual Studio 2005またはVisual Web Developerがインストールされている場合は、ダウンロードしたVSIファイルをそのまま実行します。Visual Studioインストールに、新しいテンプレートが追加されます。CSS Friend Control Adapters Version 1.0には、新しいASP.NET CSS対応Webサイトを作成するためのテンプレートと、ASP.NET CSS Friendly Control Adaptersに関するチュートリアルが含まれています。チュートリアルには、必要なコアファイルと、すべてのアダプタの詳細な例が含まれています。一方、Webサイトテンプレートには、コアファイルと、いくつかの簡単なサンプルだけが含まれています。CSS Friendly Control Adaptersのサイトでは、サンプルをオンラインで見ることもできます。
これらのテンプレートを使用するには、Visual Studio 2005を起動し、新規Webサイトの作成を選択します。[New Web Site]ダイアログボックスには、［ASP.NET CSS Friendly Website］および［Tutorial on ASP.NET CSS Friendly Control Adapters］が表示されます。
いずれかのテンプレートを使用すると、Webサイトと、コントロールアダプタを使用するのに最低限必要なコアファイルが作成されます。具体的には、「App_Code」フォルダ内のコントロールアダプタクラスファイル、「App_Browsers」フォルダ内の「CSSFriendlyAdapters.browser」ブラウザ定義ファイル（すべてのブラウザに対して使用する各コントロールアダプタを指示）、および「JavaScript」フォルダ内のいくつかのJavaScriptファイル（主にMenuコントロールとTreeViewコントロールが、レンダリング出力にとって重要なクライアント側機能を提供するために使用）です。既存のASP.NET WebサイトをCSS対応のWebサイトに変換するには、この3つのフォルダをコピーします。
CSS Friendly Control Adaptersを使用した場合のMenuのレンダリング後のマークアップ
CSS Friendly Control Adaptersを使用した場合の出力の違いを確認するために、具体例を見てみましょう。トップレベルのメニュー項目と4つの子メニュー項目から成るメニューを表示するように定義された、Menu Webコントロールがあるものとします。このような構造は、以下の宣言的なマークアップを使って、Menu Webコントロール内で静的に定義できます。
<asp:Menu ID="ProductMenu" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem Text="Products"> <asp:MenuItem Text="Beverages" /> <asp:MenuItem Text="Condiments" /> <asp:MenuItem Text="Confections" /> <asp:MenuItem Text="Dairy/Milk" /> </asp:MenuItem> </Items> </asp:Menu>
MenuのBackColorプロパティがYellowに設定され、子メニュー項目のBackColorがPinkに設定されていることにも注意してください。Menuコントロールの「既定」のレンダリングロジックを使用した場合、レンダリング結果のHTMLは次のようになります。
<table id="ProductMenu" class="ProductMenu_2" cellpadding="0" cellspacing="0" border="0"> <tr> <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun0"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;"> <a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu', 'Products')">Products</a> </td> <td style="width:0;"> <img src="/CSSControlAdapters/WebResource.axd?d=chn_rjDXviMiG52QjFyPeTtWQOV3vwPBosett_KzYtE1&t=632965002926288600" alt="Expand Products" style="border-style:none;vertical-align:middle;" /> </td> </tr> </table> </td> </tr> </table> <div id="ProductMenun0Items" class="ProductMenu_0 ProductMenu_3"> <table border="0" cellpadding="0" cellspacing="0"> <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun1"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;width:100%;"> <a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu', 'Products\\Beverages')">Beverages</a> </td> </tr> </table> </td> </tr> <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun2"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;width:100%;"> <a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu', 'Products\\Condiments')">Condiments</a> </td> </tr> </table> </td> </tr> <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun3"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;width:100%;"> <a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu', 'Products\\Confections')">Confections</a> </td> </tr> </table> </td> </tr> <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ProductMenun4"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="white-space:nowrap;width:100%;"> <a class="ProductMenu_1" href="javascript:__doPostBack('ProductMenu', 'Products\\Dairy/Milk')">Dairy/Milk</a> </td> </tr> </table> </td> </tr> </table> <div class="ProductMenu_0" id="ProductMenun0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;"> <img src="/CSSControlAdapters/WebResource.axd?d=qidxSK8lNw1v6pL8
XviMiG52QjFyPeTtWQOV3vwPBosett_KzYtE1&t=632965002926288600"
ご覧の通り、このマークアップでは、各メニュー項目に対して<table>要素を使用しています。ここには示されていませんが、子メニュー項目の表示と非表示を処理する外部JavaScriptファイルへの参照があります。
CSS Friendly Control Adaptersをプラグインすることによって、レンダリング後のマークアップは、理解しやすいものに変わります。
<div class="AspNet-Menu-Horizontal" id="ProductMenu"> <ul class="AspNet-Menu"> <li class="AspNet-Menu-WithChildren"> <a href="javascript:__doPostBack('ProductMenu', 'bProducts')" class="AspNet-Menu-Link">Products</a> <ul> <li class="AspNet-Menu-Leaf"> <a href="javascript:__doPostBack('ProductMenu', 'bProducts\\Beverages')" class="AspNet-Menu-Link">Beverages</a> </li> <li class="AspNet-Menu-Leaf"> <a href="javascript:__doPostBack('ProductMenu', 'bProducts\\Condiments')" class="AspNet-Menu-Link">Condiments</a> </li> <li class="AspNet-Menu-Leaf"> <a href="javascript:__doPostBack('ProductMenu', 'bProducts\\Confections')" class="AspNet-Menu-Link">Confections</a> </li> <li class="AspNet-Menu-Leaf"> <a href="javascript:__doPostBack('ProductMenu', 'bProducts\\Dairy\\Milk')" class="AspNet-Menu-Link">Dairy/Milk</a> </li> </ul> </li> </ul> </div>
各メニュー項目には、適切な名前のCSSクラス（AspNet-Menu、AspNet-Menu-WithChildren、AspNet-Menu-Leafなど）が割り当てられます。これらのクラスのプレゼンテーション設定は、ページの<style>要素、または理想的には個別のCSSファイルで指定されます。CSS Friendly Control Adaptersを使ってレンダリングされるコントロールの、外観のカスタマイズの詳細については、「CSS Friendly Control Adapters White Paper」を参照してください。
まとめ
ASP.NETでは、コントロールやページを非常に柔軟にレンダリングできます。コントロールは、自動的にアダプティブレンダリングを使用して、アクセスしてきたユーザーがアップレベルのブラウザを使用しているのか、ダウンレベルのブラウザを使用しているのかに基づいて、適切なマークアップを発行します。レンダリングは、必要に応じて、コントロールアダプタを通じて完全にカスタマイズできます。この記事では、コントロールアダプタの基本について説明し、Microsoftが無料で提供するASP.NET 2.0 CSS Friendly Control Adatpersについて説明しました。これらのコントロールアダプタをWebサイトにプラグインすると、Menus、TreeViews、GridViews、DetailsViewsなどのコントロールが、CSS方式のレイアウトを使ってレンダリングを実行できるようになります。さらに、これらのコントロールアダプタにより、開発者はCSSクラスを使ってプレゼンテーション設定を指定するようになるので、コントロールレベルのスタイル設定が使われなくなり、レンダリング後のマークアップからインラインスタイルが排除されます。
それでは、ハッピープログラミング！
