NetAdvantage for XAML 11.2 の Resource Washer のご紹介

おまたせ致しました!昨日 XAML 系製品をリリースし、2011 Vol.2 全体のリリースが完了しました!本リリースを含め、弊社では「Ease-of-use :使いやすさ」「Performance :パフォーマンス」「Styling :スタイリング」の3本の柱に注力をしております。

その中でも、以前の BLOG 記事でもお伝えした「スタイリング」については、ユーザーインターフェイスに統一感を持たせて、一貫性のある UX を提供するにあたって重要な要素であるといえます。以前の記事では Windows Forms における AppStylist や jQuery の theme roller の話もさせて頂きましたが、 XAML 系製品に新たに搭載された Resouce Washer について紹介させて頂きました。これに関しまして、実際にどんな事が行われているのか、といったご質問を幾つかいただいておりましたので、 本社の BLOG に掲載されていた記事を和訳し、意訳を加える形で再度ご紹介させていただきたいと思います。(個人的にはこの機能はかなり気に入っております。是非実際の動作をサンプルでお確かめ下さい!)


原文:Introduction to Resource Washing in NetAdvantage for Silverlight 11.2 Thanks, Damyan!

トライアルダウンロード:http://jp.infragistics.com/dotnet/netadvantage/ultimate.aspx

サンプルファイル:こちらからダウンロードください

リソースウォッシャーは XAML によるクロスプラットフォームのコンポーネントです。目に見える形のあるものではありませんが、外観についての機能となります。この機能は、単色あるいは複数色を指定された XAML のリソースディクショナリを指定した単色で「染める」ことで、 UI のスタイル適用においてドラマチックな効果を得るためのものです。

リソースディクショナリで提供されるため、アプリケーション全体のカラースキームを変更することが可能になります。この機能はオリジナルのブラシ/カラーを変更するのではなく、ディクショナリのコピーを作り、設定に従ってコピーに対して変更を行います。そのため、オリジナルのディクショナリを変更することなくランタイムにて処理されます。リソースディクショナリは、アプリケーションの中のコンポーネントによって使われるスタイル/テンプレート/カラー/ブラシなどの共有オブジェクトのコレクションを含んでおり、リソースウォッシャーはそれらに対して単色指定により選択されたモードに従って色の変更を加える処理になります。

ウォッシュモード

リソースウォッシャーは2つのモードを備えています。

  • SoftLightBlend - これはデフォルトのモードで、RGBのそれぞれを指定された単色と混ぜ合わせることをしています。これは服などを色のついた水で染めるような処理であると想像すれば分かりやすいでしょう。下記の実例をご覧ください。

背景に LinearGradientBrush を適用した2つのボーダーがあります。元々の設定ではこのような状態でした。

これに対して、「赤」でランタイム時にリソースウォッシュするとこのようになります。

見ての通り全域に「赤色」が混ざり、カラーパレットが変更された状態になっています。

  • HueSaturationReplacement – このモードは、 一色のみを混色することでは十分に色が支配的な状態にならない場合に、一色を使って色相( Hue )と彩度( Saturation )を入れ替えてしまいます。そのため明度のみが残り、濃淡だけでグラデーションがつくことになります。

上記と同様のボーダーをこのモードでシアンを指定した場合:

今度は全体がシアンと明度だけで染められています。

リソースウォッシャーを利用する

このコンポーネントを利用する最初のステップは参照とネームスペースの設定です。リソースウォッシャーは、ベースのアセンブリに含まれています。 Silverlight の場合は InfragisticsSL4.v11.2.dll です。かつネームスペースを以下のように設定してください。

  1. xmlns:ig="http://schemas.infragistics.com/xaml"

そして、スコープに従って該当コンポーネントのリソースとして参照します。(例えば UserControl の中です)基本的な設定は XAML とコードの中に設定できます。プロパティは「読んで字のごとく」のものばかりです。 WashColor , WashMode, そして AutoWash です。最後の一つが SourceDictionary となります。 XAML で記述し、オートウォッシュを利用するとこのような形になります:

  1. <UserControl.Resources>
  2.     <ig:ResourceWasher x:Key="resWash" AutoWash="True" WashMode="SoftLightBlend" WashColor="Azure">
  3.         <ig:ResourceWasher.SourceDictionary>
  4.             <ResourceDictionary Source="Styles.xaml"/>
  5.         </ig:ResourceWasher.SourceDictionary>
  6.     </ig:ResourceWasher>
  7. </UserControl.Resources>

コードで制御するやり方の利点は、処理を動的にできることです。上記の例ではオートウォッシュが設定されており、アプリケーションの起動時に設定されるため、 styles.xaml で設定されたオリジナルの状態が表示されることはありません。このコンポーネントのプロパティはデフォルト値を持っており、 WashColor のデフォルトカラーは透明であるため、このままではなにも表示されなくなってしまいます。ウォッシュの実行のために2つの方法があります。

  • AutoWash を false に設定し、リソースウォッシャーの WashResources() メソッドをイベントハンドラでコールします:
  1. using Infragistics;
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2. {
  3.     ResourceWasher resWash = (ResourceWasher)this.Resources;
  4.     resWash.SourceDictionary = Application.Current.Resources;
  5.     resWash.WashResources();
  6. }
  • WashColor を設定せず、AutoWash を設定しません。(デフォルトは true です。)その後イベントハンドラの中で WashColor を設定します。リソースウォッシャーはこの設定で自動的にリソースを変更します:
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2. {
  3.     ResourceWasher resWash = (ResourceWasher)this.Resources;
  4.     resWash.WashMode = WashMode.HueSaturationReplacement;
  5.     resWash.WashColor = Colors.Cyan;
  6. }

更なるカスタマイズ

  • アタッチドプロパティ

Styles.xaml のリソースディクショナリの中には、他にも幾つか有用なものがあります。:

  1. <ResourceDictionary
  2.    ...
  3.    xmlns:ig="http://schemas.infragistics.com/xaml">
  4.        <SolidColorBrush x:Key="ReallySolid" Color="DarkGray" ig:ResourceWasher.IsExcludedFromWash="True"/>
  5.     ...
  6. </ResourceDictionary>

リソースウォッシャーはブラシに対して2つのアタッチドプロパティを追加しています。一つは true に設定することでウォッシュ処理の対象外にするものです。

もう一つのプロパティは、ブラシをグループに設定するものです。

  1. <SolidColorBrush x:Key="grp1" ig:ResourceWasher.WashGroup="WashGrp1" Color="Coral"/>

これらのグループは、リソースウォッシャーの WashGroupCollection の中で設定され、グループごとに個別のウォッシュ処理の設定を行うことができます。

  1. <ig:ResourceWasher x:Key="resWasher">
  2.     <ig:ResourceWasher.WashGroups>
  3.         <ig:WashGroupCollection>
  4.             <!--This group will be washed in Blue instead and in HueSaturationRelacement mode-->
  5.             <ig:WashGroup Name="WashGrp1" WashColor="AliceBlue" WashMode="HueSaturationReplacement" />
  6.             <!--This group will be washed in Magenta and with the default mode-->
  7.             <ig:WashGroup Name="WashGrp2" WashColor="Magenta"/>
  8.             <!--This group will be washed in default colour(black) and mode-->
  9.             <ig:WashGroup Name="WashGrp3"/>
  10.         </ig:WashGroupCollection>
  11.     </ig:ResourceWasher.WashGroups>
  12. </ig:ResourceWasher>

是非皆さんの UI にてリソースウォッシュをお試しください!

リソースウォッシャーを利用するメリットは、色の変更を簡単に行えることではありますが、最も効果を発揮するのは xamGrid のような複雑なスタイリングが適用されたコントロールのスタイル制御を一括して行えるところです。手動でも確かに可能ではありますが、設定が多ければ多いほど変更が面倒な作業となります。ランタイム時に xamColorPicker と組み合わせればユーザーに自由な配色設定をする機会を与えることができ、全体のバランスを崩さずにパーソナライズされた体験を提供することが可能になります!

XAML は大変自由度が高いだけに設定できる項目も多く、スタイル設定に難しさを感じている方もいらっしゃるようです。そんなかたに是非こちらのリソースウォッシャーを使っていただきたいと思います。まさに目から鱗の簡単さです。

いや、そうではなくて配色そのものに迷ってしまう??もしそうであれば、是非是非弊社の UX ワークショップ の受講もご検討ください!一般的な UI における配色の基本/どうしてあの色はある程度ウケがいいのか?などもお伝えしております!次回パブリックワークショップは2月23日(木)24日(金)を予定しており、皆様のお申し込みをお待ちしております!

Is JavaScript right tech for RIA ?

 「Silverlightの最大のライバルはFlashではなくJavaScript」–専門家らが指摘:ニュース – CNET Japan

JavaScriptの動作速度が大変に早くなっていることを引き合いにして、Silverlightを含む様々なRIAテクノロジーの競合がJavaScriptになる、としている記事が出ていました。私としては、JavaScriptの言語としての優劣を語るつもりはありませんが、少し違った視点があるように思いました。
“Is JavaScript right tech for RIA ?” の続きを読む

popfly : public beta is now available with Japanese introduction

Silverlightベースで、ノンコーディング (ドラッグ&ドロップ) での Web サービスのマッシュアップを可能にするpopflyがpublic betaになり、さらに日本語情報がアップされました。

やっぱりphoto系が多いみたいですが、個人的にはfacebookの事例を参考にしたいです。featureはこうやって開発されるというよりも紡がれるようになっていくんでしょうね。

REMIX 07 Tokyo 無事終了しました

無事REMIX 07 Tokyoが終了しました。参加頂きました皆様、本当にありがとうございました。セッションの方はあまりテクノロジーの話ではありませんでしたが、会場のみなさんの反応が結構良かったのでこちらがびっくりしました。思った以上にユーザーエクスペリエンスへの期待が高まってきている現れかも知れません。
セッションの資料を.pdf化したものをアップロードしました。話のメインの部分は出せないものが多いですが、ご質問などお待ちしております。

Expression Blend 2 September Preview : new features

Expression Blend 2 September Previewをいろいろ試しているところです。特徴的な機能追加については開発チームのブログエントリーが参考になります。特に気に入っている追加機能はやはりStoryboardのハンドリング周辺の改善で、簡単に複製したりリバースしたりすることができるほか、イージング設定を細かくつけられるようになりました。(社のインタラクションデベロッパーからは「まだまだだ」と言われる可能性があるけど)多く出ていた要望でもあったので順調に改善が進んでいることを知って喜んでいます。StoryboardがFlashのタイムラインと構造や考え方が違う部分はXAMLの肝だと思っているので、今後も力を入れて改善を行ってほしいところですね。まだまだ手書きをするような箇所も多いのでSplitビューが使えるようになったのも助かります。WPFやSilverlightなどのランタイムに特化した形でコードビハインドロジックを書けば色々なことができるのはわかっていても、独立したXAMLのみの範囲でどこまで表現できるようになるかはとても重要に思えます。XAMLを利用するプラットフォームすべてで使えるようなXAMLを書けるようになるのが理想ですね。

Expression Blend 2 September Preview is released

Expression Blend 2 September Previewがリリースされていました。忙しくて気づいてなかったな。反省。ようやくVisual Studio 2008がサポートされましたので、最新のセットで使えるようになりました。まだしっかり試せていませんが、Storyboard周辺のサポートが強化されているようです。Blendはリリースのタイミングが本当に早いです。開発チームの皆さんは大変だろうなぁ。既存のプロジェクトのコンバートをして試してみたいと思います。

Generated XAML for Silverlight

SilverlightとFlashってどう違うんですか?という質問をこのところ色々な方から幾度となく聞かれるわけですが、.NET Frameworkが利用できてC#で開発できるとかそういう開発者向けの差異ではなく、ユーザー企業に向けてわかりやすい違いがあるとするならば、現時点でのHD映像の利用(Flash Playerもアップデート予定ですね)と、XAMLのランタイムパースぐらいではないかと思っています。もしかすると今後パフォーマンスでの差が出てくる可能性がありますが、今のところベータ版だったりするSliverlightと比べても仕方ないでしょう。

個人的に大きな意味があると考えているのはSilverlightがランタイムでXAMLをパースして実行することで、単純なXMLが生成できるどのようなサーバテクノロジーであってもSilverlightアプリを動的に生成できることになります。そうすると、ユーザーが利用する瞬間には静的になるものを夜中にでも動的に生成してしまっておくことが出来るので、パフォーマンスなどの観点で有利になります。生成を前提とした半動的なサイト構成が可能になりそうです。CMSなどとの相性も良いでしょう。また、XAMLが静的なファイルであればSEO/SEM的にも「サーチエンジンに喰われる」ようになっていくことが想像できます。

機能にまったく差がないとすれば圧倒的なシェアを持つFlashが優勢なんですが、特にWindowsでのシェアについては一気に巻き返す可能性がありますし、開発する側としては「取り得る選択肢」として早期にとらえておいたほうが良いと思います。 

Semi-Dynamic web architectureOriginally uploaded by Ken Azuma