もう Windows Forms で UI を開発することは難しいのでしょうか?(1)

仕事柄、お客様からは利用するべき UI テクノロジーの選択について相談を受けることがよくあります。なかでもよく聞かれるのが、「リッチな UI を作るのであれば、もう Windows Forms を使うべきではないのでしょうか?」といった質問です。

もちろん「リッチ」の定義にもよるのですが、多くの場合要件を細かく聞いていくと「特に Windows Forms で開発しても問題ない、むしろ望ましい」と考えられるケースが想像以上に多いことがわかっています。UI テクノロジーの選択の基準はいくつかありますが、第一に要件に対するフィット感を確かめ、次に現在保有しているスキルセットとの連続性を考えることになります。そのため、要件的に十分であった場合には、現在利用しているテクノロジーを利用するのが最もリスクの低い行為であり、歴史の長い Windows Forms においては未確認のバグもほとんど無い状態でテクノロジーが枯れており、都合の良いことも多いのです。

リッチ UI に対して寄せられるニーズは大きく下記のようなケースが大多数を占めます。

1.スタイルを適用したい
2.柔軟なレイアウトを行いたい
3.利用したい UI コントロールが無い/機能が不足している

もし上記のような理由でWindows Forms の採用をやめ、別のプラットフォームに移行しようとしているのであれば、一旦弊社のコントロール製品である NetAdvantage For Windows Forms をぜひ一度ダウンロードいただき、実現できる機能をチェックしてみてください。弊社の製品の中でも最も歴史が長く、多くの市場からの要望に応えながら今日に至っているだけに、多くの良くあるニーズを満たすことが可能です。

トライアル版をダウンロード!

それでは順を追って課題を見ていきましょう。まずはスタイルです。

ユーザーインターフェイスに一貫性や統一感をもたせるにあたり、利用されているコントロールに対するスタイル設定はとても重要であり、iOSに代表されるなどの影響もあって現在注目されている領域です。多くの業務アプリケーションではデフォルトの状態のコントロールが使われていることが多いのですが、スタイル設定によって「仕上げ」処理を行うことにより、クオリティはずいぶん違って見えることも事実です。ここで問題になるのは、「設定できることがわかっていても時間をかけることが難しい」と判断されていることが多いことです。iOS や Windows Phone を例にとって考えみると、コントロールに適用されているスタイルはしっかりと一貫性を持っているため、利用していて非常に統一感を感じますが、スタイルデザインは単純な一枚絵を作るよりもずっと複雑な作業になります。

例えば、ボタンはmouseOver などのイベントに対して幾つかの状態を持っており、それぞれに対してボタンの形状や色の設定を持っている必要があります。かつ、通常はラベルを設定できるため、可変長の文字列を内包できるようにしなければなりません。XAMLならばかなり細かくこれらの設定を行うことが可能ですが、それでもなかなか骨の折れる作業となります。

そこで、もう少し手軽にスタイル設定を行う方法が望まれることになります。弊社では Windows Form で利用可能な AppStylist というツールをご提供しております。このツールを利用することで、用意された多くのプリセットのスタイルライブラリを適用することができ、スタイルライブラリの内容に変更を加える形で新たなスタイルライブラリを作ることも可能になっています。詳細は下記のBLOG記事を御覧ください。

アプリケーションデザインツール NetAdvantage AppStylist ご存知ですか?
NetAdvantage AppStylist ご存じですか? その2


[ AppStylist ]

AppStylist 自体はかなり細かい設定を行えるツールです(画面キャプチャをみていただければ多くの設定項目があることがわかります)が、2011 Vol.2 では新たに Office 2010 Black / Silver というスタイルライブラリも追加し、たくさんのスタイルライブラリを利用することができます。これらをそのまま使うもよし、少しだけ変更して使うもよし、というところですが、まずは「IG」というスタイルライブラリから確認してみてください。このスタイルライブラリは比較的最近用意されたもので、弊社のデザインチームがゼロからデザインしているものになります。Windows Form / Web / XAML それぞれの製品で同じデザインのスタイルライブラリを適用できるように用意していますので、まずはこちらをベースに検討されてみてはいかがでしょうか。

再掲となる部分も多かったのですが、今後しばらくは Windows Forms に再びフォーカスをあてて、スタイル以外にもレイアウトやコントロール利用の観点から掘り下げていきたいと思います。お楽しみに!

新年明けましておめでとうございます!

皆様、新年明けましておめでとうございます。インフラジスティックスに参加してようやく4ヶ月が経過しました。昨年いっぱいは様々な準備を行う一年となりましたが、皆様のお陰で無事第一回の UX ワークショップも開催することができ、感謝の気持ちでいっぱいです。旧年中は本当にありがとうございました!新年早々ではありますが、いくつかお知らせがございます。

無償セミナー「その UI 開発、新時代を戦えますか?~今から始めるマルチデバイスアプリ・タッチアプリ開発~」

2012年ですが、おそらくWindows 8 もリリースされることになり、これまでの iOS や Android に牽引される形となったスマートフォン/タブレットに代表されるマルチデバイスの需要がさらに喚起される年になるのではないでしょうか。このような状況を踏まえまして、弊社では新年早々ではございますがその UI 開発、新時代を戦えますか?~今から始めるマルチデバイスアプリ・タッチアプリ開発~と題しまして、日本マイクロソフト様と共同でセミナーを開催させていただくことになりました!既にお客様向けのメールでの告知を開始しておりますが、年末に開始したにも関わらずかなりの勢いで席が埋まりつつあります。ご興味のある方は是非早めのお申し込みをお願いできればと思います。

私も最初のセッションで話をさせて頂きますが、当日はマイクロソフト様からも講演をいただき、弊社からも後二人、おなじみの池原と、普段サポートの担当として活躍しております三田が「NetAdvantage の現在と未来」というタイトルで、弊社主力製品のロードマップや方向性も含めたお話をさせて頂きます。サポートの経験から来る生々しい話題も飛び出すかもしれませんので、是非皆様お誘い合わせの上ご参加くださいませ!

「Developer Summit 2012」セッション講演「UI のこれまでの10年とこれから」

また、2月16日(木)・17日(金)の二日間で開催されます、「Developer Summit 2012」におきまして、Mobile Technology トラックのオープニングトラックとして「UI のこれまでの10年とこれから」と題し、これまでの10年間を振り返りつつ、今後の UI の流れを考えていきたいと思います。初日最初のセッションということで少々緊張しておりますが、私もこの転機にて振り返る良いチャンスを頂いたと思い、色々と情報を整理しております。先ほどサイトを確認してみたところ、既に残席が「僅か」という状態になっておりました。ご参加いただく皆様、ありがとうございます!今回のデブサミは10周年ということもあって大変素晴らしいセッションがたくさんあります。これを読んでいただいている皆様と実際に会場でお会いできるのを楽しみにしております!

次回 UX ワークショップ、2月の23日(木)24日(金)の2日間で開催

告知が続いておりますが、最後!第一回を無事開催させて頂きました「UX ワークショップ」ですが、次回の第二回を2月の23日(木)24日(金)の2日間で開催させていただくことが決まりました!前回ご参加いただきました皆様からは、「日頃意識できていない点で考えることが、とても重要だと感じました。失敗を上げた後で考え方を整理するとその失敗は防げると気づくことができ、とてもよかったです。」「UX,UIの定義についてわかりやすかった。今後のUI設計について非常に参考になった。」というような、良いフィードバックもいただくことが出来ました。次回もしっかりと準備をして実施したいと考えておりますので、是非ご検討くださいませ。

time PIE between you and your customer

最後に、新年に気を引き締めるべく、本社訪問時にホワイトボードに書かれていた「心得」を掲載します。私達の製品やサービスに咲いていただける時間は皆さんの貴重な時間のほんの一部であり、頂いた時間を無駄にしないように、多くの価値を届けられるように2012年も頑張ってまいります。

新年早々の告知三連発でしたが、今後このブログの記事につきましても、後から振り返って意味のあるような内容にするべく、一層の充実を目指していきたいと考えておりますので、今後とも何卒よろしくお願いいたします!

 

 

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日(金)を予定しており、皆様のお申し込みをお待ちしております!

Windows Storeの登場は何を意味するのか?

//build/ 以後詳細な情報が公開されていなかった Windows Store ですが、遂に先日サンフランシスコにてイベントが行われ、ビジネスモデルなどの計画が明らかになりました。


Windows Store のビジネスモデル

多くのスマートフォンにおけるストアタイプの利益構造と同じで、初期の利益シェアは70%であるものの、25,000ドル以上を売り上げた場合80%に上昇するようです。多くのアプリの平均的な金額がどのあたりになるのか気になるところです。もちろん最大のインパクトとになるのは、このストアの対象になるのが現在4億を超えるPC全体に対するものになることです。Windows 8 自体が普及するのには時間がかかるのかもしれませんが、ARM CPU ベースの Windows 8 デバイスが出荷されることになれば、かなりのスピードで分母が増えていくことでしょう。既に Windows Live をベースにして課金可能な安定した基板を持っており、XBOX Live などでも応用をしているマイクロソフトですから、インフラが問題になることも無いのではないでしょうか。個人的にも、どのようなアプリケーションがストアに並ぶことになるのか、非常に楽しみです。エンタープライズ用途向けにはストアを経由しないアプリケーション配置の方法も用意されるようです。とはいえ、企業向けのアプリケーションであっても、ストア経由のアプリケーションから様々な影響を受けることは間違いないでしょう。


開発組織に対するインパクトは?

それでは、この動きは開発組織に対してどのようなインパクトをもたらすでしょうか。直近のスマートフォン市場を例にして考えてみます。現在非常に元気のよいスマートフォン市場ですので、新たにネイティブアプリケーションの開発に着手されている会社も多いようです。しかし、多くのケースで「これまでの開発とのスピード感の違い」について違和感を覚えておられます。これまでであれば、たとえコンシューマー市場向けのアプリケーションであったとしてもある程度バージョンリリースで開発期間を固定できたのに対して、スマートフォン向けアプリとなった場合には終わりのないアップデートが待っています。ストアというインフラを通じて販売機会がこれまでになかったほど広がるのと同時に、多くの選択肢の中から選択され続ける努力を怠ることができない、待ったなしの環境に踏み込む事にもなるのです。

そうなってくると、これまでの開発の速度/体制では顧客からの要求に追いつけなくなってしまうケースも多く出てくることでしょう。そんなタイミングであるからこそ、インフラジスティックスとしては UI コンポーネントを利用して開発生産性をこれまで以上に高めることで、この流れに是非乗って頂き、他社との差別化を行い、機会の増大による新たな利益を手に入れていただきたいと考えております。


インフラジスティックスがお手伝いできることは何か?

実は、入社してからの数カ月の間に多くのお客様とお話させていただいた結果として、弊社の製品にご満足いただき、大変うまく活用していただいているお客様にはある共通点があることがわかりました。それは「設計の段階で要件を UI コントロールで満たすことが出来るかを評価」され、それによって開発の難易度を判断し、機能開発の可否判断をされていることです。大変シンプルな事実なのですが、いざ開発に入ろうとする瞬間に生産性をあげるために UI コントロールを探され、結果として弊社の製品にたどり着いて効果を上げる場合ももちろんあるのですが、ユーザインターフェイスに関わる仕様が開発の手戻り要因の多くを占めることは明らかであり、設計の段階で正確なイメージを持っていただくことが難しい領域の一つです。この段階で、弊社の UI コントロールとその機能をひな形として使って頂き、これで十分か、これ以上に必要なところはあるか、と仕様を詰めていただくと、多くのケースで認識齟齬が少なくなり、正確な見積もりをしていただくことが可能になります。もちろん、 UI コントロールを積極的に使っていただくことでプロジェクト期間全体を短くしていただくことが可能です。(仕様を詰める段階で、弊社のサンプルブラウザを使っていただいてるお客様もいらっしゃいました)

effective way to utilize UI controls

ラフな形でコントロールを並べた状態をプロトタイプとして捉え、前述のような設計の推敲に活かされているお客様もいらっしゃいます。やり方はともかく、弊社の UI コントロールを使っていただくことで「UI 開発における手札が多く増えた状態」になるはずですので、設計時点で具体的な状態を意識して頂ければ一層効果が期待できると思われます。また、設計時点での可否判断において弊社のサポートをうまく利用して頂ければ、一層効率よくその後の開発プロセスを進めていただけるはずです。(ある特定の仕様が弊社の UI コントロールで実現できるか?といった内容でサポートへの問い合わせをしていただくケースも多くございます。)

また、そのようなお客様では、年に2回以上行われている弊社の製品アップデートに関しても、新たに手札が増え、既存の環境に対しても新たに価値提供できる可能性があると考えていただいているケースが多く、弊社の製品アップグレードがそのままお客様の製品の価値向上につながっている状態になっているケースもあり、インフラジスティックスとしても大変嬉しく感じております。

もちろん、最初から弊社のコントロールを購入して頂いて手札を増やしていただけると大変嬉しいのですが、それが難しい場合でもトライアルを利用していただくことで、20日間サポート付きでご利用頂けますので、この期間を有効活用していただいてうまく設計工程を進めて頂き、結果として弊社のコントロールが役に立つとわかれば購入していただく、という流れが自然かつ満足度が高いのではないかと思います。

また、要件から実際の実装される姿を想定して設計する時に、 UI コントロールを利用したどのような実装パターンがあるのかについても検討することになるかと思います。弊社はこれまでも Quince という UI パターンブラウザを提供して参りましたが、それらを具体的にどのように UI に落としこんでいくかについて UXワークショップにおいて詳しくお伝えしておりますので、こちらへの参加も合わせてご検討いただければと思います。

Metro の原則でも出てきましたが、あくまでも重要なのは「何を見せるか=コンテンツ」であり、皆様のアイデアから生まれる創造的な部分です。これに対してインフラジスティックスは様々な「ひな形=パターン」を提供し、皆様が本当に差別化出来るポイントに集中していただくためのお手伝いをしたいと考えております。是非弊社の製品/サービスの活用をご検討いただければと思います。


今回は非常に抽象的な内容となってしまいましたが、この数ヶ月感じていたことを Windows Store の報道をきっかけとしてまとめて書かせて頂きました。つい先日NetAdvantage 2011 Volume 2 をリリースさせていただいたところですが、今後も更なる価値向上を目指してアップデートを続けていき、定期的に私を含めたチームBLOGにてご案内していきますので、是非よろしくお願いいたします!

NetAdvantage 2011 Vol.2 スタイル編

今回は、これまでの Metro のお話を少しお休みして、リリースが目前に迫っている NetAdvantage 2011 Vol.2 に関する紹介をさせて頂きます。(たまには製品紹介メインにもお付き合いください!)まず、それぞれの製品における機能面での紹介は、既に弊社の塚越がBLOGに記事を掲載しております。

【Winform】NetAdvantage 次期バージョン 2011 vol.2 追加予定の新機能

【ASP.NET】【jQuery】次期バージョン 2011 vol.2 追加予定の新機能

【Silverlight】【WPF】次期バージョン 2011 vol.2 追加予定の新機能

まず、Windows Form / ASP.NET / jQuery / Silverlight / WPF の主要5製品について解説しています。たくさん興味深い機能が追加されていますが、UX アーキテクトの視点からいくつかピックアップしていきたいと思います。これらの5製品は、下記の3グループに大別できます。

  1. Windows Form
  2. Web (ASP.NET / jQuery)
  3. XAML (Silverlight / WPF)

まず、Windows Form についてはこれまでの宣言通りに機能追加を続けていく予定で、製品群の中では独立して製品開発が続いています。次にWeb ですが、現在はASP.NET がコントロールの種類なども含めてまだまだ先を行っているものの、徐々に jQuery が差を縮めてきて、最終的にはほぼ同じ機能をXAMLのようにリリースしようとしているグループです。最後にXAMLですが、ここ数回のリリースの中で徐々に進めてきた「Shared XAML Strategy = 可能な限りXAMLを共通化していく戦略」に沿って、ほとんどのコントロールがどちらのテクノロジーでも利用できるようになりました。

弊社の主要製品は下記の3つに大別できます。

  1. Windows Form = 既存アプリケーション/システムのサポートや改善
  2. Web (ASP.NET / jQuery) = Web 標準にフォーカスしたクロスプラットフォーム対応
  3. XAML (Silverlight / WPF) = XAML 製品群におけるスキルポータビリティの追求

Web / XAML それぞれにモバイルという軸も存在していて、 jQuery mobile (まだ製品予定として発表できる段階ではありませんが、取り組んでいます) や Windows Phone で対応しています。

すべての製品に共通して目指しているのは、「ユーザーインターフェイス開発において、いかに生産性を高め、優れたUXを実現するための支援が出来るかを追求すること」です。この共通の目標に対して様々な取り組みがされていますが、まず弊社のコンポーネントにおけるスタイル設定について紹介させてください。

