インタラクティブなアプリケーション・デザインツール
Microsoft Expression Blend 2
マイクロソフト
Expression Blend 2は、マイクロソフトが、デスクトップアプリケーションのプレゼンテーション層を強化するために開発した技術であるWPFや、次世代のRIA技術として脚 光を浴びているSilverlightに対応したアプリケーションの外観を設計・開発するためのデザインツールだ。Expressionシリーズのツール は、主にデザイナーを対象としたデザインツールであるが、ユーザーインターフェースやユーザーエクスペリエンスに興味のあるプログラマーにとって、新たに 利用する価値のある製品と言えるだろう。
Microsoft Expression Blend 2パッケージ
レイアウト、アニメーションの直感的な作成
Blendでは、画面要素の配置、変更といった操作を画面上で直接行うことで、視覚的にアプリケーションインターフェースを構築できるのが大きな特徴だ。WPFやSilverlightは、画面のレイアウトをXAML(Extensible Application Markup Language)と呼ばれるXMLベースの言語で定義しているが、Blendの画面上で画面要素を配置、変更すれば、XAMLも自動的に作成される。ボタンやテキストボックス等の画面要素はそれぞれ色、大きさといったプロパティを持っており、これらの値をタイムライン上で変化させることで、細かい動きをするようなアニメーションを容易に作成できる。

アニメーションの作成パネル。タイムライン上にキーフレームを追加していきアニメーションをつくるというスタイルは、AdobeのAfter EffectsやPremiereに似ている
Blend2で追加された新機能
次にExpression Blend2で搭載された新機能について紹介しよう。今回最も特筆すべきは、Silverlight1.0に対応した事だ。Blend2では、Silverlight1.0のアプリケーション開発に必要なJavaScriptをBlend上で記述し、ビルドを行うことができるため、Visual Studioを使わずBlend2だけで開発することも可能になっている。

新規プロジェクト作成時にSilverlight1.0が選択できる

JavaScriptもBlendの画面上で記述できるので、シームレスに開発を行うことができる
Blend1ではベクターアニメーションをつくるにはXAMLを手入力するしか方法が無かったが、Blend2では画面上で動作を確認しながらベクターアニメーションを作成できるようになったので、開発の効率が上がった。
また、アニメーションのイージング(動きの緩急)をつけるのに、ベジェ曲線を使って視覚的に設定できるようになったのも大きな改善点だ。

イージングの設定パネル。曲線を視覚的に見せることでより自然でわかりやすいアニメーションがつくれるようになっている
作業効率という面では、ビューを分割して画面とXAMLの両方を表示することができるようになったこと、レイヤーツリーでオブジェクトを選択するとXAMLの対応箇所がハイライト表示される点が挙げられる。これらの機能は一見すると地味だが、コードとデザインの両方を確認しながら作業をしたい場合に開発を強くサポートする機能だ。

デザインとXAMLの分割表示状態。XAMLを変更するとリアルタイムにデザインに反映される。その逆の場合も同様
Visual Studioとの連携
画面のレイアウトはXAMLで定義するのだが、画面遷移やボタン押下時の処理はC#等のプログラム言語で記述する必要がある。Blend2では、C#の記述を行うことはできないがVisual Studioとの連携もサポートされているので、Blend側でボタンクリックの定義を行えば、C#にボタンクリック時の処理を入れるためのイベントハンドラを自動的に追加してくれる。
また、Blend、Visual Studioのどちらかでコードの変更を行った場合、自動的に変更点の連携を行ってくれるため、スムーズに開発を行うことができる(尚、これに必要なVisual Studio 2008 Standard Editionは、Expression Studio 2およびExpression Blendに同梱されている)。
筆者の所見
現時点では画面上の操作でWPFやSilverlightの機能をカバーできていない部分もあるため、実際の開発においてはXAMLを手入力しなくてはいけない場合がある、というのが正直な感想だ。
Blend1に比べて確実に機能はブラッシュアップされてきており、今後もさらに進化していくことは現在公開されているBlend2 SP1のPreview版からも見て取れる(執筆時点での最新版はBlend2 SP1 Preview。こちらはSilverlight2 RCのプロジェクトにも対応している。Blend2購入者はBlend2 SP1正式版へ無償でアップグレードできることがアナウンスされている)。
Blendは.NET開発者、Webデザイナーの両方から見ても、お互いの領域に足を踏み入れる部分があり、多少抵抗感を覚えるかもしれない。しかし、マイクロソフトが今最も力を入れて普及を後押ししており、今後WPFを用いたWindowsアプリケーションや、Silverlightを使用したサイトも増えていくことだろう。なにより、昨今のRIA開発において、開発者とデザイナー間でのより緊密な協力体制は必須と考えられ、相互に歩み寄る事が必要である。大きな市場が開けていくことを考え、この新しい開発環境に触れてみてはどうだろうか。
(株式会社セカンドファクトリー 渡邉大翼/落合健太郎)
■主なシステム要件
・Microsoft Windows XP Service Pack 2またはWindows Vistaオペレーティングシステム
・1GHz以上のプロセッサを搭載したPC
・512MB以上のRAM
・350MBのハードディスク空き容量
・Windows Vista Display Driver Model(WDDM)ドライバ、128MB以上のグラフィックRAM、Pixel Shader 2.0のハードウェアにおけるサポート、1ピクセルあたり32ビットの色深度を備えたMicrosoft DirectX9.0グラフィックスのサポート
・DVD-ROMドライブ
・1024×768以上の解像度、24ビットカラー表示をサポートするモニタ
・実際の要件および製品の機能は、システム構成およびオペレーティングシステムに応じて異なる可能性があります。
注:Microsoft Visual Studio 2008 Standard Editionを含みます。システム要件については、
http://www.microsoft.com/vstudio/にアクセスしてください。
■評価版ダウンロード先
http://www.microsoft.com/japan/products/expression/try-it/default.aspx