特集 Microsoft Expression Web製品レビュー（前編） Webデザイン・ツール「Expression Web」を試してみた WINGSプロジェクト　土井 毅、　監修：山田 祥寛 2007/02/16

Page1 Page2 Page3 Page4

　2007年1月17日、マイクロソフトはWebクリエイター向けデザイン・ツールのスイート製品であるMicrosoft Expression Studioを発表した。

　Expression Studioは、以下のプロダクトで構成されている。

プロダクト名	概要
Expression Web	XHTML＋CSSといった最新Web技術に完全対応し、Web標準（＝W3Cが定義するXHTMLコードやCSSコードの標準）に準拠したWebサイトを構築できるWebデザイナー向けプロダクト。ASP.NET 2.0をサポート
Expression Blend	WPF（Windows Presentation Foundation）のXAMLを用いたアプリケーション／リッチ・クライアント／アニメーションなどのデザインを行うためのプロダクト。Visual Studio 2005と同じプロジェクト・ファイルを扱うことができ、C#／Visual Basicでのコーディングをサポート
Expression Design	Expression WebやBlend、ほかのアプリケーションで使用するためのベクタ・グラフィックスを作成するためのプロダクト。XAML形式での出力、およびベクタ／ビットマップなどの各種画像形式での出力が可能
Expression Media	100種類以上のファイル形式をサポートしたコンテンツ管理ツール
Expression Studioの製品構成

　特に目を引くのはXAMLをサポートするExpression Blend、Expression Designの両プロダクトであるが、これらは.NET Framework 3.0を前提としており、クライアントの動作環境を限定するという面では万人向けのプロダクトとはいいづらい。

　一方、Expression Webはこれまで広く利用されてきたHTML作成ツールであるFrontPageをベースにしたプロダクトで、XHTML＋CSS（カスケーディング・スタイル・シート）といった最新Web技術に対応し、そのWeb標準（W3Cが定義するXHTML 1.1／1.0 Transitional／1.0 Strict／1.0 Frameset、およびCSS 2.1／2.0／1.0、など）をサポートしたWebデザインを行えるのが特長だ（つまり、従来のプロダクトのように、IEだけにしか対応できないHTMLコードは出力されなくなった）。さらに、ASP.NETによるWebアプリケーション開発とスムーズに連携できるようになっているため、そのデザインの面で開発生産性を大きく向上させられるだろう。

　Expression WebはExpression Studioの各プロダクトの中で最も早く本日2月16日から発売が開始された（そのほかのプロダクトは2007年Q3期になる見込み）。その製品出荷に先立ち、すでに1月17日よりExpression Web（日本語版）の全機能を試用可能な評価版が提供開始されている。

　本記事ではこのExpression Webのレビューを2回に渡りお送りする。前編となる今回では、まずExpression Webの機能を概観し、CSSおよびXHTMLサポートについて紹介する。そして後編では、Expression WebによるASP.NETのサポートについて紹介する。

■Expression Webの概要

　繰り返しとなるが、Expression WebはWeb標準を中心に据えたWebデザイン・ツールである。従来のFrontPageやVisual Studio 2005（以下VS 2005）を使ったASP.NETアプリケーションの設計では、Web標準に従わないHTMLコードを生成してしまうことがあったが、これが改善されている。

　これまでFrontPageあるいはDreamweaverなどのHTMLデザイン・ツールを用いてHTML／XHTMLによる静的なWebサイトの構築を行ってきたWebデザイナーの方には、特に今回で紹介するCSSおよびXHTMLサポートの部分に注目していただきたい。

　また、Expression WebはASP.NET 2.0をサポートしている。これまでVS 2005で行うことが多かったASP.NET Webフォーム（ASPX）のデザインも、通常のHTMLページのデザインと同じように行うことができる。さらにVS 2005と連携することができ、VS 2005を使用する開発者とExpression Webを利用するデザイナーでの共同作業が行いやすいようになっている。

　ASP.NETを用いたWebアプリケーションの開発で、最終的なコード実装にVS 2005を用いるのは当然としても、デザイン時にExpression Webを使うことには、どんなメリットがあるだろうか。ASP.NETサポートによるメリットについてはもちろん後編で詳述するが、前編でも適宜VS 2005との比較を交えて、そのメリットを明らかにしていくので、注目していただきたい。

■Expression Webの画面構成

　Expression Webを起動し、既存のファイルを開く、あるいはファイルの新規作成を行うと、以下のような画面となる。

