Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Windows Phoneで高速チャートを使用しデータの視覚化を実現しよう

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/14 14:00
目次

ビジネスデータの視覚化

 これまで、WebやWindowsフォームで実装される標準的なビジネスアプリケーションでは、多くが表コントロールを好んで採用する傾向にありました。ビジネスデータの多くは列と行の2次元で表現されるものが多く、リレーショナルデータベースのテーブルに対応した表現として、表は最も簡単で理解しやすい視覚表現です。

 PCで操作することが前提であれば、表コントロールはシンプルで開発者にとっても利用者にとっても使い慣れたUIでした。グラフなどデータの視覚化を行う場合でも、表が中心となってそこから編集用のフォームやグラフなどの専用のビューを派生させる設計が一般的でしょう。

 ところがスマートフォンを対象とした場合、表コントロールは必ずしも使いやすいものではありません。スマートフォンでは解像度に対して画面が小さく、複数のウィンドウを表示することができません。現状のスマートフォンの利用目的の多くが閲覧に特化していることからも、データの抽象的な意味を抽出し、複雑なデータの関係を視覚的に表現することでアプリケーションの価値を高めることができます。

 実践ではネットワーク上のサービスにリアルタイムのデータを問い合わせるシナリオが一般的ですが、この場では単純化するためにローカル上で生成したサンプルデータを表示します。サンプルデータは、単純に整数型の値を提供する型を用意し、これのコレクション(IEnumerable)をルート要素のDataContextプロパティに設定します。

 WPFやSilverlight世代のフレームワークは、モデル(データ)とビュー(コントロール)を分離することが容易であり、これらを結びつけるバインディングの仕組みが用意されています。NetAdvantage for Windows Phoneにおいてもこの恩恵はそのまま踏襲されています。XamDataChartコントロールを記述したXAMLコードでバインディング元を指定することで、データと画面デザインを分離して開発を進められます。

DataItem.cs
using System;

namespace Sample
{
    public class DataItem
    {
        public int Value { get; set; }
        public DateTime DateTime { get; set; }
    }
}

 上記のDataItemクラスが、今回チャートで表示する個々のデータ要素を表すものとします。Valueプロパティがこのデータの値、DateTimeプロパティがこのデータの日付を表現しています。

 続いて、アプリケーションのメインページが読み込まれたタイミングで、チャートで表示するDataItemオブジェクトの配列を乱数で生成し、これをDataContextプロパティに設定します。乱数を使っているため、結果は起動毎に異なります。データの日付は、項目ごとに現在の日付からさかのぼって1日間隔としています。

MainPage.xaml.cs
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デザインの問題にフェーズを移行します。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5