ホチキス先生の「プログラマーと呼ばれたい」

InfoPath & SQL Server !

Microsoft TechEd 2010 レポート – Day 2 – 2 – T6-302「Expression Blend 4でデザインするSilverlight 4アプリケーション」

leave a comment »

このセッションは、マイクロソフトのエバンジェリスト高橋忍氏により、Microsoft Expression 4による開発手法を初心者にもわかりやすく、かつ実務で使えるTipsを満載で紹介された。とても贅沢なセッションだった。

Expression Design 4で作成できるSilverlight 4アプリケーションで利用できるコントロールの種類は数多くあるが、実際に必要十分なコントロールの種類は60くらいだ。このように数多くのコントロールが使えることは魅力だが、むしろコントロールの種類の多さよりも、カスタマイズ性のよさを強調したい。

Silverlight 4で提供されるコントロールは、デザイン面の数多くのプロパティがある。このうちいくつかはVisual Studioでも扱うことができるが、やはりExpression Blendを使えば数多くのプロパティを編集することができる。たとえば画面上にテキストを作ったとき、これをパスに変更すれば、様々なプロパティを編集してデザインを自由に変更できる。Expression Blend 4の「アセット」にはたくさんのオブジェクトがあり、これをそのまま利用することもできるが、より本格的にデザインをするためにはExpression Designを使う。Expression Designで作成されたデザインはXAMLのデータで構成されているので、これをエクスポートしてExpresshion Blendにインポートするか、編集中のオブジェクトをコピーして貼り付けてもいい。すでにデザイン経験のあるデザイナーはPhotoshopやIllustratorでデザインを作成するが、これもExpresshion Blendにインポートすることができる。このとき、Photoshopファイルのレイヤーもそのままの形でインポートされる。

アニメーションは状態の変化に対する表現であり、タイムラインに設定されたキーフレーム間のアニメーションである。マークやテキストなどが移動するアニメーションは、キーフレームに設定されたデザインの位置を画面上でドラッグして移動するだけである。直線的な動きに「イージング」を与えて躍動感のあるアニメーションにすることも簡単だ。これらのアニメーションは「ストーリーボード」というオブジェクトに保存される。

複数の図形に統一的なイメージを与えたい場合は、デザインを「スタイル」というテンプレートに保存し、適用することができる。これは図形を右クリックして「スタイルの編集」を選択し、「空アイテムの作成」で作成する。スタイルを変更してしまった後に「空アイテムの作成」をしてしまったときは、「ローカル値に変換」オプションでスタイルをセットすることができる。

よく使われる重要なオブジェクトに「ボタン」がある。作成した図形を「コントロールオブジェクト」に変換することは簡単で、図形を右クリックし「コントロールの作成」で変更することができる。これで図形をクリックしたときにボタンの機能を果たすことはできる。しかしボタンをクリックしたときに、押されたという実感をユーザーに与えるデザインはそれなりに作成しなければならない。ボタンには「Normal」「MouseOver」「Pressed」「Dissabled」といった4つの通常のステートと、「Unfocused」「Forcused」のフォーカスステートがある。たとえばマウスをボタンに重ねたとき「MouseOver」のステートに遷移するので、この状態ではボタンを少し大きくするデザインを、マウスをクリックしたときは「Pressed」のステートに遷移するので、こちらは右下に少しずれたデザインを適用する。こうすることで通常のボタンがクリックされたデザインができる。こうした一連の設定は個別に行うと煩雑であり、かつ異なるデザインになると統一性が損なわれるので、各状態の違いの部分だけをテンプレートとしてパッケージできるようになっている。また遷移時間の設定もでき、イージングも適用することができる。

2つのコントロールを特定のプロパティで関連付けると、スライダコントロールを動かすことでプログレスバーの長さが変わり、テキストボックスの数値を変化させることができる。これらもコードを記述することなく、画面上のプロパティを編集することで実現できる。

メディアエレメントはビデオ再生のオブジェクトである。このオブジェクトには動画の再生、停止などのメソッドが実装されている。これらのメソッドにアクセスするのが「ビヘイビア」の概念である。このようにメソッドを持つオブジェクトからボタンコントロールにビヘイビアを適用するとき、二重丸のアイコン「アートボードピッカー」を利用すると直感的に適用することができる。アートボードピッカーをドラッグしてビヘイビアをコントロールしたいボタンオブジェクトにオーバーするのだ。

パネルコントロールは複数のエレメントを子要素として持ち、グリッドを使ってデザインを決定することができる。動的にユーザーに操作させたくないグリッドエリアは、ロックアイコンを使って動かないように固定することができる。

画面を遷移するコンテンツを作りたいときは、FrameコントロールとPageコントロールを使う。Frameコントロールの中に複数のPageコントロールを作成し、切り替えるという手法だ。

データの取り扱いについては、SilverLightで扱うことができるデータはXMLデータソースかオブジェクトデータソースである。データを利用したアプリケーションを作るときは、サンプルデータツールを使ってデザインすることができる。

最後に実用的なSilverlightアプリケーションとして、写真を表示する「フォトビューワー」を作るデモが行われた。

Microsoft TechEd 2010 Japan 公式サイト
http://www.microsoft.com/japan/teched/2010/

Written by Yoshio Matsumoto

2010年8月26日 @ 11:59 PM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

%d人のブロガーが「いいね」をつけました。