プロトタイプの早期作成を支援する“SketchFlow”

　Blend 3に追加された新機能の中で、一番の目玉といえるのが「SketchFlow」だ。SketchFlowは「紙にスケッチを描くように各画面レイアウトを行い、画面遷移を設定することで迅速に“動く”プロトタイプを作成する」というものだ。ボタンやテキストボックスといったUI部品が手書き風の外観になっている点が特徴である。その理由について、マイクロソフトでは「最初から本式のUI部品を配置してしまうと、どうしてもすぐに画面を作り込んでしまいたくなる」という開発者の心情を考慮したとしている。

SketchFlowの手書き風UI部品を配置した画面《クリックで拡大》

　SketchFlowでは、画面遷移の設定だけでなく、画面内の動きをアニメーションとして記録できる。また、場所を指定して吹き出しのコメントを付加する機能も用意されている。なお、コメント機能そのものは、SketchFlowではない通常のプロジェクトでも利用可能だ。

　作成したプロトタイプは、「SKETCHFLOWプレーヤー」と呼ばれるアプリケーション上で確認することができる。

SKETCHFLOWプレーヤーを使ったプロトタイプの確認画面

　SKETCHFLOWプレーヤーを使ってプロトタイプの各画面や動き、開発側からのコメントなどをユーザーと一緒に確認して、その場でフィードバックを書き込める。書き込んだフィードバックをエクスポートしてExpression Blendのプロジェクトに取り込むことで、画面設計者がプロトタイプを修正するという流れになる。これを繰り返すことで、早期に画面要件を固めることができるというわけだ。

　なお、画面遷移図や各画面のスクリーンショットなどを「Microsoft Office Word」文書として出力する機能も備えている。この機能を利用して作成されたWord文書を“画面仕様書”としてすぐに活用することも可能だ。

SketchFlowから出力したWord文書《クリックで拡大》

コードの再利用を促進させる“ビヘイビアー”機能

　「ビヘイビアー」とは、再利用可能なコードをパッケージ化したものである。ビヘイビアーをドラッグ＆ドロップ操作で画面へ配置することで、コードを記述することなくUIにインタラクティブな機能を追加することができる。

　例えば、「MouseDragElementBehavior」を任意のUI部品にドラッグ＆ドロップすると、その要素はアプリケーション実行時にドラッグ動作による移動が可能となる。Blend 3では、MouseDragElementBehaviorを含めて合計8種類のビヘイビアーが標準で用意されている。

　また、オリジナルのビヘイビアーを作成することもできる。「Microsoft Expression Community Gallery」というサイトでは、投稿者のライセンス許諾の範囲内であれば自由に利用可能な、さまざまなビヘイビアーが共有されている。

Microsoft Expression Community Gallery

　なお、ビヘイビアーは「Expression Blend SDK」で提供される機能であるため、ビヘイビアーを使用したアプリケーションでは下記のアセンブリの配布が必要となる。

• System.Windows.Interactivity.dll（ビヘイビアーAPIを提供するアセンブリ）
• Microsoft.Expression.Interactions.dll（8種類の標準ビヘイビアーを提供するアセンブリ）

ダミーデータの作成を容易にする“サンプルデータ”機能

　WPF／SilverlightのUIフレームワークでは、データを視覚化することでUIを作り出すという“データ駆動型の設計思想”を持っている。そのため、これまでは画面作成を行うためには、まず画面で使用するデータを用意する必要があり、開発者が仮のXMLデータを作成して対応することが多かった。

　この点について、Blend 3では「サンプルデータ」機能が追加されており、デザイナーが開発者の手を借りずに画面作成を行うことが可能だ。サンプルデータとして使用できるデータ型は「文字列」「数値」「ブール型」「イメージ」の4種類で、例えば、文字列では名前や住所といったデータの内容も選択することができる。

サンプルデータの編集画面

　ただし、日本語版のBlend 3でもデータの内容は、現時点では英語のみである。これはBlend 3のインストールフォルダの中の「\SampleDataResources\ja\Data」にあるCSVファイルやテキストファイルの中身を書き換えることで日本語化することもできる。なお、書き換える際はUTF-8のエンコーディングで保存しなければ正常に動作しないので、その点は注意したい。

Photoshop とIllustratorからインポート

　これまでBlendが対応していたファイルのインポート（変換を伴う読み込み）は、3DモデルデータであるOBJファイルのみだった。そのため、デザイナーの多くが使用している「Adobe Photoshop」や「Adobe Illustrator」などのファイル形式では、Expression Designなどの別ツールであらかじめ変換しなければならず、非常に手間であった。今回、両アプリケーションの保存形式であるPSDファイルとAIファイルをBlendに直接インポートする機能が追加されたことで、そうした手間が解消されている。

　Blend 3では、Adobe PhotoshopやAdobe Illustratorなどのレイヤー情報を保持したままインポートすることができる。そのためデザイナーは個々の部品ごとではなく画面全体をレイヤー化して作成するだけでよく、効率的な開発が可能になったといえよう。

Adobe Photoshopファイルのインポートダイヤログ《クリックで拡大》。上図のインポートダイヤログにて、各レイヤーのインポートの有無や結合、名前の変更といった調整を行ってから取り込むことも可能だ

コード編集機能も拡充

　Blend 2までは、XAMLコードを直接記述できたが、C#やVisual Basicなどの開発言語のコードを記述することはできなかった。Blendはデザインツールなのだから、必ずしもC#やVisual Basicのコードが記述できる必要はないように思えるかもしれない。しかし、統合開発環境「Visual Studio」におけるWPF／Silverlight向けの機能が不足していることから、実際に開発者もBlendを使用しているケースは少なくない。そのため、Blend 2まではVisual StudioのStandard版が無償でバンドルされていた。

　Blend 3では、C#やVisual Basicのコード編集機能が追加された。このコード編集機能はVisual Studioほどの機能性はないものの、構文自動入力機能である「IntelliSense」がサポートされているため、開発生産性の向上に役立てることができる。なお、今回はXAMLエディターも機能強化され、以前はサポートされていなかったIntelliSenseが追加された。

XAMLエディター（左）、コードエディター（右）《クリックで拡大》

大幅な機能追加と細かな改善の両方がなされたBlend 3

　今回紹介した機能追加以外にも、Blend 3では“前バージョンのユーザーでないと分からないような細かな機能改善”が多数行われている。その量は1.0から2へのときと比べて多くなっており、バージョン3にして、「Blend製品はようやく“1つの完成形”を迎えた」といってもよいだろう。一見すると変わっていないように思える部分でも、ユーザビリティが格段にアップしており、以前の数分の一の時間で同じ作業が完了するといった体験ができるはずだ。

　現時点では、Visual Studio 2008のWPF／Silverlight向けのUI設計はまだまだ機能不足であり、「BlendはWPF／Silverlightアプリケーション開発における必須ツールである」と考える。「デザインツール」という言葉にとらわれず、UI開発に携わるすべての人に、ぜひBlend 3を体験してもらいたい。