このブログは、ホワイトペーパー「アプリケーション開発のためのUIコントロールガイド」の第1章でで述べられているUIコントロールの概要や、要素、検討すべきタイミングなどの内容を記したものです。
全体の目次やPDF版のダウンロードについてはこのブログの最後をご覧ください。
- UIコントロールがアプリケーション画面のほぼ全てを占める
- UIコントロールはデータを可視化する
- UIの大きな６要素
- UIに関わるほぼすべてのことが選択するテクノロジーに依存していることを再確認する
- 画面設計・要件定義段階での利用のススメ
- 非機能要件の重要性
- UIコントロールの選択肢を増やしておこう
- 全体目次およびPDF版のダウンロード
UIコントロールがアプリケーション画面のほぼ全てを占める
ユーザーインターフェイスが画面に展開する中で、多くの面積を専有し、ユーザーからの操作の対象になるのがUIコントロールです。ラジオボタンやリストコントロールなどのOSやブラウザが提供している標準コントロールに加え、プラットフォームによっては私どものようなサードパーティが提供するUIコントロールも合わせて存在します。特にLOBアプリケーション（Line Of Business:業務アプリ）においては、UIコントロールそのものの使い勝手やパフォーマンスが、アプリケーション全体のUXを左右する重要な要素になります。
UIコントロールはデータを可視化する
UIコントロールは、アプリケーションが対象としているデータとつながり、これを可視化するものです。チャートなどであれば想像しやすいのですが、大型のUIコントロールであるデータグリッドなども表形式でのデータの可視化の一つですし、もっとシンプルなボタンのようなコントロールでも背後にあるデータの可視化であるといえます。だとすると、UIコントロールがデータとどのようにつながるのか、どのようなコードを書く必要があるのか、そのやり方はプラットフォームの標準にしっかり準拠しているか、ということがとても重要になります。UIコントロールを大別すると、大きく分けて前述のデータの可視化をするデータプレゼンターと呼べるようなUIコントロールと、それらのUIコントロールを内包してレイアウトを担当するレイアウトコントロールに分けることができます。レイアウトに関しても、プラットフォーム標準の仕組みを妨げずに、スムーズな利用が可能になることがとても重要となります。今回皆様にお届けするUIカタログに関しても、この2種類に該当するものが紹介されています。
データプレゼンターに該当するようなUIコントロールにおいては、どのようにしてデータを格納できるのか、データバインディングのような変更通知機能を持っているのかについても確認しておく必要があるでしょう。このようなデータとUIコントロールの関係については、ベースになるUIテクノロジーの選択が大きく関係してくることになります。例えばWPFであればデータセットとデータバインディングということになりますし、ウェブであれば利用するフレームワークによっても作法が大きく異なります。
データを可視化するわけですから、どの程度のデータの量であればスムーズに見せられるのか、といったパフォーマンスに関わる部分もUIコントロールを選ぶ上でのキーポイントになります。大量データを扱う上で「仮想化」のようなパフォーマンスを向上できる仕組みを備えているか、そもそもレンダリングスピードが早いか、扱うことはできるが画面上でちらつくなどのUXに関わる悪い挙動がないかなどについても確認するようにしましょう。
ただし、あまりに大量のデータを一度に画面に表示したいという「要求」ある場合には、冷静に本当に一度に出すことが必須であるのかについてもエンドユーザーと話をしておきたいところです。製品においては同じようなコントロールが複数画面で登場するため、最終的にはある程度表示できてもパフォーマンスが悪くなる場合もありえるからです。
UIの大きな６要素
これまでのUIに関わる設計のやり方において、例えばMVCやMVVMといった概念の中でもUIは「V」という一つの平たい概念の中で語られることが多かったように思います。しかし、実際のUIはもっと多くの要素を含むものです。分類の仕方にはいくつかの切り口がありますが、下記の6要素での分解を紹介させていただきます。
前述の通り、UIコントロールがアプリケーションの画面のほぼすべてを占めることになります。ただし、その他の要素も絡み合ってUIを形成しているため、同様にしっかりと気配りをしておく必要があります。
UIに関わるほぼすべてのことが選択するテクノロジーに依存していることを再確認する
UIはソフトウェア開発における重要な要素です。ソフトウェア開発の一部である以上、必ずベースとなるプラットフォームやテクノロジーの選択が存在します。この選択によってUIで表現可能な範囲が決まることになるため、UIをデザインする立場であるデザイナーも、しっかりとテクノロジーの特性や制限を把握しておく必要があります。このシンプルな認識をチーム全体が持っていなければ、実際には「しわ寄せ」をデベロッパーが全て吸収することになってしまいますので注意が必要です。
このようなテクノロジーの特性を把握したUIデザインが行われることは、DevOpsに代表される繰り返し開発が行われる前提においては特に重要になります。デベロッパーがUIの開発に大きな手間をかけている場合や、それぞれの要素に大幅なカスタマイズをかけている場合、次のサイクルの開発において更新することが非常に難しくなってしまうからです。
画面設計・要件定義段階での利用のススメ
次回のリリースサイクルに備えて開発時に意識することとして、最も重要なことは「UI要件のインパクトを事前に可能な限り詳細に把握する」ことです。そのために重要なことが、要件の検討自体、お客様と行う場合でも社内で行う場合でも、実際に選択したテクノロジーとUIコントロールの組み合わせで無理なくできる範囲がどのレベルなのかを把握しておくことです。
このとき、UIコントロールの機能をしっかり把握しておくことが必要です。
レベルにはいくつかの段階がありますが：
- UIコントロールの設定だけで実現できる機能
- 拡張ポイントを利用した少ないカスタムコードで実現できる機能
- UIコントロールのソースコードレベルに手を入れるなど、多くのカスタムコードが必要なレベルの機能
大きく分けて上記の3つのレベルが考えられます。このとき、標準コントロールのみを利用するようなケースでは、レベル１だと考えていたものが２や３のレベルだった、ということはよくある話です。そのため、どのUIコントロールを選択すればレベル１で実装可能なのか、そのコントロールでのレベル２はどのような実装になるのかなど、デベロッパーの把握した内容をデザイナーや要件定義を行うメンバーは把握しておくと良いでしょう。
非機能要件の重要性
前述のUIコントロールの機能に関しては、純粋な機能要件だけではなく、非機能要件のレベルも重要になります。カスタマイズを入れてみたらパフォーマンスが出なかった、では業務アプリケーションとして成り立たなくなってしまいます。
大量データをバインディングした際のパフォーマンス、スタイルやアセットの適用のしやすさ、そもそものUIコントロールレベルでの使い勝手、メモリの使用量など、非機能要件についても使う部品の限界を知った上で要件を検討できれば、あとで困る可能性を最小化することができるはずです。
UIコントロールの選択肢を増やしておこう
標準UIコントロールのみを利用してアプリケーションを実現するのは、絵画を描くときに色の三原色しか渡されないような状況と同じです。それがOSSであれ、有償のUIコントロールであれ、選択肢をできるだけ多く把握し、あるタイミングで最適なものを利用できるように情報を蓄積しておくと良いでしょう。そうすることによって、ニーズにピッタリとハマる「色」のUIコントロールを選ぶことができるようになるはずです。
次節では、UIコントロールのなかでも特に「有償コントロールを利用する意義」について解説していきたいと思います。
全体目次およびPDF版のダウンロード
「アプリケーション開発のためのコントロールガイド」ではこのエントリの他にも「有償コントロールを利用する意義」やInfragistics Ultimateで提供しているさまざまなUIコントロールの特性や利用ポイントをまとめた「UIコントロール選択ガイド」をご準備しています。
オンライン版では数週間に渡り1つ1つのトピックについて連載します。
ローカル環境で全文をご覧になりたい場合は、こちらよりダウンロード頂けます。
ぜひ、ご活用ください。