Expression Web作業画面

左右に各種情報ペインが表示されるため、XGA（1024×768ドット）程度の画面解像度では中央のデザイン・ビューが狭く、やや作業しづらく感じる。ワイド画面で作業すれば快適だろう（※画面内の各番号の項目は以下で説明する）

　フォルダ一覧では、作業中のフォルダ内にあるファイルの一覧が表示される。HTML、ASPX（.aspxファイル）以外にCSSファイル、そしてASP.NETの場合はweb.configファイルなどが表示されている。

　プロパティ・ペインは、のデザイン・ビューに配置されたHTMLタグやASP.NETコントロールのプロパティ（属性）を表示する。プロパティ（属性）の値は、以下のように各入力項目で表示される一覧から選択することも可能である。

プロパティ・ペインで属性値を選択

HTMLタグやコントロールの属性のうち、値がいくつか定義されて選択可能な場合は、その選択肢の一覧がドロップダウン・コントロールで表示される。

　デザイン・ビューがメインとなるペインであるが、下の［デザイン］／［分割］／［コード］というタブで、HTML（あるいはASPX）コードとレンダリング・イメージをどのように表示するかを切り替えられる。画面はやや狭くなるが、［分割］ビューにしておくとデザイン・ビューが上下に分割され、その上部に［コード］が、下部に［デザイン］が表示されるので、以下の画面のようにどのようなコードが生成されているかを確認しながらデザイン作業を行うことができる。

［分割］ビュー

デザイン・ビューが分割されて、上部にHTML／ASPXソース・コードが、下部にレンダリング・イメージが表示される。

　ツールボックスには各種HTMLタグやコントロールのアイテムがたくさん用意されており、ここからアイテムをドラッグ＆ドロップすることで、それらを簡単に配置できる。このような機能は、多くのWebデザイン・ツールでも実現されているが、Expression Webで注目すべきなのは、HTMLタグだけでなく、ASP.NET 2.0の各種コントロールがサポートされていることだ。

ツールボックス

HTMLコード向けには、「タグ」や「フォーム コントロール」といった各種HTMLタグが用意されている。ASP.NETコードに対しては、「標準」「データ」「入力規則」「ナビゲーション」「ログイン」「Webパーツ」というカテゴリで各種ASP.NETコントロールが利用できる。

　このため、Expression Webでは、ASP.NETコントロールをHTMLタグと同じ要領で配置することができる。なお、配置されたタグ／コントロールを選択するとのプロパティ・ペインにプロパティ（属性）が表示されるが、HTMLタグを選択した場合とASP.NETコントロールを選択した場合では、表示方法が異なる点は興味深い（次の図を参照してほしい）。

プロパティ・ペインの表示方法の違い（左：HTMLタグ、右：ASP.NETコントロール）
HTMLタグ（この例では<p>タグ）を選択している場合は、属性／イベントが列挙される。一方、ASP.NETコントロール（この例ではボタン・コントロール）の場合は、プロパティ（属性）がVS 2005と同様のスタイルでカテゴリごとに列挙される。ただしASP.NETコントロールの場合、Expression WebではC#／Visual Basicによるイベント・ハンドラの記述をサポートしていないため、プロパティ・ペインでもイベントが表示されていないことに注意してほしい。

　ASP.NETコントロール、特に使用頻度の高いデータ系コントロールの使い方については後編のサンプルで記す。

　スタイル・ペインはCSSに関する作業を行うためのペインであり、このCSS対応はExpression Webの最大のポイントといえる。しかし、ここでスタイル・ペインでのCSS機能のみを説明しても分かりづらいと思われるので、まずはExpression WebのCSSサポート全般について説明しよう。

INDEX
	［特集］Microsoft Expression Web製品レビュー（前編）
	Webデザイン・ツール「Expression Web」を試してみた
	1．Expression Webの概要と画面構成
	2．Expression WebのCSSサポート
	3．スタイルシート・ファイルを使ってみよう
	4．Expression WebのXHTML対応機能
	［特集］Microsoft Expression Web製品レビュー（後編）
	プログラマーとWebデザイナーの分業を促進するASP.NETサポート
	1．ASP.NETコントロールのサポートとVS 2005との機能差
	2．デザイン・サンプル:SqlDataSourceコントロールの配置
	3．デザイン・サンプル:GridViewコントロールの配置
	4．プログラマーとWebデザイナーの共同作業について

　

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）