SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

センサー側の用意

 .NET Micro Frameworkの最新版は4.3です。今回はこの.NET Micro Framework 4.3を使います。

図3 .NET Micro Framework SDK
図3 .NET Micro Framework SDK

.NET Gadgeteer

 FEZ Spiderの特徴は.NET Micro Frameworkが動作するという点以外にも、.NET Gadgeteerにも対応しているという点があります。.NET Gadgeteerがどのようなものか実際に作成していましょう。

 新規プロジェクト作成で[Gadgeteer]-[.NET Gadgeteer Application]テンプレートを選択します。

図4 .NET Gadgeteer Aplicationテンプレートの選択
図4 .NET Gadgeteer Aplicationテンプレートの選択

 このテンプレートで作成するプロジェクトは、.NET Micro Framework上で動くアプリのプロジェクトになりますが、さらに、実際に使用するメインボードを選択することで、さまざまな恩恵にあずかれます。今回使用するのはFEZ Spiderなのでプロジェクト作成時に表示されるウィザードでもFEZ Spiderを選択しましょう。

図5 .NET Gadgeteer Aplicationウィザード
図5 .NET Gadgeteer Aplicationウィザード

 .NET Gadgeteer対応のボードであれば、それは.NET Micro Frameworkが動き、さらに.NET Gadgeteerにも登録されているボードということになります。別々の関係というよりも含有関係になるので単なる.NET Micro Framework対応のボードよりも,NET Gadgeteer対応のボードの方が何かと便利です。

.NET Gadgeteerデザイナ

 .NET Gadgeteerのいいところは.NET GadgeteerデザイナによりVisual Studio上でメインボードや各種モジュール(メインボードと接続可能なセンサーなどの部品)との接続を設計できる点です。例えば今回のサンプルでは次のような接続を行います。

図6 .NET Gadgeteerデザイナ
図6 .NET Gadgeteerデザイナ

 左上の赤いモジュールはUSBモジュールのUSB Client DPです。USBポートは電源供給やPCからアプリの転送、Visual Studioからのリモートデバッグなどにも使用できます。USB Client DPは1番ソケットに接続します。なお、PCからアプリ転送後は不揮発性メモリ上にアプリが配置されるのでPCからUSBを切り離して電源につなぎかえれば自動的にアプリがブートします。

 メインボードの右横にあるのがLANモジュールのethernetJ11Dです。このモジュールは7番ソケットに接続します。今回は有線LANを使いましたが、LANモジュールの代わりにWiFiモジュールを使ってさらにUSB Client DPへの電源供給をモバイルバッテリーなどにすればコードレスセンサーが完成します。

 ボードの左側にあるのが今回のセンサーである温湿度モジュールのtempHumidS170になります。これを4番ソケットに接続します。

実機の配線

 .NET Gadgeteerのいいところはコード上の表現だけではありません。デザイナ上できれいに配置しておけば、大きさなどの比率もあっていますので、実際のメインボードとモジュールを配置して同じように配置と配線できます。

図7 メインボードとモジュール
図7 メインボードとモジュール

センサー値の取得

 デザイナ上で配線と実際のモジュールの配線を同じにすることで、例えばtempHumidS170からセンサー値を取得したいときは、コード上で「4番ソケットから取得」ではなく「tempHumidS170から取得」のように記述が可能になります。

リスト1 センサー値の取得
Private Sub MeasureTimer_Tick(timer As GT.Timer) Handles MeasureTimer.Tick
    Me.MeasureTimer.Stop()
    Dim th = tempHumidSI70.TakeMeasurement       '(1)
    SyncLock (Me)
        Me.LastTemperature = th.Temperature      '(2)
        Me.LastHumidity = th.RelativeHumidity    '(3)
    End SyncLock
    Me.MeasureTimer.Start()
End Sub
  • (1)センサー値の取得
  • (2)温度の取得
  • (3)湿度の取得

センサー値をクラウド側に送信

 Microsoft Azure Mobile Servicesとの間はREST/JSONでデータ送信を行います。そのままコードを書いて実装してもいいのですが.NET Micro Framework向けの便利なライブラリがGitHubにありますので、それを使って省力化します。

図8 ms-iotkithol-jp/Library/EGIoTKit.Utility
図8 ms-iotkithol-jp/Library/EGIoTKit.Utility

 GitHubからzipファイルを取得したら解凍してEGIoTKit.Utilityをプロジェクトに追加して参照設定を行います。

図9 ソリューション構成
図9 ソリューション構成

 準備が完了したらProgram.vbファイルにコードを記述します。まずはLANモジュールの回線をオープンします。

リスト2 LAN接続
If (Not ethernetJ11D.NetworkInterface.Opened) Then    '(1)
    ethernetJ11D.NetworkInterface.Open()              '(2)
End If
  • (1)オープンされていないかを確認
  • (2)オープンされていなかったらオープン

 次にデータ送信する部分を作成します。

リスト3 データ送信
Mainboard.SetDebugLED(True)                                                          '(1)
Try
    Dim request = CType(HttpWebRequest.Create(UrlString + "tables/Item"), HttpWebRequest)
    Dim json = New EGIoTKit.Utility.SimpleJSON()
    request.Headers.Add("X-ZUMO-APPLICATION", "pQLVzEcLxynxQpHscpTmYtCGbqojTr76")    '(2)
    request.Accept = "application/json"
    request.ContentType = "application/json"
    request.Method = "POST"

    json.Add("id", "")                                 '(3)
    json.Add("DeviceId", DeviceId.ToString())          '(3)
    SyncLock (Me)                                      '(3)
        json.Add("Temperature", Me.LastTemperature)    '(3)
        json.Add("Humidity", Me.LastHumidity)          '(3)
    End SyncLock                                       '(3)
    Dim JsonStringParams = json.GetResult                                     '(4)
    Dim postDataBytes As Byte() = Encoding.UTF8.GetBytes(JsonStringParams)    '(4)
    request.ContentLength = postDataBytes.Length                              '(4)
    Using reqStream = request.GetRequestStream()                              '(4)
        reqStream.Write(postDataBytes, 0, postDataBytes.Length)               '(4)
    End Using                                                                 '(4)
    Using res = CType(request.GetResponse, HttpWebResponse)                   '(5)
        If (res.StatusCode = HttpStatusCode.OK) Then                          '(6)
            Using reader = New StreamReader(res.GetResponseStream())          '(6)
                Dim message = reader.ReadToEnd()                              '(6)
        Debug.Print(message)
End Using
        End If
    End Using
Catch ex As Exception
    Debug.Print(ex.Message)
End Try
Mainboard.SetDebugLED(False)                           '(7)
  • (1)メインボード上のLEDを点灯してデータ送信開始を合図
  • (2)アプリケーションキーを設定
  • (3)JSONデータを作成
  • (4)JSONデータを本文として設定
  • (5)POSTメソッドを実行
  • (6)応答内容を取得

実行

 PCとUSBで接続してVisual Studioで実行を開始すると、まず、メインボードへアプリを転送し、その後に実行が開始されます。その流れはイミディエイトウィンドウに表示されます。

図10 実行結果
図10 実行結果

 クラウドまで正しくデータが届いていれば、Azure管理ポータルで送信されてきたデータが表示できます。

図11 テーブル参照
図11 テーブル参照

次のページ
情報活用端末の作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8529 2015/03/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング