最初のSilverlight 2でExpression Blendの使用

ScottGu's blog translated by Chica @ Wankuma

先週、最初のSilverlight 2の投稿を行い、今回の Silverlight 2 ベータ1リリースについてお話しました。その投稿で、いくつかチュートリアルにリンクしており、SilverlightとWPFの背後にある基本的なプログラミング概念の説明と、Silverlightを使用した"Digg 検索クライアント"を構築するための使用方法をご紹介しました。 :

この最初のSilverlightチュートリアルではUI構築のデザインツールを使いませんでした。その代りにその配下にあるXAMLのUIタグをご紹介することに焦点を当てました（そうすることで、コアのプログラミング概念をより上手くご説明できたと思います。）。その基礎はカバーし終えたので、より生産性を上げるためにいくつかツールを見ていきましょう。

SilverlightをサポートするExpression Blend

今回のSilverlight 2 ベータ１のリリースに加え、それをターゲットとしたVisual Studio 2008と Expression Studioツールも出荷する予定です。これらのツールはRIAソリューションの構築に相当の力を提供し、開発者とデザイナが一緒になって簡単にプロジェクトを運んでいけるようになります。

今日の投稿では、今回のExpression Blend 2.5 March プレビューのいくつかの機能をご紹介したいと思います。Blendの基礎的な動きをご紹介した後で、クロスプラットフォーム、クロスブラウザのSilverlight IM チャットクライアントを構築してそれを使用します。 :

上記のスクリーンショットはMac上の実行時でのアプリケーションの様子を表しています。以下は Expression Blend内でのデザイン時での様子を表したスクリーンショットです。 :

アプリケーションのUI部分全てをグラフィカルに構築するため、そしてチャットのセッションとメッセージを表示する.NET クラスとUIをクリーンにデータバインドするためにExpression Blend を使用します。

チャットアプリケーションを構築するために使用する全てのコントロールはSilverlight 2のベータ1にビルドされます。

否認: 私はデザイナじゃない。（しかもセンスもない。）

まず最初に言っておきたいのが、私は開発者であって、デザイナではありません。しかもそんなにセンスもありません。UIを作成する技術は理解していても、作っていると変な色やフォントを時々選んでしまいます（この投稿用にスクリーンショットを取り終えた後に、同僚が実は私が使用したフォントや色などを禁止するのに従事しているサイトがあることを親切にも教えてくれました。痛いです。）。

デザインスキルのある方へ、できれば以下では私が使用するフォントや色とかではなく、ご紹介する機能や技術部分にご注目してくださいね。:-)

はじめに：Silverlight 2 プロジェクトの新規作成

Expression Blend と Visual Studio 2008は同じソリューション・プロジェクトのファイル形式を共有します。つまり、VS 2008でSilverlightプロジェクトを新規作成し、それをExpression Blendで開くことができます。またはExpression BlendでSilverlightプロジェクトを新規作成して、それをVSで開くことができます。またExpression BlendとVS 2008を両方開いて同じプロジェクトを同時に編集することもできます。

前回のSilverlightチュートリアルシリーズで既にVS 2008を使用してSilverlightプロジェクトの新規作成方法をご紹介してますので、今回の投稿ではExpression Blendを使用してSilverlightプロジェクトを新規作成する方法をご紹介しましょう。これを行うには単純に、ファイル->新規プロジェクトをExpression Blendで選択し、"Silverlight 2 アプリケーション" アイコンを選んで、OKをクリックします。:

これにより新規の（VS-互換）ソリューションファイルとSilverlightアプリケーションプロジェクトを作成します。:

BlendにはSilverlight 2アプリケーションのためのWYSIWYGデザイナが全て含まれています。Silverlightページやコントロールを開いた時、ビューをデザイン、XAMLソース、またはデザインおよびXAMLソースが同時に表示される分割ビュー（これは両方同時に編集できます。）に変更することができます。上記は分割ビューを使用しています。

いくつかの基礎の理解：サーフェイスにコントロールを追加

Expression BlendはVisual Studioに比べ微妙に異なるツールパレットを持っています。（Photoshopの様なデザインツールにあるものとよく似ています。）

Blend はベクターのグラフィック編集をサポートしています。:

