【IoTを実感しよう！】取得した温度センサのグラフをスマホでみよう！


[前回の記事](http://qiita.com/fumishitan/items/8abae38db286138f23bf)で[ニフティクラウド mobile backend(以下mBaaS)](http://mb.cloud.nifty.com/)に温度センサの値を保存することができました。今度はそれをスマホアプリ上でグラフ化しましょう。。。もちろん、JSで

今回はmonacaを使ってグラフを作ります！

## monacaの利用登録
利用登録は下記の要領で行いましょう
![スクリーンショット 2015-09-21 21.36.13.png](https://qiita-image-store.s3.amazonaws.com/0/55227/b4e0a056-8df7-1efd-5a0f-100625b28e7c.png "スクリーンショット 2015-09-21 21.36.13.png")

## monaca上でのアプリの作成

まず、ログイン後にダッシュボードを確認します。
![スクリーンショット 2015-09-21 21.41.36.png](https://qiita-image-store.s3.amazonaws.com/0/55227/4c816049-66e8-db0a-dd85-e284deb7f511.png "スクリーンショット 2015-09-21 21.41.36.png")

「開発をスタート」をクリックします。
すると下記の画面が出ますので、「Monaca.ioで開発」をクリックします。
![スクリーンショット 2015-09-21 21.44.56.png](https://qiita-image-store.s3.amazonaws.com/0/55227/23556ca4-29b5-818a-0581-cce86c4a05fd.png "スクリーンショット 2015-09-21 21.44.56.png")

そうしたら下記のようにテンプレートを選ぶ画面が出てきますので、それをスクロールして
「ニフティクラウドmobile backend用テンプレート」を選択します。

![スクリーンショット 2015-09-21 21.46.46.png](https://qiita-image-store.s3.amazonaws.com/0/55227/7d64d424-e8cc-08ef-3b66-97ffbac7b2d2.png "スクリーンショット 2015-09-21 21.46.46.png")
上記の画面をスクロールして
「ニフティクラウドmobile backend用テンプレート」を選択
![スクリーンショット 2015-09-21 21.47.26.png](https://qiita-image-store.s3.amazonaws.com/0/55227/98af55ec-2bff-f5d8-f98d-53dd337e51d1.png "スクリーンショット 2015-09-21 21.47.26.png")

選択後、下記のポッアップがでるので
![スクリーンショット 2015-09-21 21.55.29.png](https://qiita-image-store.s3.amazonaws.com/0/55227/8c18f161-99f9-154b-a12f-f00756235e86.png "スクリーンショット 2015-09-21 21.55.29.png")


プロジェクト名を「temper_chart」として「プロジェクトを作成する」をクリック

すると、下記のような開発環境が表示されます。
![スクリーンショット 2015-09-21 21.54.43.png](https://qiita-image-store.s3.amazonaws.com/0/55227/4ee83ddc-ab46-5896-5f66-e7ef724e1aa9.png "スクリーンショット 2015-09-21 21.54.43.png")

## monacaでグラフを描画する

今回は[Chart.js](http://www.chartjs.org/)を利用する。Chart.jsを利用した上で、グラフにmBaaSから取得したデータを反映させるコードが下記になります。（monacaのindex.htmlに記載します）

```html:index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="components/loader.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script>
        var data = {
            labels: [],
            datasets: [
                {
                    label: "Prime and Fibonacci",
                    fillColor: "rgba(251,180,196,0.2)",
                    strokeColor: "rgba(254,230,170,1)",
                    pointColor: "rgba(254,230,170,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: []
                }
            ]
        };
      function displayLineChart() {       
        var ncmb = new NCMB("YOUR_APPLICATIONKEY", "YOUR_CLIENTKEY");

        //プレイヤーがTaroのスコアを降順で取得
        var Temperature = ncmb.DataStore("Temperature");
        Temperature.order("date", true)
                .limit(30)
                .fetchAll()
                .then(function(results){
                    console.log("Successfully retrieved " + results.length + " scores.");
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i];
                        data.labels[i] = i;
                        data.datasets[0].data[i] =  object.temperature;
                    }
                    var ctx = document.getElementById("lineChart").getContext("2d");
                    var options = { };
                    var lineChart = new Chart(ctx).Line(data, {
                        scaleShowVerticalLines: false,
                        scaleShowHorizontalLines: false,
                        scaleOverride : true,
                        scaleSteps : 10,
                        scaleStepWidth : 0.1,
                        scaleStartValue : 25.5, 
                    });
                    
                })
                .catch(function(err){
                    console.log(err);
                });
        
      }
 
    </script>
</head>
<body onload="displayLineChart();">
    <div class="box">
        <canvas id="lineChart" height="300" width="480"></canvas>
    </div>
</body>
</html>


```

され、上記のコードを実機デバッグしてスマホ上でグラフを表示しましょう！
[monacaはデバックアプリ](https://ja.monaca.io/debugger.html)をリリースしているのでそれを活用しましょう！
![スクリーンショット 2015-09-21 22.16.25.png](https://qiita-image-store.s3.amazonaws.com/0/55227/4de6820b-a48d-15be-a681-05bf4256b825.png "スクリーンショット 2015-09-21 22.16.25.png")

上記のアプリを使ってデバックすると下記のようにグラフが表示されます。
![12025511_911892135556096_56977793_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/55227/b80f2b1d-578a-17d2-a962-b75ad5ca35ce.jpeg "12025511_911892135556096_56977793_n.jpg")

このように、データをグラフかすると一気に本格的な感じがでますよねっ！

## monacaでmBaaSを利用するポイント

### まず、SDKの読み込み

下記のコードで行っています。

```html:index.html
<script src="js/ncmb-2.0.0.min.js"></script>
```

### SDKの初期化

次は自分が作った、サーバー環境に保存するための準備として、SDKの初期化を行います
それが下記になります。

```html:index.html
var ncmb = new NCMB("YOUR_APPLICATIONKEY", "YOUR_CLIENTKEY");
```

### データストアからデータを引き出します

操作するクラスを指定します。

```js:index.html
var Temperature = ncmb.DataStore("Temperature");
```

次に、dateカラムを降順に並び替えてデータを30個分取得します。

```js:index.html
Temperature.order("date", true)
           .limit(30)
           .fetchAll()
           .then(function(results){
            for (var i = 0; i < results.length; i++) {
               var object = results[i];
               data.labels[i] = i;
               data.datasets[0].data[i] =  object.temperature;
             }
             var ctx = document.getElementById("lineChart").getContext("2d");
              var lineChart = new Chart(ctx).Line(data, {
                scaleShowVerticalLines: false,
                scaleShowHorizontalLines: false,
                scaleOverride : true,
                scaleSteps : 10,
                scaleStepWidth : 0.1,
                scaleStartValue : 25.5, 
               });
                    
            })
            
            .catch(function(err){
              console.log(err);
            });

```

Temperature.order("date", true)で降順にデータを並び替え
.limit(30)でデータを30個取得しています。

いやーIoTが手軽にできる時代になったなぁ・・・