Windows Phone 7 ことはじめ(8) - Expression Blendって何だろう?

久しぶりのことはじめの記事です。

今回は、Windows Phone SDKに含まれるツールのExpression Blendに焦点を当てたいと思います。僕も勉強がてら書いておりますので、一緒に学習していきましょう的な感覚で読んでもらえればと思います。

きっかけ

よく勉強会やセミナーでの懇親会とかでBlendの話題になると、こんな声を聞きます。

  • Blendって、難しくない?
  • Blendって分からないよねー。

自分もはじめはBlendの使い方がイマイチよく分かっていませんでした。
とはいえ、多少なりとも学習してきて、これらの声を総じて考えると、次のようなことが言えるのではと思うようになりました。

Expression Blendって、そもそも何をするためのツールなの?

まずこれが理解できて、初めてExpression Blendを使いこなすための第一歩を踏み出せるのではないかと思いますので、今回はこの辺りを説明できればなと思います。

Expression Blendの位置づけ

元々Expression BlendはMicrosoftが提供しているExpression Studioと呼ばれるWebデザイン系ツールのスイート群のひとつとして提供されていました。しかもExpressionシリーズでは最上位のExpression Studioの上位バージョンにしか含まれません(Expression Studio 4だと、Ultimateのみ。Web Professionalには含まれません)。なお、単品販売もありません。唯一単品で提供されているのはWindows Phone SDKに同梱されている「Expression Blend for Windows Phone」のみです。

もともと製品最上位にしか含まれていないという理由もあるのかと思うのですが、情報が少ないこともあってなかなか知られる機会に恵まれませんでした。

Expression Blendの役目って?

ということで本題ですが、Expression Blendの役目は何でしょうか?

製品ページでは、次のように紹介されています。

Expression Blend 4 + SketchFlow は、Silverlight と .NET のための UI 設計ツールです。
Microsoft Silverlight や Windows Presentation Foundation(WPF) を活用した革新的なアプリケーションの UI デザインを、優れたワークフローで行うことができます。

Webで展開していたSilverlightアプリケーションやWindows上のWPFアプリケーションのUIを担当するXAMLをグラフィカルかつ簡単にカスタマイズするためのツールということになります。

一言でUIのカスタマイズといってもいろいろありますが、以下のような例を見ると、少しはイメージが掴めるのではないでしょうか。

  • ボタンを押した時に、押したことが分かるように、ボタンを小さく見えるようにする。または陰を付けるなど、色を変える。
  • ボタンを押した後、ページの遷移が始まっていることが分かるように、本のページが開く感じで次の画面が出てくる。
  • ボタンのデザインを従来の四角ではなく、丸にする。あるいは画像に変更する。
  • 複数の画像を組み合わせて、ひとつのボタンとして扱う。

要は、オブジェクトの(ボタン押した・離したなどの)状態における動作を設定するのが、Expression Blendの役目です。
その他にも特定のオブジェクトの形を変えたり、とある機能を持たないオブジェクトにその機能を割り当てるなど、オブジェクト同士の関連付けも、Expression Blendで容易に行えるようになっています。

UIのカスタマイズをしようと思ったら、迷わずBlendを使ってみてください……と言いたいところですが、画面構成がVisual Studioとはまた異なっているので、取っつきにくいところがあるかもしれません。なので、最低限画面構成だけでも把握してみましょう。

blend_layout

画面はデフォルトで5分割されています。

  1. ツールボックス(画面一番左)
    よく使うツールがアイコンで用意されています。
  2. コントロールボックス(画面左上)
    Expression Blendで配置できるコントロールやビヘイビアと呼ばれる状態のセットがまとめられています。
    このボックスのタブには、プロジェクトウィンドウもあります。
  3. オブジェクトアウトライン&タイムライン(画面左下)
    コントロールを配置した時に困るのがレイアウトの構造です。XAMLで記述されたオブジェクトの関係がアウトライン化されて簡単に把握できるようになっています。
    また、オブジェクトの動作を詳細に設定するときに使用するタイムラインもこちらに表示されます。
  4. 画面レイアウト&コードエディタ(画面中央)
    こちらはVisual Studioとほとんど変わらない画面レイアウトとコードエディタになっています。IntellisenceはXAML特化で動作します。
  5. プロパティウィンドウ(画面右)
    こちらもVisual Studioとほとんど変わらない、プロパティウィンドウになります。ただし、イベント等の設定はありません。デザイン特化となります。

時間が出来ましたら、UI設計で重要な画面遷移を簡単にサンプルとして作れてしまう、Sketch Flowとかの説明が出来ればと思います。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中