Blendはコントロールの追加および編集もサポートしています。ツールボックスには、レイアウトコントロール（Grid, Stack, Canvas, Border, ScrollViewerなど）、テキストコントロール（TextBox, TextBlockなど）用の特別なアイコンと、最近使用したコントロールを表示するアイコンがあります。 :

ツールパレットで最後の">>" アイコンをクリックすると、使用可能なすべてのコントロールが表示されます。 :

もし探しているコントロールが見当たらない場合は資産ライブラリの右上の角の"全て表示（Show All）"チェックボックスをクリックしてください。また"検索"テキストボックスを使用して名前でコントロールを検索することもできます。

重要：Blendは全てのコントロール（参照しているビルドインコントロールおよびその他のカスタムコントロールやユーザコントロールのどれも）をサポートしています。

ツールボックスからコントロールを選択すると、デザインサーフェイス上に、クリック＆ドラッグするとコントロールを描画することができます。アートボード上に資産ツールからコントロールをドラッグすることもできます。デフォルトでは、デザインサーフェイス上にコントロールを追加および処理を行う時、自動ルールと配置マーカーを取得します。（以下はビルドインのボタン、カレンダー、スライダーコントロールをフォームに配置しています。） :

基礎の理解（続）: コントロールプロパティの処理

プロパティをカスタマイズする場合は、デザインサーフェイス上のオブジェクトを選択し、右側にある"プロパティ"パネルをクリックします。 :

上記は、ボタンの"Background"ブラシをもっと濃い青のグラデーションに変更しています。（"ブラシ" ノードの下の赤で丸つけた3つ目のタブでグラデーションブラシを構成できます。）

使えるヒント: プロパティウィンドウには上の方で検索ボックスがあり、それを使用して表示するプロパティ名を選択することができます。 :

SilverlightおよびWPFのすべてのUIオブジェクトはベクターグラフィックを使用して作られているため、コントロールの形成、スタイル化、変形をどのようにでも行うことができます。例えば、ボタンコントロール上の"変形（Transform）" プロパティで設定することもでき、また角の端をクリックして回転、傾斜、拡大・縮小することもできます。 :

これにより相当な力と柔軟性が与えられるので、素早く簡単にお好きなようにカスタマイズすることができます。 :

使えるヒント: コントロールキーを押しながらデザインサーフェイスをズームすることができ、ホイールマウスでズームの調整を行うことができます。また、スペースバーを押しながらデザインサーフェイスの表示範囲を移動させることができます。これにより手形カーソルが表示され、マウスを押して、それを使用して現在のスクリーンの表示範囲をドラッグすることができます。これは拡大表示した時に、表示されているコンテンツを簡単に移動させたい場合に便利です。

チャットアプリケーションの構築：レイアウトの定義

前回のSilverlightチュートリアルでのパート 2：レイアウト管理の使用で、SilverlightとWPF内でのレイアウト管理システムと、簡単にアプリケーションのレイアウトと配置を簡単に管理するためのレイアウトパネルの使用方法についてお話ししました。Expression Blendはレイアウトルールを簡単に定義でき、これらのレイアウトパネルを使用するためのビルドインツールが含まれています。

チャットアプリケーションの構築の最終目的はUIをこのようにすることです。 :

これを行うために、まずページ上に3つの行<グリッド>レイアウトを定義します。デザインサーフェイスの左マージン上にマウスを持っていき、新しい行の定義を行いたい場所でクリックします。（以下はすでに一番上の行定義を設定しています。赤で囲んだカーソルの位置は2番目の行定義を追加するところです。） :

デザインサーフェイスの左上の角をクリックすると（以下の赤丸部分）、デザインサーフェイスがCanvasレイアウトモードもしくはGridレイアウトモードのどちらの時でも、移動させることができるようになります。

Gridレイアウトモードの時、Blendは特定の行または列が固定幅に設定されているのか、またはコントロールのサイズに比例なのかを表示します。上記の"空ロック（empty locks）"は3つの行が現在それぞれに比例していることを示しています。（つまりブラウザが拡大されると全て比例して拡大されます。） :

上と下のロックをクリックすると、それらの行に固定の高さを代わりに設定して、間の行が残りの高さを調整するように設定することができます。

最後の手順は、上のマージンをクリックして、右列も定義します。これは固定幅を設定します。（そして左列を動的にサイズ変更させるようにします。） :

