第1回　WPF、Blendとは？

この連載ではマイクロソフトの新技術であるWPFを用いたインタラクティブなアプリケーションをExpression Blendというツールを利用して開発する方法について解説していきます。今回は第1回目として、WPFの登場の背景やその利点について説明し、2回目以降のLessonを進めるために必要な開発環境の準備を行います。

ここ数年でWebを取り巻く環境は急激に変化しています。Webコンテンツに期待されるレベルが大変高度になっていること、そして何よりもWebがアプリケーション実行の場として認知されてきていることが大きな要因です。

通常の生活シーンの中で、Webがさまざまな形の「アプリケーション」として当たり前のように利用されるようになってきました。例えば、航空会社のチケット予約サイトでも、これまでの静的なユーザー・インターフェイスからより豊かな表現へと進化し、実際に窓口で予約を行うかのようなインタラクティブなサイトが登場しています。私たちの目に触れるアプリケーションのプレゼンテーション層への期待レベルも、コンテンツと同様に非常に高まっているのです。

このように、もはや「機能を提供するだけで満足された時代」は終わろうとしています。ユーザーによりよいエクスペリエンスを提供するためには、機能だけではなく「見栄えを中心としたプレゼンテーション領域」や「そもそも開発するアプリケーションが達成するべきゴールはなんなのか、といったビジネス領域」も合わせてバランスよく検討されている必要があるのです。

Webが「アプリケーション実行の場＝プラットフォーム」となりつつあることにより、リアルな世界と同様にWebの世界でもこれまで以上によりよいエクスペリエンスの提供が求められています。また、エクスペリエンスを実現するための開発環境についても、同様に進化を求められるようになりました。

このような流れを受け、マイクロソフトはWindows Vistaから標準搭載される.NET Framework 3.0において、WPF（Windows Presentation Foundation）を投入しました。

WPFはWindows Vista世代での新しいグラフィックエンジンであり、これまでのwindows formとは異なり、完全にベクターベースのUI（ユーザーインターフェイス）を提供しています。そのほか強力なテキスト・ハンドリングや3Dのサポート、それを支えるGPU（グラフィックスプロセッシングユニット）によるレンダリングが大きな特徴となっています。

WPFではレイアウトやインタラクションをXAML（ザムル）と呼ばれるXMLベースの記述言語で構築する仕組みとなっており、ロジックはASP.NET同様C#やVB.NETなどのCLR対応言語でコードビハインド（注1）で実装することになります。

XAMLにはレイアウトだけでなくベクターグラフィックスも含めることができるため、グラフィックアセットも含めたデザイン要素を集中的に作業・管理することが可能となります。また、XAMLとコードビハインド構造によって、デザイナーとデベロッパーがしっかりと分業できるワークフローの構築を可能にし、Webアプリケーション開発生産性を高めることを実現できるのです。

XAMLの登場によってこれまでよりもデザインとコードの依存性が低くなるとすれば、そのXAMLのための編集環境が必要となります。マイクロソフトのIDE（統合開発環境）である「Viual Studio」でも簡単なXAMLの編集を行うことはできますが、複雑にデザインされたアプリケーションを編集するのには荷が重い状態です。そこで登場したのが「Expression Blend」になります。WPFでは、Expression BlendをXAMLを用いたユーザーインターフェイスの構築に、Visual Studioをロジックコードの実装のために、使い分けていくことになります。

次に、実際の開発に入る前にツールの準備と環境構築について説明していきます。

1．.NET Framework 3.0をインストールする

実はExpression BlendそのものがWPFで構成されているため、利用にはWPFを含む.NET Framework 3.0のインストールが必須となります。いずれにしても実行時にはないと先に進みませんので、XPを利用している人はインストールしておきましょう。Windows Vistaであれば.NET Framework 3.0は最初からインストール済みです。Windows Updateを経由してインストールするのが一番簡単なやり方ですが、Expression BlendのインストールCD-ROMには.NET Framework 3.0が同梱されていますので、そちらでインストールしてもよいでしょう。その時点で公開されているセキュリティパッチなどの修正モジュールも合わせて適用しておいてください。

2．Visual Studio 2005のインストール
Visual Studio 2005をインストールします。執筆時点でSPとしてSP1、Vista用のアップデートモジュールが出ていますので環境に応じて導入しておきましょう。Visual StudioにはたくさんのEditionがありますが、WPF開発の場合Expression Blendに同梱されているStandard Editionで十分でしょう。体験版を利用したい人はProfessional Editionのものが用意されているのでそちらを使ってください。

・Visual Studio 2005 SP1
http://www.microsoft.com/japan/msdn/vstudio/downloads/sp/vs2005/sp1/
・Visual Studio 2005 Service Pack 1 Update for Windows Vista
http://www.microsoft.com/downloads/details.aspx?FamilyId=90E2942D-3AD1-4873-A2EE-4ACC0AACE5B6&displaylang=ja
・Visual Studio 2005　評価版入手
http://www.microsoft.com/japan/msdn/vstudio/get/

3．Visual Studio 2005 extensions for .NET Framework 3.0のインストール
WPFとWCFをサポートできるようになる機能拡張になります。執筆時点でNovember 2006 CTPであり、該当する機能がVisual Studio 2008で正式にサポート予定であることから、これ以上のアップデートはないと思われます。

この機能拡張をインストールすることで：

■XAML インテリセンス サポート
・C#等のコード・プログラミング同様に、インテリセンスによるコーディング・サポートが追加されます。

■Windows Presentation Foundation と Windows Communication Foundation 用のプロジェクト・テンプレート
・この機能により、Visual StudioのソリューションとしてWPF開発を開始することができます。作成したソリューションやプロジェクト2はもちろんそのままBlendでも開くことができますので、相互開発環境が整います。

■Windows SDK ドキュメントの統合
・Windows SDKを利用する場合、ヘルプドキュメントなどの呼び出しがVisual Studioに統合されます。

■WPF ビジュアル・デザイナー(Visual Designer for Windows Presentation Foundation) のプレビュー
・Blendのように複雑なレイアウトは扱えませんが、Visual StudioでもWYSIWYG（ウィジウィグ）でUIを構築できるデザイナーがサポートされます。これはWindows Form開発におけるデザインモードとほぼ同じものです。デベロッパーがレイアウト した簡易なUIをデザイナーが完成させたり、デザイナーが構築したUIにビジュアルを確認しながら機能をコードで追加していくような利用方法が考えられます。

以上の4つの機能がインストールされます。Expression Blendは単体でC#などのプログラミング部分を取り扱えないので、事実上Visual Studioのインストールは必須であると考えてよいでしょう。

4．Expression Studioのインストール
最後にExpression Blendなどをインストールします。ここまでいろいろと手間がかかりますが、後々のことを考えると最初の段階でしっかりとVisual Studioのセッティングをしておいた方が楽になりますので、がんばって設定を済ませてください。