株式会社インデペンデンスシステムズ横浜

システム開発エンジニアの西田五郎が運営しております。Raspberry Pi や Arduino その他新規開発案件のご依頼をお待ちしております。

*

温度管理システム的なものを作ってみる(その4)Cloudでの処理

      2015/05/06

0010温度管理システム的なものを作ってみるの4回目です。前回は、Androidアプリでの温度データ取得について書きました。今回は、Cloudでの処理についてです。Cloudはここでは Microsoft Azureを使っていて開発言語はC#です。特にこの環境が必須ということではなく一例です。同様の内容を他のCloudプラットフォーム、他のプログラミング言語を利用して実現することももちろん可能です。ここでのCloudの処理はスマホから送信された温度データと位置データを保存する処理とそのデータを表示する処理です。それぞれの処理を見ていきます。

データの流れは以下です。太字が今回の処理の部分です。

温度データ登録時の温度データ(位置データ)
Arduino(温度センサ LM35DZ) → USBケーブル(USBホストケーブル) → Android(スマホ) → (インターネット) → Cloud(Microsoft Azure)

温度データ一覧表示時の温度データ
ブラウザ ← Cloud(Microsoft Azure)

データ登録処理
スマホから送信された温度データと位置データを登録します。ここでは最も簡単と思われたHTTPのGETを使っています。つまり、URLに登録情報をパラメータとして付加して送信しています。実務的には現状ではWebAPIを利用するのが最適かと思います。ここではテスト的に簡単なHTTPのGETを使ったということで御了承下さい。また認証も考慮していません。(そのためこの処理のURLは公開していません。)

以上のような本当にテスト的なプログラムですが、以下のように書きました。CodeFirstを使ってモデルから生成したデータベースにGETのパラメータから新規モデルを生成して保存しています。

開発環境は、Visual Studio Express 2013 for Webです。WebFormsをベースにしています。ただし、ここでは画面が必要ないので、実質以下のビハインドコードのみで処理しています。(※くりかえしになりますが、実務レベルでは普通はこういった処理はWebAPIで実装するものだと思います。ここではテストということで簡単に実装しています。)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using ISYTempMGR.Model;

namespace ISYTempMGR
{
    public partial class PostRecord : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //コンテキストとレコード生成
            TempRecordContext ct = new TempRecordContext();
            TempRecord rec = new TempRecord();

            try
            {
                //GETパラメータよりレコードデータ作成
                string name = Request.QueryString["Name"];
                double lat = double.Parse(Request.QueryString["Latitude"]);
                double longi = double.Parse(Request.QueryString["Longitude"]);
                string desc = Request.QueryString["Description"];
                double temp = double.Parse(Request.QueryString["Temperature"]);
                DateTime datetime = DateTime.Parse(Request.QueryString["DateTime"]);

                rec.Name = name;
                rec.Latitude = lat;
                rec.Longitude = longi;
                rec.Description = desc;
                rec.RecDateTime = datetime;
                rec.Temperature = temp;

                //レコード登録
                ct.TempRecords.Add(rec);
                ct.SaveChanges();
            }
            catch(Exception){
                //ここではとりあえず何もしない
            }
        }
    }
}

モデルのソースが以下です。

namespace ISYTempMGR.Model
{
    using System;
    using System.Data.Entity;
    using System.Linq;

    /// <summary>
    /// 温度データのコンテキスト
    /// </summary>
    public class TempRecordContext : DbContext
    {
        // コンテキストは、アプリケーションの構成ファイル (App.config または Web.config) から 'TempRecord'
        // 接続文字列を使用するように構成されています。既定では、この接続文字列は LocalDb インスタンス上
        // の 'ISYTempMGR.Model.TempRecord' データベースを対象としています。
        //
        // 別のデータベースとデータベース プロバイダーまたはそのいずれかを対象とする場合は、
        // アプリケーション構成ファイルで 'TempRecord' 接続文字列を変更してください。
        public TempRecordContext()
            : base("Name=TempRecordConnection")
        {
        }

        // モデルに含めるエンティティ型ごとに DbSet を追加します。Code First モデルの構成および使用の
        // 詳細については、http://go.microsoft.com/fwlink/?LinkId=390109 を参照してください。

        public virtual DbSet<TempRecord> TempRecords { get; set; }
    }

    /// <summary>
    /// 温度データのモデル
    /// </summary>
    public class TempRecord
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public double Temperature { get; set; }
        public DateTime RecDateTime { get; set; }
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Description { get; set; }
    }
}

データ一覧表示
保存されたデータを表示する処理(ページ)についてです。

データそのものはASP.NETのWebFormのGridViewで表示しています。GoogleMapのマーカはJavaScriptのソース内にASP.NETのRepeaterコントロールを利用して表示しています。

aspxソース

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ISYTempMGR._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var markers = [
            <asp:Repeater ID="rptMarkers" runat="server">
            <ItemTemplate>
            {
                "title": '<%# Eval("Name") %>',
                 "lat": '<%# Eval("Latitude") %>',
                 "lng": '<%# Eval("Longitude") %>',
                 "description": '<%# Eval("Description") %>'
             }
            </ItemTemplate>
            <SeparatorTemplate>
                ,
            </SeparatorTemplate>
            </asp:Repeater>
        ];
    </script>

    <script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>

    <p>
    このサイトは、<a href="http://independence-sys.net/main/">株式会社インデペンデンスシステムズ横浜</a>のデモサイトです。<br />
    詳細は以下を参照して下さい。<br />

    <a href="http://independence-sys.net/main/?p=792" title="温度管理システム的なものを作ってみる(その1)システム概要">温度管理システム的なものを作ってみる(その1)システム構成</a><br />

    <b>ローケーション一覧</b>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
    </p>

    <p>
    <b>温度データ一覧</b>
    <asp:GridView ID="GVTempRecord" runat="server" DataKeyNames="Id"
         ItemType="ISYTempMGR.Model.TempRecord" SelectMethod="GVTempRecord_GetData" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical">
        <AlternatingRowStyle BackColor="#CCCCCC" />
        <FooterStyle BackColor="#CCCCCC" />
        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F1F1F1" />
        <SortedAscendingHeaderStyle BackColor="#808080" />
        <SortedDescendingCellStyle BackColor="#CAC9C9" />
        <SortedDescendingHeaderStyle BackColor="#383838" />
    </asp:GridView>
    </p>
</asp:Content>

ビハインドコードは以下です。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ISYTempMGR
{
    public partial class _Default : Page
    {
        /// <summary>
        /// ページロード時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                //マーク表示のためのRepeaterコントロールにデータを設定
                ISYTempMGR.Model.TempRecordContext ct = new Model.TempRecordContext();

                rptMarkers.DataSource = ct.TempRecords.ToList();
                rptMarkers.DataBind();
            }
        }

        /// <summary>
        /// GridViewのSelectMethod
        /// </summary>
        /// <returns></returns>
        public IQueryable<ISYTempMGR.Model.TempRecord> GVTempRecord_GetData()
        {
            ISYTempMGR.Model.TempRecordContext ct = new Model.TempRecordContext();
            IQueryable <ISYTempMGR.Model.TempRecord> list = ct.TempRecords;

            return list;
        }
    }
}

実際に登録が出来ると以下のようにCloudで確認が出来ます。
(※2015/05/06実際のサイトは一旦公開終了しました。)

0010

今回はここまでです。次回は今回書いたCloudの登録処理に登録するためのスマホ側(Android)のHTTP通信の部分について書きます。




 - ASP.NET

AdSense

AdSense

  関連記事

no image
Microsoft AzureでASP.NETサイトを公開してみる(その3)Visual Studio EEからの公開

Microsoft AzureでASP.NETサイトを公開してみるの3回目です。 …

no image
ASP.NETユーザ管理(その4)ユーザ情報の追加

ASP.NETユーザ管理(ASP.NET Identityフレームワーク)の4回 …

no image
ASP.NETユーザ管理(その7)ユーザアカウントロック

ASP.NETユーザ管理(ASP.NET Identityフレームワーク)の7回 …

ASP.NET Web APIでデータ蓄積(その7)Raspbery Piからの温度データ蓄積

ASP.NET Web APIでデータ蓄積の7回目です。前回までで少なくとも温度 …

ASP.NET Web APIでデータ蓄積(その2)ASP.NET コードファーストでのモデル構築

ASP.NET Web APIでデータ蓄積の2回目です。前回は、ASP.NET …

no image
Microsoft AzureでASP.NETサイトを公開してみる(その2)ASP.NETサイトの作成

Microsoft AzureでASP.NETサイトを公開してみるの2回目です。 …

ASP.NET Web APIでデータ蓄積(その6)ASP.NET Web APIでの動作確認

ASP.NET Web APIでデータ蓄積の6回目です。前回は、ASP.NET …

no image
ASP.NETユーザ管理(その8) 2要素認証

ASP.NETユーザ管理(ASP.NET Identityフレームワーク)の8回 …

ASP.NET Web APIでデータ蓄積(その5)ASP.NET Web APIテンプレートからの構築

ASP.NET Web APIでデータ蓄積の5回目です。前回まででMVC個別に注 …

ASP.NET Web APIでデータ蓄積(その1)ASP.NET Web APIとは

ASP.NET Web APIを利用してデータを蓄積する機能を実装してみたいと思 …