上記の手順を行うと、XAMLファイルは次の様にGridを定義します。:

使えるヒント:上記でSilverlightアプリケーションに固定幅と高さを設定しました。（ルートの<UserControl>要素上のWidthとHeight属性を確認してください。）代わりにWidthとHeight属性を完全に削除し、アプリケーションに動的サイズを持たせて、コンテンツのHTML要素またはブラウザのウィンドウズサイズに合わせて、自動的に配置およびサイズ調整することができます。（これについてはレイアウトチュートリアル、ここの最後で話しています。）アプリケーション上でデザイン時の幅と高さを設定したい場合、d:DesignWidth="640"およびd:DesignHeight="476"属性をルートのUserControl 要素上で設定することができます。これにより、アプリケーション上でそのデザイナを使用した時のデフォルトサイズを設定することができます。

チャットアプリケーションの構築：コントロールと色の追加

チャットアプリケーションレイアウトのコア部分が定義できたので、そこへいくつかコントロールを追加して、表示をカスタマイズしていきましょう。

まず、ルートグリッドのレイアウトパネルを選択し、背景色を青のグラデーションにカスタマイズします。特定のコントロールを選択する簡単な方法は、"インタラクション" パネルを使用してその中で選択したいコントロールをクリックします。 :

その後、"ブラシ" プロパティを使用して、グリッドの背景に対して青のLinearGradient ブラシをカスタマイズします。 :

これを設定した後、チャットウィンドウの下の部分に取りかかって、"送信"ボタンをそこへ追加していきます。 :

チャットメッセージのテキストボックスには、標準のテキストボックスを使用しますが、ちょっとかっこよくするために、まず次のような、"RoundRadius"が5で、Background とBorderBrushが設定された境界線（Border）コントロールを追加します。 :

その後、境界線コントロール内にテキストボックスを埋め込みます。

重要なヒント: デザインサーフェイスを使用して境界線コントロール内にテキストボックスをネストするためには、インタラクションウィンドウ内で境界線コントロールをダブルクリックします。これにより、それがデザインサーフェイスでアクティブな挿入コントロールとして設定され以下の様に黄色でハイライトされます。:

その後、コントロールのツールボックスを使用して、テキストボックスコントロールを選択し、それを境界線コントロールの中に追加します。そのテキストボックスの背景色と境界線ブラシを設定して、親境界線コントロールからきれいな曲線を選択します。 :

Blendが生成したXAMLタグは以下のようになります。（境界線コントロールの下でネストされたテキストボックスの様子をご確認ください。その境界線がアクティブな挿入コントロールでなければそのようにはなりません。） :

上記のプロセスをヘッダ行でも繰り返して、境界線コントロールにテキストブロックを埋め込み、次の様なUIを作成するために右列に画像コントロールを追加します。 :

Blendにより生成されたXAMLタグは以下の様になります。:

最後に、中央の行にもうひとつの境界線コントロールを追加し、その中にListBoxコントロールを追加します。グリッドの中で両方の列に渡って境界線コントロールを引き延ばすように構成し、その背景色とフォント色をカスタマイズします。その後、プレースホルダーテキストのようにListBoxの中にテストメッセージを入れます。（UIをカスタマイズして、本当の値を後でデータバインドします。） :

Blendにより生成されたXAMLタグは以下の様になります。:

アプリケーションを起動すると、ブラウザに簡単なチャットIMクライアント（ハードコードされた値で）起動されます。ブラウザのサイズ調整すると、アプリケーションは自動的にそのウィンドウに合わせて配置およびサイズ調整します。

IMクライアントの見た目をよくするには、まだまだUIで行うことはありますが、現時点で少なくとも起動させるものをつくることができました。

チャットアプリケーションの構築："ChatMessage" と"ChatSession" クラスの追加

初回のUIをExpression Blendで作成することができたので、同じプロジェクトをVisual Studioで開いて、UIとバインドするチャットクラスをいくつか追加しましょう。

Visual Studioでプロジェクトを開くには、VS 2008でファイル->プロジェクトを開くを選択して、プロジェクトファイルを選択するか、Expression Blendでプロジェクトノード上で右クリックして"Visual Studioで編集"メニューを選択し、プロジェクトを開いたVS 2008を起動します。 :

ベータ1でのVS 2008のSilverlightサポートには、Silverlight 2ソリューションに対してプロジェクト管理サポート、完全なインテリセンスとイベント接続サポート、WindowsおよびMac上で起動するSilverlightアプリケーションのデバッグサポートがあります。VS 2008は、Silverlightの.xamlファイルに対して分割ビュー編集もサポートしています。例えば、これは上記でBlendで構築した同じPage.xamlファイルをVS 2008で開いたものです。 :

ベータ1のVS 2008のデザインビューは対話式ではありません。（つまり読込専用です。）しかし、ソースビューで変更したものは、すぐにデザインビューで更新されます。これは使い心地のいいXAMLパッドを提供します。（VS 2008はSilverlight 2のベータ1で完全なXAMLソースのインテリセンスをサポートします。）

このブログ投稿には、Visual Studio XAMLエディタを使用しません。代わりに、いくつかクラスを作成して、ChatSessionと関連のチャットメッセージを表すために使用します。その後、Expression Blendを使用してそれらにUIコントロールをバインドします。

まず"ChatMessage"と呼ばれる新しいクラスを追加し、2つの公開プロパティを定義します。 :

その後、チャットセッションを表す"ChatSession" と呼ばれるクラスを作成します。

上記のChatSessionクラスは3つの公開プロパティを持っています。最初の2つのプロパティはチャット相手側のリモートユーザ名とアバターを表します。

3つ目のプロパティは過去のチャットメッセージのコレクションです。その型はList<ChatMessage>コレクションではありません。どちらかというと、ObservableCollection<ChatMessage> コレクションになります。ObservableCollectionは、ASP.NETの開発者の方には聞きなれないクラスかもしれませんが、WindowsフォームやWPF経験のある方には恐らく馴染みのあるものだと思います。基本的に、これはジェネリックコレクションクラスで、そこへ項目が追加・削除されると（もしくはINotifyPropertyChanged がそこで実装されている項目のプロパティが変更された時）変更の告知イベント起こります。これはデータバインドしている時に非常に便利です。なぜなら、開発者が明示的にコードを書くことなく、UIコントロールはこれらの告知を使用して自動的にそれらの値が更新されることがわかるからです。

ChatSessionクラスには2つの公開メソッドがあります。1つはチャットサーバに接続し、もう1つはチャットサーバにメッセージを送信します。これを簡単にするために（それと私はチャットサーバを持っていないので）、これらのメソッドをちょっと変えています。本来なら、おそらくネットワークのソケット実装をSilverlightに構築してリモートのチャットサーバに接続します。

ChatSessionクラスはINotifyPropertyChanged インターフェイスを実装します。つまり、"PropertyChanged"イベントを公開します。このイベントをそこのプロパティが変更された時にクラス内で発生させます。これはリスナー（例えば、データバインドされているコントロール）に発生したプロパティの値の変更を告知し、それによりその値を再バインドできるようにします。

デザイン時のデータバインドに対して仮データを実装

純粋な機能観点からすれば、上記のコードはすべてチャットクライアントを実装するために必要なことです。Blendでのデザイン時の体験を改善するために、現在実行時なのかデザイン時なのかをチェックするコンストラクタを追加し、もしデザイナでホストされている場合は、ChatSeesionオブジェクトを"仮データ"でロードします。 :

これは、デザイナでデータバインドされているデータを簡単に見るためだということが、ちょっと後でお分かりになると思います。

チャットアプリケーションの構築：Expression Blendを使用してUIを接続

ChatMessageやChatSessionオブジェクトが定義されているので、これらを使用してExpression Blend内でUIコントロールにデータバインドすることができます。

先週投稿したチュートリアル 5：データバインドを使用してListBoxコントロールでリストデータを表示でSilverlightとWPFでデータバインドがどのように動作するかをご紹介しました。今日の投稿ではExpression Blendを使用してデータバインドする式を手動で入力して接続します。まず Blend内の "プロジェクト" パネルの下の"データ"パネルを使用します。:

"データ"パネルにある"+ CLR オブジェクト"リンクをクリックして、ダイアログを表示します。それにより、UIコントロールにデータバインドする.NET オブジェクトが選択できます。それを使用して作成した"ChatSession" オブジェクトを選択します。:

これはChatSessionオブジェクトをデータトレイに追加させ、そのプロパティ（とサブプロパティ）をツリービューに公開します。 :

その後、デザインビューでUIコントロールとそれらのプロパティを"データ"トレイから選択し、それらをデザインサーフェイスのUIコントロール上にドラッグアンドドロップすることでバインドすることができます。例えば、RemoteUserName プロパティをデータトレイからその上にドラッグすることで、静的な"ScottGu" ラベルを{Binding RemoteUserName} データバインド式に置き換えることができます。 :

テキストブロック上に"RemoteUserName" をドロップした時、Blendは上記の様にポップアップして、既存のテキストブロックへそのプロパティをバインドするのか、新しいコントロールを作成してそのプロパティを表すのか聞いてきます。もしデフォルト（既存コントロールへバインド）を選択した場合、Blendはどの型のバインド式にするかを聞いてきます。 :

"一方向" でテキストブロックの"Text"プロパティにしたいことを示します。OKをクリックすると、コントロールは{Binding RemoteUserName} 式で"Text"プロパティを更新します。

画像コントロール（RemoteAvatarUrl プロパティと一緒に）およびListBox（MessageHistoryコレクションプロパティと一緒に）に対してドラッグアンドドロップを繰り返すことができます。これが終わると、Blendは"ダミー"データを次の様にデザインビュー内で表示します。 :

なんで"ChatClient.ChatMessage"のように項目が表示されているのか、ListBoxのコンテンツが気になるかもしれません。それは、現在ListBoxがカスタムの.NET オブジェクトにバインドされていて、"ChatClient.ChatMessage" 文字列がChatMessage インスタンス上の"ToString()" に呼び出されて返された値だからです。

次の様にListBoxへ<DataTemplate> を追加することで見た目を良くするためにこれを修正することができます。 :

注：Blend2.5 Marchプレビューでは、ソースビューでデータテンプレートを定義する必要があります。今後のプレビューリリースでは、それらをデザイナを使用して定義できるようになります。もし触ってみたい場合は、この機能はすでにWPFプロジェクトで利用可能です：デザイナでは、対話的に完全なWYSIWYG体験でデータの見た目を作成することができます。WPFプロパティを作成して試してみてください。

これを行えば、デザイン時にUIが以下のようになります。 :

デザイン時にこの"ダミーデータ"を表示させる利点は、実行時にUI体験がどのようになるかより良くつかむことができ、デザイナ（または開発者）が残りのアプリケーションの構築を待たずに簡単に処理することができることです。

チャットアプリケーションの構築：ボタンとListBoxのUIをスタイルとコントロールテンプレートを使用して更新

パート7：コントロールのルックアンドフィールのカスタマイズにテンプレートを使用のDiggチュートリアルでお話した1つのことが、SilverlightとWPFを開発者とデザイナが完全にコントロールのルックアンドフィールをカスタマイズする方法についてです。これによりアプリケーションのUIを形成するのに相当な柔軟性を与え、望んでいたユーザ体験をそのまま作成できるようになります。

SilverlightおよびWPFのコントロールテンプレート機能を使用して、上記のチャットアプリケーションで送信ボタンとListBox構造をカスタマイズして、より洗練されたルックアンドフィールにすることができます。プロジェクトのApp.xamlファイルに保存する"MessageHistory"および"SendButton" スタイルリソースを作成することで、これを行うことができます。そうすると、これらのスタイルオブジェクトかそれぞれコントロールテンプレートを持つので、コントロールのルックアンドフィールをオーバーライドして、その視覚的な構造を変更します。

例えば、以下のListBoxコントロールテンプレートは、ListBoxコントロールの周りの外側の2重境界線を削除して、リストコンテナにスクロールバーのついた"平坦な"見た目を定義するのに使用することができます。 :

このテンプレートをListBoxに適用すれば、縁がより平坦に描画されます。 :

ボタンのコントロールテンプレートだともっと色々行えます。カスタムのボタン形状だけでなく、"MouseOver"、"Pressed"、"Normal"の状態であるとき（これらはすべてスタイル定義内にカプセル化されているので、ページ開発者はこれらを有効にするために何かする必要は全くありません。）、カスタムのUI動作を提供するために、その形状に適用する様々なストリーボード動画も定義することができます。 :

