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