皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！
前回のレッスンでは距離センサで距離を具体的に連続で取れることを勉強しました．(ついでにLED信号も使えるようになったと思います)
今回のレッスンでは，今度はパーツの中から「温度センサー」を使って，温度センサーの値をリアルタイムでグラフに表示してみましょう．
JavaScriptのプラグインについて
JavaScriptには様々なプラグイン(プログラムにおけるライブラリです)があり，アニメーションを描画したりグラフを書いてくれたり，プログラムを書く事をとても簡単にしてくれます．
今回はChart.jsというJSプラグインを使って，温度センサから得た温度の値をグラフに起こしてみましょう！
Chart.js
プログラムを書く
上にあげたリンクから[インストール]→Chart.js CDNを使用の項目に行くと，様々なリンクがあります．
状況に応じて使い分けるのですが，普段は".min.js"や".js"をHTMLのヘッダ部分に書くことでJavaScriptのライブラリとして使うことが出来ます．
じゃあobnizのプログラムにコピペするか...と思ったら，同じ場所に"obniz.js"と書かれていますね．
そう，実はobnizも1つのJavaScriptライブラリとしてこのHTMLファイルで使われているだけなんです！
なので，そこに示されたリンクに飛ぶとobnizを動かしているライブラリの一覧を見ることが出来ます．
もちろん皆さんはobnizを使う側の人なので，他のライブラリと同様ここは読まなくていいわけです．
便利に使っていきましょう．
さて，Chart.jsをHTMLに追加できたら，次はその使い方を見ていきましょう．
様々な使い方は先ほどあげたChart.jsの中に書いてあるのでそれを眺めたり適宜検索してみたりしながら，サンプルのプログラムでChartをどう設定しているのか理解してみて下さい．
サンプルプログラムはシンプルな構成なので，もちろん自分の欲しい機能をどんどん追加してみましょう！
後はobnizの温度センサのライブラリを使うので，その使い方も温度ライブラリの解説を見てみましょう．
もうパーツについての詳しい解説は要らないと思います．onchange関数が適宜温度を送ってくれるので，これを使います．
あとはChart.jsのライブラリと温度センサのライブラリを組み合わせるだけです！
<html>
<head>
<!-- Chart.jsを導入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<!-- obniz.jsを導入 -->
<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<canvas id="myChart"></canvas>
</head>
<body>
<script>
var ctx = document.getElementById("myChart");
var tempLists = []; //温度の保持用
var labelLists = []; //ラベル(横軸)の保持用
var obniz = new Obniz("OBNIZ_ID_HERE"); //OBNIZ ID here
obniz.onconnect = async function () { // when obniz connected...
var chart = new Chart(ctx, { // Chartの設定
type: 'line', //折れ線グラフにする
data: {
labels: [],
datasets: [
{
label: '現在の温度', //ラベルを設定
data: []
}
]
},
options: { //Chartのオプションを設定
scales: {
yAxes: [{
ticks: {
suggestedMax: 30, // y軸の最低値
suggestedMin: 20, // y軸の最高値
stepSize: 1, // 1℃ごとに軸に表示
callback: function (value, index, values) {
return value + '℃' // 数字の後に”℃”の表示を付ける
}
}
}]
},
}
});
// use Keyestudio_TemperatureSensor library
var tempsens = obniz.wired("Keyestudio_TemperatureSensor", { signal: 0, vcc: 1, gnd: 2 });
var count = 0; // count temperature change
tempsens.onchange = function (temp) { // 温度が変化したら
count++;
tempLists.push(temp.toFixed(1)); //温度を小数点1桁に統一して格納
labelLists.push(count); //ラベルを格納
chart.data.labels = labelLists; //ラベルデータを反映させる
chart.data.datasets[0].data = tempLists; //温度データを反映させる
chart.update(); //グラフを再描画
console.log(temp.toFixed(1));
};
}
</script>
</body>
</html>
次々更新されるグラフが出来たでしょうか？
もし「更新が早すぎる！」と感じるようなら，obniz.repeat()で秒数を指定してループを実行すると良いでしょう．
発展：WebAppを使ってみよう
obnizには「アプリ」という機能があります．
これは誰かが書いてくれたHTML/JavaScriptやブロックプログラムのプログラムをアプリという形にして公開してくれたものです．
もし自分の使いたいものがそこにあればサッとインストールして使うことの出来る大変便利な機能です．
簡単な説明はブラウザアプリとはを見てみて下さい．
パーツライブラリがパーツの細々した操作を代わりにやってくれる存在なら，WebAppは「機能ごと」代わりにやってくれる上位存在のようなものです．
大変運良く(...？)同じ温度センサを用いたグラフのアプリがあるので，使ってみましょう．
WebAppのページには以下のようないくつかのオプションがあると思います．
様々なオプションを試したかったら[インストール]して実行，
実際に何が書いてあるか気になる人は[プログラムを見る]から実行，
取り敢えず実行してみたいだけの人は[今すぐ実行]から実行してみましょう．
(インストールにはアカウント登録とデバイス登録が必要です．
まだ完了してない人は，詳しくは次回のレッスンで紹介しますので，少しだけ辛抱して下さい！)
温度グラフのWebAppのページにある，以下の画像のように表示できたでしょうか？
このように一切プログラムを書くこと無く，欲しい機能を直ぐIoTで実現できるのは凄いですね．
もちろん欲しい機能がアプリのページになかった場合は，今まで勉強したHTML/JavaScriptの知識やパーツの使い方を用いて，自分でアプリを作ることが出来ます！
今までになかった機能をアプリで作って公開することで，他の人にあなたの作ったアプリを使って貰えるのはとてもワクワクしませんか？
次回はこのアプリの作成や公開の話をもう少し詳しくしていきたいと思います．それでは！