"MessageHistory"および"SendButton" スタイルオブジェクトが定義されると、Expression Blendを使って簡単にそれらをデザインサーフェイス上のコントロールに適用できます。

Expression Blendにある "リソース"ツールウィンドウをクリックすると、プロジェクト内にすべてのリソースの場所が一覧化されます。 :

"App.xaml"ノードを拡張してその中で使用できるスタイルを確認することができます。特定のスタイルをページ上のコントロールに適用するには、それをコントロール上に単純にドラッグアンドドロップします。例えば、これは送信ボタンコントロールが"SendButton" スタイルを適用する前の見た目です。 :

その上にSendButtonスタイルをドラッグアンドドロップしてそれをカスタムのコントロールテンプレートの形状・構造に変更します。 :

"SendButton" スタイルはその中で定義されている状態動画を持っているため、そのボタンは実行時にエンドユーザの動作に応じて変更されます。

デフォルトではボタンはこの様になっています。:

エンドユーザがその上にマウスオーバーすると、そのバルーンは微妙に色を薄くします。 :

押下された状態では、ボタンの状態は元に戻り、陰影が無くなります。 :

ボタンが離されると元に戻ります。

これらの微妙な動画と対話的な動作により、アプリケーションは非常に洗練されます。いいことに、デザイナはこの機能をそれら自体で全体的にビルドしカスタマイズでき、そのページ機能を実装している開発者がそこへ関わる必要も、それを有効にするためのコードを書く必要もありません。

Expression Blend2.5の今後のプレビューリリースでは、デザイナは、デザインサーフェイスを使用するだけ（ソースの編集やコーディングは必要ありません。）で、このボタンの形状や構造を定義できるだけでなく、それに対するすべての動画遷移も定義することができるようになります。

チャット機能の実装

Expression Blendを使用してコントロールUIをデータバインドし、UIの対話性を調整し洗練したところで、Visual Studioに戻って、UIのチャット動作機能を実装するコードを書きましょう。

厳密には、以下のコードをページのコンストラクタに追加して、ChatSessionをリモートユーザで初期化し、その後"送信"ボタンがクリックされてメッセージをリモートユーザへ送信する時の処理を行います。

上記のコードを追加しアプリケーションを再起動すると、RemoteUserName（前に定義したデザイン時の仮データの代わりに）として、"ScottGu" がChatSessionにデータバインドされているUIを見ることができます。メッセージテキストボックスに文字を入力してカスタマイズされた送信ボタンをクリックすると、ListBoxは自動的にチャット履歴を更新します。 :

何故ListBoxが自動的に更新したのでしょうか？これはListBoxがChatSession.MessageHistoryプロパティにデータバインドされているからです。この型はObservableCollection<ChatMessage>です。つまり、新しいChatMessageオブジェクトがそこへ追加された時に、コレクションが自動的に変更告知を発生させて、それをListBoxが検知し、自分自身を更新する時にその新しいデータを使用しているのです。

ListBoxにこれらの変更を反映させるために明示的なコードは必要ありません。アプリケーションのクリーンなビュー・モデルバインディングアーキテクチャーが自動的にこれを処理してくれます。

まとめ

Expression Blendでサポートされている機能を少しだけご紹介しました。これらの機能はすべてSilverlightおよびWPFプロジェクトの両方で動作します。これら全ては今回のExpression Blend2.5 Marchプレビューで出荷され、間もなくダウンロードすることができるようになります。

Visual Studio 2008 とExpression Studioが、素晴らしいRIAソリューションを構築する時に、多大な生産性と力を提供することにお気づき頂けると思います。開発者とデザイナが同じプロジェクトに取りかかる時、これらを一緒に使用することができます（そしてお互いに事故的な介入を避けることができます。）。また1つのマシン上で両方を簡単に開き、1つのアプリケーションを同時に編集することができます。

ダウンロードができるようになりましたら、Expression Blend（およびまだカバーしきれていない多くの機能）についてもっとブログに書きたいと思います。また上記の簡単なチャット例も、Silverlight 2のベータ1が出荷された時に、そのコードをご自身で開いて起動できるように、ダウンロード用に投稿したいと思います。

Hope this helps,

Scott

ScottGu's blog translated by Chica @ Wankuma

※本翻訳に関しまして、Scottさんにはご了承頂いております。