PROJECT KySS(プロジェクト・キッス)。 四国のSOHO。薬師寺 国安(フリーWebプログラマ)と,薬師寺 聖(デザイナ,個人事業所自営,http://www.SeinDesign.net)によるコラボレーション・ユニット。XMLに関する記事や著書多数。両名とも,Microsoft MVP for Windows Server System - XML (Oct 2003-Sep 2008) http://www.PROJECTKySS.NET

 本稿で利用するExpression Design,Expression BlendをはじめとするMicrosoft Expression Studio製品の全機能をインストール後60日間にわたって利用できる「Microsoft Expression評価版」をマイクロソフトのExpression Studioサイトからダウンロードできます。Expression Design/Expression BlendのサポートOSは,Windows Vista,Windows XPService Pack 2です。Windows XP Service Pack 2の場合はインストール前に .NETFramework 3.0をインストールしておく必要があります。Expression Blendで作成したコードを編集するには,Visual Studio 2005がインストールされている必要があります。

 Microsoftがこの夏に提供を開始した「Microsoft Expression Studio」(注1)は,同社にとって初めてのデザイナ向け製品である。Microsoft Expression Studioには,この特集のタイトルにもなっているベクトル・ベースのデザイン・ツール「Expression Design」のほかに,リッチ・コンテンツやGUIの制作ソフト「Expression Blend」,Webサイト作成ソフト「Expression Web」,素材管理ソフト「Expression Media」が含まれる。それぞれ単独で使うほか,連携させて使うこともできる。

 MicrosoftはExpression Studioの発表に際してWebコンテンツおよびWindowsアプリケーション制作におけるデザイナとエンジニアのコラボレーションを支援することを表明しており,そのための仕組みを用意している(後述)。今後,Expression Studioが普及すれば,デザイナだけでなくエンジニアがExpression Studioのツールに関与する機会が増えてゆくことは間違いない。Expression Studioでどんなことができるようになるのか,今のうちから知っておいても決して早過ぎることはない。

 この特集では,アプリケーション制作における最上流工程において利用されるベクトル・ベースのデザイン・ツールExpression Designについて,デザイン部品やイラストといった「グラフィックスの作成」,および他ツールとの連携に的を絞ってその利用価値を紹介していく。

 初回の今回は「Expression Design」が制作開発業務に与える影響について述べる。第2回目で基本的な図形の作図手順を紹介する。第3回目では,その図形をExpression Blendと統合アプリケーション開発環境「Visual Studio」で制御してみる。第4回目ではExpression Blendで簡単なアニメーションを作成し,第5回目でIllustratorの既存画像データを利用する方法について取り上げる。

Expression Designはグラフィックスのベクトル化を進める

 絵や図の表現方法には,線や座標で表現するベクトル・データと,点で表現するビットマップデータがある。以前からVMLやSVGといったベクター・グラフィックスの形式はあるが,ブラウザ限定であったりビューワのサポートが中止となったりで,普及しているとは言い難い。

 WebアプリケーションやWindowsアプリケーションでは,いまなおGIF,JPEG,BMPといったビットマップ画像が多く使われている。次のような図はベクトル・データに適しているが,ビットマップ画像で展開されていることが少なくない。

(1) アプリケーションのデザイン部品やイラスト

 デザインされたボタンや背景画像。ロゴ,キャラクタ,アウトラインの明確なイラスト。地図,案内図,平面図,色の値や座標値自体を検索キーとした類似図形の検索などに利用できる図。

(2) 時間経過やイベント処理に伴って変化するコンテンツの素材

 アニメーションの元となる素材。ボタンクリックや選択肢からの選択といったイベント処理によって色や形状や表示位置が変化する画像。ただし,WebサイトのGUIやコンテンツ作成にはFlashが広く用いられている。

(3) データベースとの連動処理が必要な図

 公開目的のWebマニュアルにおけるテクニカルイラスト,設計図・部品図等。Webサイト掲載取扱説明書やカタログ中の検索可能な図。バックエンドのデータベースと連携処理する必要がある図。

(4) 数値データからプロットできる図やグラフ

 プログラムによって数値データから自動生成して表示/更新する画像データ。数値を可視化することにより,インパクトや分かりやすさが高まり,共通認識が持ちやすくなるもの。たとえば,販売管理,在庫管理,災害規模や貯水率や各種統計値の表示。あるいは音のデータを絵に置き換えるなど,異なるメディアの情報を視覚化したもの。

 Expression Designを使えば,この中の, (1)(2)と(3)の一部の画像を作成できる。さらに,(4)の実現可能性も出てくる。その理由は,Expression Design がサポートするベクトル・ベースのデータ形式にある。

Expression Designの最大の特徴は「XAML」にある

 Expression Designで作成したデザイン部品やイラストのデータは,Expression Design固有のファイル形式(拡張子は.design)だけでなく,はたまた従来のビットマップ形式だけでもなく,Microsoft独自仕様のXMLである「XAML(ザムル,Extensible Application Markup Language)」という形式でエクスポートできる(拡張子は.xaml)。

 XAMLテキスト・ファイルは,ビルドなしで,Internet Explorerの画面上に直接表示できる。これは,Loose XAMLと呼ばれている(図1)。

図1●Expression Designで作成したXAMLをIE7で表示。XAMLソースをテキスト・エディタで開いた(この絵の作図方法は次回解説する)
図1●Expression Designで作成したXAMLをIE7で表示。XAMLソースをテキスト・エディタで開いた(この絵の作図方法は次回解説する)

 図1の通り,XAMLは,XMLベースのテキスト・ファイルなので,テキスト・エディタで開いて見ることができ,長期蓄積にも適している。また,従来のXMLデータを処理するプログラミング手法は, XAMLに対しても有効だ。XMLであるから,当然,図を構成する要素の内容や属性値自体が,データベースとしての価値を持つ。前述の(1)にあげたように,色の値を検索キーとした類似図形の検索も可能になる。たとえば,要素の"Fill"属性値が「#FF9FCBFC」であるところの絵を検索する,といったようなことだ。面積計算まで実装すれば,赤の部分の多い絵,青の部分の多い絵といった検索も可能になるだろう。

 さらに,XAMLデータは,前述の(2)にあげたように,イベント処理によって制御できる。前述の(4)も,VMLやSVG同様, プログラムでXAMLのXMLツリーを構築することにより可能となる。

 XAMLは,ブラウザで表示するだけでなく,次のようなアプリケーションのGUIデザインに利用することができる。これらのアプリケーションがデザイン性の優れたものになり,もっと分かりやすく使いやすく魅力的になる。それがXAMLに今いちばん期待されていることだ。

・WPF

 WPFはWindows Presentation Foundation の略で,Vista対応のグラフィックスのシステム。WPFアプリケーションは,デザインをXAMLで,ロジックをVisual BasicやC#等で開発する,.NET Framework3.0対応のWindows アプリケーション(図2)。拡張子は.exe。本特集で取り上げるのは,このWPFアプリケーションだ。

・XBAP

 XBAP(エックスバップ)は,XAMLブラウザアプリケーションの略。機能制限のあるWPFアプリケーション。HTMLや拡張子.xbapのファイルから成る。IE7では,「ツール/セキュリティ/レベルのカスタマイズ」ウィンドウで,XBAPを有効にするかどうかを設定できる。

・Silverlight

 Microsoftのブラウザ用プラグインSilverlightで動作する,Webアプリケーション。クロスプラットフォーム・クロスブラウザ対応のRIA(Rich Internet Application)(注2)。HTMLやXAML,プログラム・ファイル(開発言語によって拡張子は異なる)から成る。

 WPFアプリケーション開発においては,Expression Designで作成するXAMLは,コンテンツの素材やGUIを構成するためのデザイン部品として位置付けられる。そしてExpression Blendでデザインを仕上げ,Visual Studioのような開発ツールを用いて,処理を追加していくという方法がとられる。Visual Studioではロジックを「コードビハインド」として実装できる。

図2●Expression Designで作成し,Expression Blend上でレイアウトしたXAML図形を,Visual Studioから制御するサンプル(処理方法は3回目で解説)
図2●Expression Designで作成し,Expression Blend上でレイアウトしたXAML図形を,Visual Studioから制御するサンプル(処理方法は3回目で解説)
[画像のクリックで拡大表示]