ビジネスデータの視覚化
これまで、WebやWindowsフォームで実装される標準的なビジネスアプリケーションでは、多くが表コントロールを好んで採用する傾向にありました。ビジネスデータの多くは列と行の2次元で表現されるものが多く、リレーショナルデータベースのテーブルに対応した表現として、表は最も簡単で理解しやすい視覚表現です。
PCで操作することが前提であれば、表コントロールはシンプルで開発者にとっても利用者にとっても使い慣れたUIでした。グラフなどデータの視覚化を行う場合でも、表が中心となってそこから編集用のフォームやグラフなどの専用のビューを派生させる設計が一般的でしょう。
ところがスマートフォンを対象とした場合、表コントロールは必ずしも使いやすいものではありません。スマートフォンでは解像度に対して画面が小さく、複数のウィンドウを表示することができません。現状のスマートフォンの利用目的の多くが閲覧に特化していることからも、データの抽象的な意味を抽出し、複雑なデータの関係を視覚的に表現することでアプリケーションの価値を高めることができます。
実践ではネットワーク上のサービスにリアルタイムのデータを問い合わせるシナリオが一般的ですが、この場では単純化するためにローカル上で生成したサンプルデータを表示します。サンプルデータは、単純に整数型の値を提供する型を用意し、これのコレクション（IEnumerable）をルート要素のDataContextプロパティに設定します。
WPFやSilverlight世代のフレームワークは、モデル（データ）とビュー（コントロール）を分離することが容易であり、これらを結びつけるバインディングの仕組みが用意されています。NetAdvantage for Windows Phoneにおいてもこの恩恵はそのまま踏襲されています。XamDataChartコントロールを記述したXAMLコードでバインディング元を指定することで、データと画面デザインを分離して開発を進められます。
using System;
namespace Sample
{
public class DataItem
{
public int Value { get; set; }
public DateTime DateTime { get; set; }
}
}
上記のDataItemクラスが、今回チャートで表示する個々のデータ要素を表すものとします。Valueプロパティがこのデータの値、DateTimeプロパティがこのデータの日付を表現しています。
続いて、アプリケーションのメインページが読み込まれたタイミングで、チャートで表示するDataItemオブジェクトの配列を乱数で生成し、これをDataContextプロパティに設定します。乱数を使っているため、結果は起動毎に異なります。データの日付は、項目ごとに現在の日付からさかのぼって1日間隔としています。
using System;
using Microsoft.Phone.Controls;
namespace Sample
{
public partial class MainPage : PhoneApplicationPage
{
private const int DataCount = 10;
private const int MaxValue = 100;
public MainPage()
{
InitializeComponent();
Random random = new Random();
DataItem[] dataSource = new DataItem[DataCount];
for (int i = 0; i < dataSource.Length; i++)
{
dataSource[i] = new DataItem();
dataSource[i].DateTime = DateTime.Now.AddDays((-dataSource.Length) + i);
dataSource[i].Value = random.Next(MaxValue);
}
DataContext = dataSource;
}
}
}
まだXAMLコードは何も書いていないので画面は一切作られていない状態ですが、これでデータの準備は整いました。後はDataContextに設定されたビジネスデータをどのように視覚化するのかというUIデザインの問題にフェーズを移行します。
