monacaの利用登録

利用登録は下記の要領で行いましょう

monaca上でのアプリの作成

まず、ログイン後にダッシュボードを確認します。

「開発をスタート」をクリックします。
すると下記の画面が出ますので、「Monaca.ioで開発」をクリックします。

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

上記の画面をスクロールして
「ニフティクラウドmobile backend用テンプレート」を選択

選択後、下記のポッアップがでるので

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

すると、下記のような開発環境が表示されます。

monacaでグラフを描画する

今回はChart.jsを利用する。Chart.jsを利用した上で、グラフにmBaaSから取得したデータを反映させるコードが下記になります。（monacaのindex.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はデバックアプリをリリースしているのでそれを活用しましょう！

上記のアプリを使ってデバックすると下記のようにグラフが表示されます。

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

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

まず、SDKの読み込み

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

index.html

<script src="js/ncmb-2.0.0.min.js"></script>

SDKの初期化

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

index.html

var ncmb = new NCMB("YOUR_APPLICATIONKEY", "YOUR_CLIENTKEY");

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

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

index.html

var Temperature = ncmb.DataStore("Temperature");

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

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が手軽にできる時代になったなぁ・・・