Tweet

プロトタイプ機能を備えた
“本物”のデザイナーのツール

Expression Blend 3＋SketchFlowを使ってみた

Expression Blend 3の主な新機能6つ

　このExpression Blend 3は、前バージョンのExpression Blend 2から大きな進化を遂げています。すべての新機能を解説すると、誌面が足りなくなってしまうので、ここでは特徴的なものに絞って紹介します。

☆ 【1】アイテムを効率的に管理する［Assets］パネル

　［Assets］パネルという新しい機能パネルが追加されました。［アートボード］（デザイン画面）に追加できるさまざまな要素（アセット）は、この［Assets］パネルの中に機能ごとに分類されているため、以前に比べて目的のアイテムを探しやすくなりました。

図6　新しく追加された［Assets］パネル。左側のペインで選択された分類のコントロール一覧が右側に表示されている

☆ 【2】画像エフェクトのサポート

　Sliverlight 3で追加された「ピクセルシェーダー」エフェクトをExpression Blend上でも設定できます。設定方法も簡単で、［Assets］パネルの［Effects］の中に標準で用意されている2種類のエフェクトを直接アートボード上の任意のオブジェクトにドラッグ＆ドロップするだけです。

図7　［Assets］パネルからエフェクトをドラッグ＆ドロップして追加（画像をクリックすると、拡大します）

　図7のように、“ぼかし効果”を追加するBlurEffectと“影付き効果”を追加するDropDownEffectが使用可能です。

☆ 【3】Adobe Photoshop/Illustratorのファイルをインポート可能に

　Photoshop形式（.psd）ファイルや、Illustrator形式（.ai）ファイルを、レイヤ構造を維持したままExpression Blend上のプロジェクトにインポートできるようになりました。これは、手慣れたツールを併用したいデザイナーにとって、特に便利な機能強化といえます。

☆ 【4】ビヘイビア（振る舞い）でよりコードいらずに

　Expression Blend 3では「ビヘイビア」と呼ばれる機能により、プロパティ設定だけでさまざまなアプリケーション動作が実装可能になりました。［Assets］パネルの［Behaviors］の中には、8種類の標準ビヘイビアが格納されているので、これらを［アートボード］上のコントロールにドラッグ＆ドロップすることで、コードを記述することなく「振る舞い」を追加できます。

図8　［Assets］パネルから標準のビヘイビア一覧を表示

　代表的なビヘイビアとしては、ストーリーボードを制御する「ControlStoryboardAction」やプロパティ値を変更する「ChangePropertyAction」などが挙げられます。それ以外にも例えば、画面上のオブジェクトに「MouseDragElementBehavior」を追加するだけで簡単にマウスドラッグ動作を実現できるなど、面白いビヘイビアが用意されているので、一通り試してみていかがでしょうか。

☆ 【5】コード編集機能が大幅にパワーアップ

　開発ツールとして重要な点である各種コードの編集機能が大きくパワーアップしました。今回のバージョンから、各種イベントハンドラの実装やカスタムロジックの実装の際にExpression Blend 3だけでもVisual Studioで行うときと同様の編集補助機能を持ったコードビハインド編集が可能となりました（図9）。

図9　Visual Studio並のコードビハインド編集機能を実現

　また、XAMLやコードビハインド編集時のインテリセンス機能も搭載されています（図10）。

図10　XAML上でのインテリセンス起動例。よりスムーズなXAML編集が可能となる

　これまでExpression Blendというと、「デザインやスタイリングのためのツール」というイメージが強かったと思いますが、Expression Blend 3では単体の開発ツールとしても十分に活躍できるようになりました。

☆ 【6】ツールとしての操作性の向上

　Expression Blend自体の操作性も多岐にわたり強化されています。

• ドッキング機能の強化
  すべての操作パネルのドッキング（または、フローティング）位置を自由に設定可能
• ワークスペース機能
  使用用途によって最適なビューを選択できるようにワークスペースの切り替えやカスタマイズが可能に
• クリップボード経由のイメージ利用
  クリップボードから直接イメージをコピー＆ペースト可能になったので、Expression Blend 3上でより画像ファイルを取り扱いやすくなった
• ユーザーコントロールの編集機能
  例えば、ユーザーコントロールの修正時に従来のようにリビルドをしなくてもアートボード上に反映可能に。また、配置したユーザーコントロールをダブルクリックすることで直接編集が可能
• TFSサポート
  TFS（Team Foundation Server）と連携したチーム開発の中で、Expression Blend 3を利用可能

プロトタイプ開発を促進するSketchFlowとは

　SketchFlow（スケッチフロー）機能はExpression Blend 3における最もセンセーショナルな追加機能といえます。

SketchFlow Overview < Product Information | Microsoft Expression via kwout

　しばしばソフトウェアの開発プロセスでは、アプリケーションの動作や機能のイメージを「紙芝居」形式でステークホルダーに提示する必要に迫られます。こんなとき、従来はPowerPointなどのプレゼンテーションツールを用いたり、ときにはVisual StudioなどのRAD（Rapid Application Development）ツールを通して簡単なプロトタイプを作ったりしていたと思います。

　ところが、Expression Blend 3では、SketchFlow機能を通して訴求力のある紙芝居の作成作業を強力にサポートします。次ページでは、SketchFlowの作成手順に沿って特徴的な機能を紹介します。

2/3

INDEX
Expression Blend 3＋SketchFlowを使ってみた プロトタイプ機能を備えた“本物”のデザイナーのツール
	Page1 Silverlight 3とExpression Blend 3の正式版がリリース Expression Blend 3評価版をインストール
	Page2 Expression Blend 3の主な新機能6つ プロトタイプ開発を促進するSketchFlowとは
	Page3 Expression Blend 3は“本物”のデザイナー向けツール

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード