Expression Blend 4の新機能

  • Article

皆様こんにちは！

今、このBlogを書いているマイクロソフト新宿本社の5FセミナールームA/Bでは、まさにExpression 4 発売記念セミナーが実施されています。そこで・・・といいますか、ちょうどタイミングがあってしまったのですが(笑)、このBlogでも、Expression Blend 4の新機能について、簡単に纏めておきたいと思います。

Expression Blend 4の特徴

Expression Blend 4は、以下のような特徴を持っています。順に解説していきましょう。

① RIA開発に不可欠なプロトタイプを迅速に作成できるSketchFlow

② プロトタイプ用のダミーデータを簡単に用意できるサンプルデータ

③ コードを書かずにインタラクションを制御できるビヘイビア

④ PhotoshopとIllustratorファイルのインポート

⑤ Visual Studioとの高い連携性

RIA開発に不可欠なプロトタイプを迅速に作成できるSketchFlow

このSkechFlowを使えば、、画面を線でつなぐだけで、画面遷移を定義できます。ペーパープロトタイピングのような専用コントロールが用意されています。また、注釈やコメントをつけられるビューワーが存在し、これによってフィードバックを受け取りデザイン・開発に反映させることが可能です。更に、画面やSketchFlowマップによる遷移等をWord文書に出力できますので、情報を追加して、マニュアルや要件定義書として纏めることも可能です。

image

image

RIA開発に不可欠なプロトタイプを迅速に作成できるSketchFlow

SketchFlowを用いたデザインプロセス

下記にSketchFlowを用いたデザインプロセスの一例を示しますので、参考にしてください。勿論、これだけではないですよ。色々なパターンがあってしかるべきですので、うまく皆様のプロジェクトに採り入れて戴ければ幸いです。

image

SketchFlowを用いたデザインプロセスの一例

https://msdn.microsoft.com/ja-jp/library/ee341458(v=Expression.40).aspx

プロトタイプ用のダミーデータを簡単に用意できるサンプルデータ

プロトタイプのデザイン・開発時に面倒なダミーデータの生成も簡単に作成できます。これがサンプルデータの機能です。大変シンプルにして強力な機能ですので、ぜひ使ってみてください。

image

プロトタイプのデザイン・開発時に面倒なダミーデータの生成

コントロールにドラッグ&ドロップするだけで、ダミーのデータを生成できます。このサンプルデータはCSVファイルで定義されているので、容易にカスタマイズが可能です。また、きちんとデータバインドしていますので、後から差し替えも可能となっています。

コードを書かずにインタラクションを制御できるビヘイビア

ビヘイビアとは、対象となるオブジェクトにドラッグ&ドロップするだけで、インタラクションを追加することができるスクリプトオブジェクトを指します。これを適用するのに、コードを書く必要はありません。また、SDKを利用して、カスタム ビヘイビアを作成することができます。

image

コードを書かずにインタラクションを制御できるビヘイビア

ビヘイビアには、アニメーションビヘイビア、条件付きビヘイビア、データビヘイビア、モーションビヘイビア、トリガー、表示状態のビヘイビア、その他、追加ビヘイビアがあります。

参考: ビヘイビアの詳細については、下記のURLをご参照ください。。

https://msdn.microsoft.com/ja-jp/library/ff724013(v=Expression.40).aspx

imageビヘイビアの利用イメージ

PhotoshopとIllustratorファイルのインポート

１枚、または複数の画像として、取り込みをすることが可能です。すなわち、元のファイルにあるレイヤー構造も、保持した上で、インポートを行うことが可能です。ここはポイント高いですよね。

image

PhotoshopとIllustratorファイルのインポートのイメージ

素材からコントロールへの変換

他のオブジェクト同様、インポートした当該画像を、コントロールに変換可能です。変換完了後、状態を設定することができます。通常のカスタムコントロールとして利用することができます。

image

インポートした当該画像のコントロールへの変換

Visual Studioとの高い連携性とそれぞれのツールの適用場面

Visual StudioとExpression は相互に高度な連携が可能です。これにより、デザイナーと、開発者の緊密な連携を行うことができるようになっています。

image

Visual StudioとExpression の高度な相互連携

共通のプロジェクトファイルを開き、それぞれが得意とする領域で、編集を行うことが可能です。編集を行うには、Expression Blend上で「Visual Studioで編集」コマンドから、Visual Studioを起動できます。勿論その逆も可能です。例えばVisual Studioのソリューションエクスプローラ上で、SilverlightクライアントアプリケーションにあるMainPage.xamlを右クリックし、「Expression Blendで編集」コマンドで、Expression Blendを起動できます。また、Team Foundation Server(TFS) もサポートしており、デザイナーチームも含めたチーム開発の効率的な推進が可能です。

Expression Blend が得意とする領域

それでは、それぞれの得意な領域とはどういうところでしょうか？Expression Blend が得意とする領域としては、SketchFlowによるプロトタイピングや、デザインツールからの素材取り込み、素材からコントロールの作成、状態(Visual State Manager)を利用したUI構築、キーフレームアニメーションの作成(Storyboard)、ビヘイビアによるインタラクションデザイン、等があげられるでしょう。

Visual Studio が得意とする領域

また、Visual Studioが得意とする領域としては、アプリケーションとして完成させる開発作業全般といえるでしょう。具体的には、実稼動プロジェクトの構築、ASP.NETを併用したクライアント・サーバーソリューションの構築（WCF RIA Servicesなど)、C#、Visual Basicでプログラミングする作業、詳細なデバッグ、テスト、最終のビルド、Webへの展開などでは、Visual Studioが必要となってきます。

以上です。ぜひ使ってみてください。ちなみに米国本社では、Blend Architectという役職も何人かいるくらいです。

何卒よろしくお願いします！

鈴木 章太郎