特集

Expression Blendで始めるWPFアプリケーション(前編)

Vista時代のWindowsアプリケーション・デザイン・ツール

グレープシティ株式会社 八巻 雄哉
2007/03/30

Page1 Page2 Page3 Page4

 Windows Vistaの大きな目玉ともいえる.NET Framework 3.0。その中でも特に開発者の目を引く機能がWPF(Windows Presentation Foundation)だ。

 WPFにより、これまでのスタティックなグラフィックが中心だったWindowsアプリケーションに、容易にアニメーションや3Dの効果を取り入れられるようになる。もちろん、そのようなリッチなUI(ユーザー・インターフェイス)の構築はスタティックな画面よりも手間がかかるが、WPFではこのUI部分をアプリケーション本体から完全に独立して構築できるようになっている。これは、用途に合わせたさまざまな外部ツールが利用可能であるということを意味する。そしてその代表的なツールが、本稿で取り上げる「Microsoft Expression Blend」(以降、Expression Blend)だ。

 このまったく新しいツールとWPFによりWindowsアプリケーションの構築方法はどのように変わるのか。それを見る前に、まずはWPFを利用したアプリケーションと、その実行環境/開発環境についてまとめてみよう。

WPF(Windows Presentation Foundation)とは?

 WPFは、.NET Framework 3.0で追加された新しいグラフィック・サブシステムだ。2D描画はGDI、3D描画はDirectXといったように、それぞれ異なっていた描画テクノロジを1つに統合し、XAML(eXtensible Application Markup Language:ザムル)と呼ばれるXMLベースの宣言的なUI記述言語を採用することで、「あらゆる種類のアプリケーションUIを統一された手法で簡単に構築できる」というのが大きな特徴だ。

 グラフィック・サブシステムと聞くと、開発者として具体的にどのような形でその恩恵を受けられるのかを想像しにくいが、いままで.NETで提供されてきた、

  • Windowsフォーム・アプリケーション
  • ASP.NET Webアプリケーション

に加え、

  • WPFアプリケーション

という種類のアプリケーションを作成することができるようになったととらえれば、イメージしやすいだろう。

■WPFのアプリケーション形態

 そしてWPFアプリケーションには、以下の2つの形態がある。

(1)Windowsアプリケーション

  • スタンドアロンで実行
  • WPFのすべての機能が使用可能

(2)XAMLブラウザ・アプリケーション(XAML Browser Application、XBAP)

  • Internet Explorer内に表示
  • インストール作業不要
  • セキュリティ・サンドボックス上で実行されることによる機能制限(ClickOnceセキュリティ設定が部分信頼の場合)

 Windowsアプリケーションの形態は、これまでのWindowsフォーム・アプリケーションとほぼ同じイメージでとらえてよいだろう。スタンドアロンで実行され、インストーラやClickOnceテクノロジを使ってクライアント・マシンへ展開することができる。

 となると、XAMLブラウザ・アプリケーションの方は、「ブラウザ・アプリケーション」という名称からASP.NETアプリケーションに近いものなのかと思われる方もいるかもしれないが、そうではない。

 実は、XAMLブラウザ・アプリケーションとはブラウザ上で動作するWPFアプリケーションであり、これはオンライン専用のClickOnceアプリケーションなのである。そのため、WPFのWindowsアプリケーションとXAMLブラウザ・アプリケーションは、基本的にほとんどのコードを共有することができる。つまりいったんWPFアプリケーションを作ってしまえば、それをWindowsアプリケーションにするのもXAMLブラウザ・アプリケーションにするのも、それほど大変な作業ではない。

 異なるのは、XAMLブラウザ・アプリケーションはInternet Explorer内に表示され、セキュリティ・サンドボックス上で実行されることによる機能的な制約があるということだけだ。そのため、ブラウザ・アプリケーションといえどもInternet Explorer専用であり、当然ながらアプリケーションを利用するクライアント環境には.NET Framework 3.0がインストールされている必要がある。

 ほかの形式のアプリケーションとWPFアプリケーションの位置関係は、下記の図のようにイメージしていただくと分かりやすいかと思う。


WPFアプリケーションの位置付け
WPFアプリケーションには、Windowsアプリケーションと、Internet Explorer上で動作するXAMLブラウザ・アプリケーションがある。“WPF/E”アプリケーションは、専用プラグインがインストールされたブラウザでのみ動作するWPFベースのアプリケーションである。“WPF/E”については「Insider's Eye:“WPF/E” vs. Adobe Flash、ガチンコ対決!」を参考にしていただきたい。

■WPFアプリケーションの実行環境

 .NET Framework 3.0がWinFXと呼ばれていた時期に、それがWindows Vista向けのフレームワークとして提供される予定だったためか、はたまたWindows VistaのFlip 3Dなどに代表される3Dを用いたUIの影響なのか、どうもWPFはWindows Vistaでしか利用できないと勘違いされているところがあるようだ。

 しかしながら、.NET Framework 3.0はWindows XPとWindows Server 2003向けにも提供されているため、WPFはWindows Vista専用などではない。Windows XPでも3Dなどの一部の機能が使えないといった制限ももちろんない。つまり、皆さんが使っているOSが2001年に発売されたWindows XPよりも古いOSでなければ、いますぐにでもWPFアプリケーションを体験できるわけである。

■WPFアプリケーションの開発環境

 では肝心の開発環境はというと、WPFアプリケーションの実行環境である.NET Framework 3.0が正式にリリースされているのに対し、開発環境の方はまだ整っていないというのが現在の状況だ。

 2007年3月現在、マイクロソフトが提供しているWPFアプリケーション開発のためのツールは以下のとおりだ。

  • Visual Studio 2005 + Visual Studio 2005 Extensions for WCF, WPF (英語版)
  • Visual Studio Code Name “Orcas” - March CTP(英語版)
  • Microsoft Expression Blend ベータ 1

 Visual Studio 2005 Extensions for WCF, WPFは、Visual Studio 2005(以降、VS 2005)にWPFアプリケーションのためのプロジェクト・テンプレートとWPFビジュアル・デザイナを追加してくれるエクステンションだ。ただし、これは次期Visual Studioであるコードネーム“Orcas”に含まれる予定の機能をいち早くVS 2005で体験してもらうためのプレビュー版であり、英語版のみの提供となっている。

 また、そのコードネーム“Orcas”のプレビュー版もやはり英語版のみとなるがMarch CTPというバージョンが提供されており、このバージョンからWPFアプリケーションのためのプロジェクト・テンプレートとWPFビジュアル・デザイナが含まれている。いずれにしても、WPFアプリケーション開発に正式に対応したVisual Studioは、コードネーム“Orcas”の正式リリースを待たねばならない。

■Microsoft Expression Blend

 一方、これまでのWindowsフォーム・アプリケーション用には存在しないツール、Expression Blendがベータ版ではあるがすでに提供されている。Expression Blendは、WPFアプリケーションのUIをデザインするために用意されたデザイナー向けのツールだ。

 冒頭でも少しだけ述べたが、WPFアプリケーションではXAMLと呼ばれるXMLベースの言語を使ってUIを構築する。これは、ASP.NETアプリケーションでいうところの.aspxファイル部分の記述と概念的に近く、UIデザインのみを記述し、プログラム・コードと分離できるようになっている。つまり、Webアプリケーションの世界では比較的に一般的に行われているデザイナーと開発者の分業が、Windowsアプリケーションでも可能となるのだ。

 さて、本記事のタイトルは「Expression Blendで始めるWPFアプリケーション」である。ということは、本記事の内容はデザイナー向けの内容となっているのかというと、まったくもってそうではない。

 Expression Blendは、基本的にはデザイナー向けのツールという位置付けになってはいるものの、デザイナーだけが使うにはもったいないほど開発者にとっても魅力的なツールなのだ。また、WPFの特徴の多くがデザインという要素と大きく関係していることもあり、WPFを紹介するにもVisual StudioよりExpression Blendを使った方がよりWPFの良さを理解してもらえるだろう。開発者もまずはExpression Blendを使ってWPFアプリケーション開発を体験してみるのが、現時点では最も良い方法だと筆者は判断した。

 少々前置きが長くなってしまったが、本記事では、開発者、デザイナーにかかわらず、「とにかくWPFアプリケーションを作ってみたい」「でもどうすればいいのか分からない」と思われている方々を対象に、Expression Blendを使ったWPFアプリケーションの作成方法、ならびにWPFの特徴などを2回にわたりお送りする。

 前編となる今回は、まずExpression Blendの使い方の学習も兼ね、簡単なアプリケーションの作成方法を紹介する。そして後編では、Windowsフォーム・アプリケーション開発者の視点から見たWPFの特徴を紹介する予定だ。

Expression Blendのインストール

 とにもかくにも、WPFの世界に足を踏み入れるためにはまず.NET Framework 3.0が必要だ。Windows Vistaには初めから.NET Framework 3.0がインストールされているので問題ないが、Windows XPの場合、以下のサイトから.NET Framework 3.0再頒布可能パッケージをダウンロードしインストールしておく必要がある。

「Microsoft .NET Framework 3.0 再頒布可能パッケージ」のダウンロード

 日本語版であるExpression Blendベータ1は以下のサイトからダウンロードできる。

「Microsoft Expression Blend ベータ 1」のダウンロード

 なお、あまり問題にならないとは思うが、Windows Server 2003はExpression Blendのシステム要件には含まれていない。

 インストール後、最初に起動したときにプロダクト・キーの入力を求めるプロンプトが表示されるが、何も入力しなくとも30日間使用することができる。以下のページに記載されているプロダクト・キーを入力すると、試用期間は180日間に延長される。

Microsoft Expression Blendのプロダクト・キー(「インストール方法」の項に記載されている)

 なお、日本語版の最新バージョンはベータ1となっているが、英語版はすでにRelease Candidate(RC版)がリリースされている。

「Microsoft Expression Blend Release Candidate(英語版)」のダウンロード

 このRelease Candidateでは不具合の修正といくつかの機能改善、および付属のサンプルの変更などが行われているが、本記事では日本語版のベータ1を使用する。

 最後に、必須ではないが無償のExpress Editionでよいので、VS 2005をインストールしておくことをお勧めする。詳細は後述するが、Expression BlendにはC#やVisual Basicのコードを記述する機能がないため、コードを記述する際にはVS 2005があると便利だ。VS 2005のExpress Editionは以下のサイトからダウンロードできる。

Visual Studio 2005 Express Edition

 

 INDEX
  [特集] Expression Blendで始めるWPFアプリケーション(前編)
  Vista時代のWindowsアプリケーション・デザイン・ツール
  1. WPFのアプリケーション形態
    2. Expression Blendの画面構成
    3. WPFでHello, World!!
    4. コードを書かずにHello, World!!
 
  [特集] Expression Blendで始めるWPFアプリケーション(後編)
  WindowsアプリケーションのUIはWPF+Blendでこう変わる
    1. 組み合わせて使うWPFのコントロール
    2. ベクタ・グラフィックスで伸縮&変形自在
    3. スタイルを使ってプロパティ設定を簡単共有
    4. コントロール・テンプレートを使えばコントロールの外観は自由自在


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間