Infragistics Application Styling Framework - 2 洗練されたデザイン作業

Infragistics NetAdvantageチュートリアルその10 - AppStylist for Windows Forms

2008/08/08 21:00

前回、インフラジスティックスがApplication Styling Framework（ASF）およびNetAdvantage AppStylistにて目指し、実現したものを紹介しました。今回は実際にNetAdvantage AppStylist for Windows Formsを用いてルックアンドフィールを設定する方法を紹介します。

はじめに

　前回、インフラジスティックスがApplication Styling Framework（ASF）およびNetAdvantage AppStylistにて目指し、実現したものを紹介しました。

　今回は実際にNetAdvantage AppStylist for Windows Formsを用いてルックアンドフィールを設定する方法を紹介します。

NetAdvantage AppStylist for Windows Formsとは

　NetAdvantage AppStylistは、NetAdvantage for .NET 2007 Volume 1 日本語版リリースの際に、グラフィックアーティストのために追加された機能です。NetAdvantage for .NET 2008 Volume 1 日本語版に付属する「NetAdvantage AppStylist for Windows Forms」は、スタイルライブラリからの画像アセットのエクスポート、スタイルライブラリのパーソナライズ、一度にメモリで複数のスタイルライブラリをロードする機能を含む多様な機能を提供します。

スタイルを編集するための4つの手順

　NetAdvantage AppStylist for Windows Formsは、グラフィックアーティストがなじみのあるツールと似たルックアンドフィールを提供するため、ツールを使用するための学習時間が短縮され、速やかに生産性が向上します。最初に起動するとまず、「はじめに」画面が表示され、4つの手順の説明が表示されます。

図1 NetAdvantage AppStylistの「はじめに」画面

1. スタイルライブラリの作成／読み込み

　最初の手順はスタイルライブラリを新規作成、あるいは既に作成されているライブラリを開くことです。［ファイル］-［新しいスタイルライブラリ］-［テンプレートから新しいスタイルライブラリ］メニューコマンドを選択すると、既存のスタイルライブラリに基づいて新しいスタイルライブラリを作成できます。

　テンプレートの一つである「Template_Office2007.isl」を使用すると、アプリケーションのユーザーインターフェイスがMicrosoft Office 2007と同様のデザインに設定されます。

図2 テンプレートからスタイルライブラリを選択すると、すべてのスタイルロールがそのルックアンドフィールにプリセットされる。

　テンプレートを選択すると、スタイルライブラリに定義されている色コレクションを選択、あるいは色見本をカスタマイズする形で、配色できるようになります。図2に示したOffice 2007テンプレートでは、ロイヤルブルー、ゴールド、およびオレンジに設定しています。この効果は、Infragisticsコントロール全体に渡り即座に適用され、右側にプレビューが表示されます。プレビュー画面では、実際にUltraWinGridコントロールで列を移動した場合やグループ化を行った場合のルックアンドフィールを確認可能です。

　これまで多くの場合、グラフィックアーティストが色を変更するには、アプリケーションプロジェクトのプロパティ設定変更が必要で、アプリケーション開発者の支援を必要としました。あるいは自分で変更するとしても、Microsoft Visual Studioや複雑なコントロールオブジェクトモデルでの作業に精通する必要があり、非常に時間がかかっていました。

　NetAdvantage AppStylist for Windows Formsでは、デザイナの使用により、手間をかけずに色を変更することができます。

2. プレビューキャンパスの利用

　NetAdvantage AppStylist for Windows Formsの特徴は、外観設定を行うコントロールが、適用されるアプリケーションスタイリングのプレビューと共に配列されるところです。すべてのNetAdvantage for Windows Formsビジュアルコントロールが表示され、関連するコントロールのグループの上部に沿って並んでいるタブのいずれかを選択することでアクセスが可能です。プレビューキャンバスは、最終的な外観表示の高い忠実性を目指しており、また高いインタラクティブ性により実際の動作とコントロールの外観を確認することができます。

図3 ［プレビュー］タブを選択すると関連コントロールの配置が表示される。これによりスタイルライブラリのルックアンドフィールを広範に管理できる。

3. マウスポイントでのロール選択

　ユーザーインターフェイスコントロールがスライドやポップアップ、展開、縮小など多数の機能を持つ場合、あらゆる機能に対し、1つの画面ですべての状態のデザインを行うことは難しくなります。また、一度に表示できるフラットキャンバスには限りがあるため、ロール選択ツールのヒントがデフォルトで使用可能となっています（［ツール］-［オプション］で無効にすることもできます）。プレビューキャンバスでUI要素上にマウスを置くと、マウスポインタが指しているUI要素と関連付けられたロールを表示します。また、表示されたショートカットキーを押下することにより、ロールを選択することが可能です。

図5 ロール選択ツールのツールチップによって現在のマウスポイントにおいて選択可能なロールを明示する。

4. スタイルエクスプローラでのロール選択

　作業を行う際に、プレビューキャンバスでは表示できないコントロールの修正が必要な場合があります（コントロールの基底クラスなど）。この場合は、ロール選択ツールの代わりにスタイルエクスプローラを用います。

　スタイルエクスプローラではスタイル可能なUIロール、コンポーネントロール、共有（またはグローバル）ロール、およびリソースの階層的なカタログがツリー形式で表示されます。この視覚的なツリーは、スタイルの継承を確認できます。例えば、図6では、基本となる、Button、Buttonを継承したDropDownButton。DropDownButtonを継承したComboDropDownButtonを確認できます。

図6 スタイルエクスプローラすべてのUIロール、リソース、派生コントロールを表示

　この場合、Buttonのスタイルを変更することで、Buttonを継承しているコントロールすべてに設定が適用されます。

　スタイルエクスプローラのもう一つの強力な機能は、現在選択されているロールの［使用］リストです。これは、どのコントロールが現在選択されているロールの外観を持っているのかを確認できます。

UIデザイン用のツール群

　Adobe Photoshopなどの製品でグラフィックアーティストが慣れ親しんでいることは、ブラシ、ペン、鉛筆といった機能をツールパレットから選択するという概念です。NetAdvantage AppStylist for Windows Formsのプロパティリボンでは、スタイルロールの状態ごとに設定することができ（タブで状態を選択）、その状態で利用できる外観のカスタマイズツールだけがアクティブで表示されます。図7は、DropDownEditorButtonスタイルロールに設定できるプロパティの一部を示します。

図7 プロパティリボンによってDropDownEditorButtonロールについてホットトラック状態のグラデーション背景テクスチャを簡単にカスタマイズできる。

　UI設定の多くは、実際のコードでは.NET Frameworkにおける値、または背景についての"Solid"、"Gradient"、"Hatch"などの列挙体定数として表されます。NetAdvantage AppStylist for Windows Formsでは、ツールが自動的にこれらの値を設定するため、グラフィックアーティストは.NET Framework SDKの内部構造を意識をすることなく、スタイルを設定することができます。

NetAdvantage AppStylist for Windows Formsによる効率的なデザイン作業

　このようにアプリケーションのスタイルセットを短時間で作成できるNetAdvantage AppStylist for Windows Formsで、作業を開始するための4つの手順を紹介しました。

スタイルライブラリを作成、または既存のライブラリを開きます。
上のタブからプレビューキャンバスを選択します。
キャンバス内の項目にマウスポインタを移動します。
キーボードを使用して希望するロールにナビゲートするか、左のツリーからロールを選択します。

　Microsoft Visual Studio .NETのみを使用して同様のことを達成しようとすると、.NET Framework SDKおよびコントロールオブジェクトモデルに対する豊富な知識が必要となります。通常、この知識はグラフィックアーティストではなくアプリケーション開発者のみが持っているものです。従って、多くの組織が採用するソフトウェア開発ワークフローは、ユーザーエクスペリエンスのデザインという観点でみると、非効率的な場合が大半です。

作成したスタイルの適用方法

　NetAdvantage AppStylist for Windows Formsを用いてスタイリングが行われている間、アプリケーション開発者はアプリケーションの実装を行います。開発時の初期段階、また、開発プロセス全体を通して継続的に、グラフィックアーティストは.islファイルとしてパッケージされたスタイルライブラリを提供します。

　スタイルライブラリ（.islファイル）をロードする方法には、アプリケーションアセンブリ内にリソースとして組み込む、またはランタイムにWebサービスから取得するなど、いくつかの選択肢があります。すべての開発者が実行できる単純な配備方法は、.islファイルをプロジェクトに追加し、アプリケーションに以下のコードを追加してスタイルをロードする方法です。

StyleManagerの静的なLoadメソッドにファイル名またはストリームで.islファイルを指定（VB.NETの場合）

Infragistics.Win.AppStyling.StyleManager.Load("BlueGold.isl")

（C#の場合）

Infragistics.Win.AppStyling.StyleManager.Load("BlueGold.isl");

　アプリケーションにスタイルライブラリで定義された外観が即座に適用されます。既存のアプリケーションで外観を変更しようとすると、各フォームに存在するコントロールの数によっては、同じ結果を得るために数百のプロパティ設定が必要となる場合があり、エラーが発生しやすくなります。ASFでは開発全体を通じて既存の方法に比べ一瞬で設定が適用されるため、デザインチームメンバーにフィードバックを短時間で伝達することができ、修正も容易となります。