CodeZine(コードジン)

特集ページ一覧

IoTの計測データをWindowsストアアプリで可視化してみよう

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

情報活用端末の作成

 それでは、いよいよComponentOne Studio Chart for WinRT XAMLを使った温湿度の時系列グラフ表示アプリを作成してみましょう。

表示部分の作成

 Windowsストアアプリを選択して新規プロジェクト作成すると、ツールボックスにはすでにComponentOne Studioのコンポーネントが登録されています。ツールボックスから「C1Chart」をXAMLデザイナにドラッグ&ドロップすれば必要な設定込みで配置が完了します。

 あとはX軸を日時表示したり、Y軸を2軸にして温度と湿度を表示するように調整します。

リスト4 データ送信
<Chart:C1Chart ChartType="Line">
    <Chart:C1Chart.View>
        <Chart:ChartView>
            <Chart:ChartView.AxisX>
                <Chart:Axis AnnoFormat="yyyyMMdd HH" AnnoAngle="-90" IsTime="True"/>  <!--(1)-->
            </Chart:ChartView.AxisX>
            <Chart:ChartView.AxisY>
                <Chart:Axis AnnoFormat="#0.##0">                                      <!--(2)-->
                    <Chart:Axis.Title>
                        <TextBlock Text="温度" />
                    </Chart:Axis.Title>
                </Chart:Axis>
            </Chart:ChartView.AxisY>
            <Chart:ChartView.Axes>
                <Chart:Axis Name="H" AxisType="Y" Position="Far" AnnoFormat="#0.##0"> <!--(3)-->
                    <Chart:Axis.Title>
                        <TextBlock Text="湿度" />
                    </Chart:Axis.Title>
                </Chart:Axis>
            </Chart:ChartView.Axes>
        </Chart:ChartView>
    </Chart:C1Chart.View>
    <Chart:C1Chart.Data>
        <Chart:ChartData ItemsSource="{Binding Items}">
            <Chart:ChartData.Children>                                                <!--(4)-->
                <Chart:XYDataSeries  Label="Temperature" ValueBinding="{Binding Temperature}" XValueBinding="{Binding __createdAt}"/>
                <Chart:XYDataSeries  Label="Humidity" ValueBinding="{Binding Humidity}" XValueBinding="{Binding __createdAt}" AxisY="H"/>
            </Chart:ChartData.Children>
        </Chart:ChartData>
    </Chart:C1Chart.Data>
    <Chart:C1ChartLegend Position="Bottom"/>
</Chart:C1Chart>
  • (1)X軸が時間であることを指定
  • (2)Y軸の1つ目を気温として指定
  • (3)Y軸の2つ目を湿度として指定
  • (4)データを表示するクラスとプロパティを指定してBinding

 これで表示部分は完成です。

ロジック部分の作成

 次にMicrosoft Azure Mobile Servicesからデータを取得する部分を作成します。ソリューションエクスプローラでプロジェクトを右クリックして[NuGetパッケージの管理]メニューをクリックし、NuGetダイアログで「Azure Mobile Services」を検索して追加します。

リスト5 データ受信
Public Items As New ObservableCollection(Of Item)               '(1)

Public Async Function GetData() As Task
    Using mobileService = New MobileServiceClient(UrlString)    '(2)
        Dim qTable = mobileService.GetTable(Of Item)()         '(3)
        Dim recs = Await qTable.ReadAsync                       '(4)
        Me.Items.Clear()
        For Each rec In recs
            Me.Items.Add(rec)                                   '(5)
        Next
    End Using
End Function
  • (1)データ表示用クラスの定義
  • (2)Mobile Services(cz1501service)との接続
  • (3)テーブルの指定(取得クラス名はテーブル名と同じにする)
  • (4)データ取得
  • (5)取得したデータを表示用クラスに設定

 あとは表示部分とロジック部分をつなげるViewModel部分を作成すれば完成です。

実行

 実行してみるとデバッグ中や実行確認を行っていてデータ抜け(グラフでまっすぐ右下がりしている部分)している部分もありますが、急速に気温と湿度が下がっているのが一目で分かります。また湿度はあるところから横ばいで必ずしも気温と連動しているばかりではないということも発見できます。

図12 実行結果
図12 実行結果

 自室内なのですがエアコンを使っていない部屋なので、ほぼ外気の影響下にある測定結果といえるでしょう。

まとめ

 このようにセンサーを使ってクラウドで収集してタブレットで確認するということは数年前まで個人ベースで行えることではありませんでした。最近の傾向が後押ししていることは確実ですが、センサー&デバイスを駆使してIoTに注目していくと、やはり、データのビジュアライズというのが非常に重要であることが再確認できます。

 タブレットと相性のいいWindowsストアアプリで見栄えの良いグラフが表示できるComponentOne Studio Chart for WinRT XAMLが活躍する曲面は今後ますます増えていく事でしょう。



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

著者プロフィール

  • 初音玲(ハツネアキラ)

     国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。  個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。  Microsoft MVP for Windows Development...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

もっと読む

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