インデックス
》》》》》》》1
【デブサミ2011レポート】Expression Blend + SketchFlowで始めるRIA開発 Thu Mar 10, 2011 1:52 am
Admin
Admin
Visual Studioとの連携で、効率的なRIA開発を実現するExpression Blend 4
WPFや
Silverlightを利用したRIA開発では、XAML（eXtensive Application Markup
Language）と呼ばれるXMLをベースとした言語でユーザーインターフェースを定義する。Visual Studio
2010では、ある程度XAMLを意識せずにUIをデザインすることも可能だが、動画やアニメーションなどを活用した複雑なUIではXAMLコードを大量
に手書きする必要があり、効率が悪い。そこで、ロジックとUI部分の開発を分離して効率化を図るとともに、ユーザーエクスぺリエンスに優れたRIA開発を
実現するために登場したのが、WPFおよびSilverlightアプリケーションのUI デザイン・設計に特化したツール「Expression
Blend」だ。日本マイクロソフト株式会社
デベロッパー＆プラットフォーム統括本部
デベロッパーエバンジェリスト
大西 彰氏
[You must be registered and logged in to see this image.]
2010年10 月にリリースされたExpression Blend 4 SP1では、Windows Phone
7向けのSilverlightアプリケーション開発もサポート。1つのツールで、RIA（Silverlightアプリケーション）、デスクトップ向け
（WPFアプリケーション）、スマートフォン向け（Windows Phoneアプリケーション）など、それぞれの開発に対応可能となった。
大西氏はこれを「.NETテクノロジーを基盤とした開発プラットフォームだからこそのメリット」と強調する。例えば、普段Visual
Studioを使用している開発者が初めてExpression
Blendを使う際、最初は画面構成の違いなどに少々戸惑うかもしれないが、.NETFrameworkによる開発の勘どころは共通点も多いだろう。ま
た、Expression BlendではVisual
Studioと共通のソリューション・プロジェクトファイルを開くことが可能で、両者の高度な連携を実現している。その点についても、大西氏は実際の画面
を見せながら説明した。SketchFlowで詳細設計前にプロトタイプを容易に作成
続いて、
MediaElementを使ったメディア（動画）再生やStoryboardによるキーフレームアニメーション作成、プロトタイプの作成など、
Expression
Blendの主要機能をデモを交えながら紹介。特に「SketchFlow」と呼ばれるツールを使ったプロトタイピングは特徴的であり、来場者の目を引い
た。 SketchFlowでは、まさに「スケッチ」感覚で各画面のレイアウトや配置したいオブジェクトを描いたり、複数の画面を配置
してそれらを引き出し線でつなぐだけでアプリケーションの画面遷移なども定義できる。これにより、詳細設計の前に、アプリケーションの動きを視覚的に確認
することが可能となる。作成したプロトタイプは、Webブラウザのプラグインで動作するSketchFlow
プレーヤーで閲覧可能な形式で出力されるため、レビュアー側には実行環境としてブラウザとSilverlightがあれば、すぐに確認することが可能だ
（画面）。そして、SketchFlow プレーヤーの画面上に直接テキスト注釈やマークを書き込んで、フィードバックすればよい。 最後
に大西氏は、Windows Phone 7向けSilverlightアプリケーション開発のデモも披露。Expression
BlendでのUI開発から、Windows Phone
7デバイスをエミュレートしてPC上でのデバッグ、デバイスに転送して実行といった、ひととおりの開発過程を紹介した。
「Expression Blend
4に関心のある開発者の方は、試用版を用意しているのでぜひ利用してほしい。実践的なビデオチュートリアルなども順次作成していく。また、Windows
Phone 7に関しても今後どんどん情報を発信していく予定なので、ご期待いただきたい」と語り、セッションを締めくくった。画面：フィードバックの作成画面（左）と受け取った後の確認画面（右）画面：フィードバックの作成画面（左）と受け取った後の確認画面（右）
[You must be registered and logged in to see this image.]
お問い合わせ
日本マイクロソフト株式会社
マイクロソフト カスタマー インフォメーション センター
TEL：0120-41-6755 （9：30 ～12：00、13：00 ～19：00 土日祝日、弊社指定休業日を除きます）]
WPFや
Silverlightを利用したRIA開発では、XAML（eXtensive Application Markup
Language）と呼ばれるXMLをベースとした言語でユーザーインターフェースを定義する。Visual Studio
2010では、ある程度XAMLを意識せずにUIをデザインすることも可能だが、動画やアニメーションなどを活用した複雑なUIではXAMLコードを大量
に手書きする必要があり、効率が悪い。そこで、ロジックとUI部分の開発を分離して効率化を図るとともに、ユーザーエクスぺリエンスに優れたRIA開発を
実現するために登場したのが、WPFおよびSilverlightアプリケーションのUI デザイン・設計に特化したツール「Expression
Blend」だ。日本マイクロソフト株式会社
デベロッパー＆プラットフォーム統括本部
デベロッパーエバンジェリスト
大西 彰氏
[You must be registered and logged in to see this image.]
2010年10 月にリリースされたExpression Blend 4 SP1では、Windows Phone
7向けのSilverlightアプリケーション開発もサポート。1つのツールで、RIA（Silverlightアプリケーション）、デスクトップ向け
（WPFアプリケーション）、スマートフォン向け（Windows Phoneアプリケーション）など、それぞれの開発に対応可能となった。
大西氏はこれを「.NETテクノロジーを基盤とした開発プラットフォームだからこそのメリット」と強調する。例えば、普段Visual
Studioを使用している開発者が初めてExpression
Blendを使う際、最初は画面構成の違いなどに少々戸惑うかもしれないが、.NETFrameworkによる開発の勘どころは共通点も多いだろう。ま
た、Expression BlendではVisual
Studioと共通のソリューション・プロジェクトファイルを開くことが可能で、両者の高度な連携を実現している。その点についても、大西氏は実際の画面
を見せながら説明した。SketchFlowで詳細設計前にプロトタイプを容易に作成
続いて、
MediaElementを使ったメディア（動画）再生やStoryboardによるキーフレームアニメーション作成、プロトタイプの作成など、
Expression
Blendの主要機能をデモを交えながら紹介。特に「SketchFlow」と呼ばれるツールを使ったプロトタイピングは特徴的であり、来場者の目を引い
た。 SketchFlowでは、まさに「スケッチ」感覚で各画面のレイアウトや配置したいオブジェクトを描いたり、複数の画面を配置
してそれらを引き出し線でつなぐだけでアプリケーションの画面遷移なども定義できる。これにより、詳細設計の前に、アプリケーションの動きを視覚的に確認
することが可能となる。作成したプロトタイプは、Webブラウザのプラグインで動作するSketchFlow
プレーヤーで閲覧可能な形式で出力されるため、レビュアー側には実行環境としてブラウザとSilverlightがあれば、すぐに確認することが可能だ
（画面）。そして、SketchFlow プレーヤーの画面上に直接テキスト注釈やマークを書き込んで、フィードバックすればよい。 最後
に大西氏は、Windows Phone 7向けSilverlightアプリケーション開発のデモも披露。Expression
BlendでのUI開発から、Windows Phone
7デバイスをエミュレートしてPC上でのデバッグ、デバイスに転送して実行といった、ひととおりの開発過程を紹介した。
「Expression Blend
4に関心のある開発者の方は、試用版を用意しているのでぜひ利用してほしい。実践的なビデオチュートリアルなども順次作成していく。また、Windows
Phone 7に関しても今後どんどん情報を発信していく予定なので、ご期待いただきたい」と語り、セッションを締めくくった。画面：フィードバックの作成画面（左）と受け取った後の確認画面（右）画面：フィードバックの作成画面（左）と受け取った後の確認画面（右）
[You must be registered and logged in to see this image.]
お問い合わせ
日本マイクロソフト株式会社
マイクロソフト カスタマー インフォメーション センター
TEL：0120-41-6755 （9：30 ～12：00、13：00 ～19：00 土日祝日、弊社指定休業日を除きます）]