ユーザーインターフェイスに一貫性や統一感をもたせるにあたり、利用されているコントロールに対するスタイル設定はとても重要であり、iOSに代表されるなどの影響もあって現在注目されている領域です。多くの業務アプリケーションではデフォルトの状態のコントロールが使われていることが多いのですが、スタイル設定によって「仕上げ」処理を行うことにより、クオリティはずいぶん違って見えることも事実です。ここで問題になるのは、「設定できることがわかっていても時間をかけることが難しい」と判断されていることが多いことです。iOS や Windows Phone を例にとって考えみると、コントロールに適用されているスタイルはしっかりと一貫性を持っているため、利用していて非常に統一感を感じますが、スタイルデザインは単純な一枚絵を作るよりもずっと複雑な作業になります。

例えば、ボタンはmouseOver などのイベントに対して幾つかの状態を持っており、それぞれに対してボタンの形状や色の設定を持っている必要があります。かつ、通常はラベルを設定できるため、可変長の文字列を内包できるようにしなければなりません。特にXAMLではかなり細かくこれらの設定を行うことが可能ですが、なかなか骨の折れる作業となります。

そこで、もう少し手軽にスタイル設定を行う方法が望まれることになります。弊社では Windows Form 及び ASP.NET で利用可能な AppStylist というツールをご提供しております。このツールを利用することで、用意された多くのプリセットのスタイルライブラリを適用することができ、スタイルライブラリの内容に変更を加える形で新たなスタイルライブラリを作ることも可能になっています。詳細は下記のBLOG記事を御覧ください。

アプリケーションデザインツール NetAdvantage AppStylist ご存知ですか?
NetAdvantage AppStylist ご存じですか? その2


[ AppStylist ]

AppStylist 自体はかなり細かい設定を行えるツールです(画面キャプチャをみていただければ多くの設定項目があることがわかります)が、2011 Vol.2 では新たに Office 2010 Black / Silver というスタイルライブラリも追加し、たくさんのスタイルライブラリを利用することができます。これらをそのまま使うもよし、少しだけ変更して使うもよし、というところですが、まずは「IG」というスタイルライブラリから確認してみてください。このスタイルライブラリは比較的最近用意されたもので、弊社のデザインチームがゼロからデザインしているものになります。Windows Form / Web / XAML それぞれの製品で同じデザインのスタイルライブラリを適用できるように用意していますので、まずはこちらをベースに検討されてみてはいかがでしょうか。

一方、jQuery には弊社ではスタイル設定用のツールを用意していません。というのも、jQuery UI のオフィシャルなツールとして ” Theme Roller ” というツールが用意されている為です。この Theme Roller に関しても、既に弊社の池原がBLOGで記事を書いています。

NetAdvantage for jQuery コントロール + Theme Roller [Tips]


[ ThemeRoller ]

jQuery においても、先ほど書いた「IG」と同じスタイルを適用することができます。また、Theme Roller にある Theme も同様に適用可能です。これに関するオンラインヘルプへのリンクもご紹介しておきます。

NetAdvantage for jQuery のスタイルおよびテーマ設定

XAMLプラットフォームにおいては、スタイルの自由度はWindows Form や Web のレベルとは大きく異なり、非常に極端なものも含めておよそ思いつく限りのことが出来るようになっています。ヘルプでも、独立した「デザイナーガイド」を用意している程です。これらの編集には Expression Blend を利用するのが最も確実な方法です。なのですが。。。あまりに自由度が高すぎるため、手をつけるのが難しいと感じている方も多いようです。NetAdvantage ではOffice2010テーマと呼ばれるテーマリソースを Rsource Dictionary 形式で用意していますので、こちらを利用していただくことも可能です。また、2011 Vol.2 においては更に「リソースウォッシング」という機能を追加しました。これは、単色を指定することでコントロールに適用された濃淡によって外観の全てを変更できる機構です。この機能を利用すれば、外観全体を簡単に変更できるようになります。実際に色がどのように変わるかが見えないとイメージがつかないと思いますので、下記BLOG記事(英語)もご参考ください。


[ office2010テーマをオレンジ一色でリソースウォッシュした例 ]

Introduction to Resource Washing in NetAdvantage for Silverlight 11.2(英語)

このように、弊社が提供する製品群において、できるだけ簡単に統一したスタイリングを提供できるように様々な機能をご用意しております。機能に比べてなかなか手が回らない部分ではありますが、うまく「仕上げて」いただいて、品質を高めていってください!NetAdvantage 2011 Vol.2 がリリースされたら、リソースウォッシュも含めて是非試してみてください!