皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！\
前回のレッスンでは距離センサで距離を具体的に連続で取れることを勉強しました．(ついでにLED信号も使えるようになったと思います)\
今回のレッスンでは，今度はパーツの中から「温度センサー」を使って，温度センサーの値をリアルタイムでグラフに表示してみましょう．
## JavaScriptのプラグインについて
JavaScriptには様々なプラグイン(プログラムにおけるライブラリです)があり，アニメーションを描画したりグラフを書いてくれたり，プログラムを書く事をとても簡単にしてくれます．\
今回はChart.jsというJSプラグインを使って，温度センサから得た温度の値をグラフに起こしてみましょう！\
[Chart.js](https://misc.0o0o.org/chartjs-doc-ja/)
## プログラムを書く
上にあげたリンクから[インストール]→[Chart.js CDNを使用](https://cdnjs.com/libraries/Chart.js)の項目に行くと，様々なリンクがあります．\
状況に応じて使い分けるのですが，普段は".min.js"や".js"をHTMLのヘッダ部分に書くことでJavaScriptのライブラリとして使うことが出来ます．\
じゃあobnizのプログラムにコピペするか...と思ったら，同じ場所に"obniz.js"と書かれていますね．
そう，実はobnizも1つのJavaScriptライブラリとしてこのHTMLファイルで使われているだけなんです！
なので，そこに示されたリンクに飛ぶとobnizを動かしているライブラリの一覧を見ることが出来ます．\
もちろん皆さんはobnizを使う側の人なので，他のライブラリと同様ここは読まなくていいわけです．\
便利に使っていきましょう．
さて，Chart.jsをHTMLに追加できたら，次はその使い方を見ていきましょう．\
様々な使い方は先ほどあげた[Chart.js](https://misc.0o0o.org/chartjs-doc-ja/)の中に書いてあるのでそれを眺めたり適宜検索してみたりしながら，サンプルのプログラムでChartをどう設定しているのか理解してみて下さい．\
サンプルプログラムはシンプルな構成なので，もちろん自分の欲しい機能をどんどん追加してみましょう！\
後はobnizの温度センサのライブラリを使うので，その使い方も[温度ライブラリ](https://obniz.com/ja/sdk/parts/Keyestudio_TemperatureSensor/README.md)の解説を見てみましょう．\
もうパーツについての詳しい解説は要らないと思います．onchange関数が適宜温度を送ってくれるので，これを使います．
あとはChart.jsのライブラリと温度センサのライブラリを組み合わせるだけです！
```html
```
次々更新されるグラフが出来たでしょうか？
もし「更新が早すぎる！」と感じるようなら，obniz.repeat()で秒数を指定してループを実行すると良いでしょう．
## 発展：WebAppを使ってみよう
obnizには「アプリ」という機能があります．\
これは誰かが書いてくれたHTML/JavaScriptやブロックプログラムのプログラムをアプリという形にして公開してくれたものです．\
もし自分の使いたいものがそこにあればサッとインストールして使うことの出来る大変便利な機能です．\
簡単な説明は[ブラウザアプリとは](https://obniz.com/ja/guides/browser-app/about)を見てみて下さい．\
パーツライブラリがパーツの細々した操作を代わりにやってくれる存在なら，WebAppは「機能ごと」代わりにやってくれる上位存在のようなものです．\
大変運良く(...？)同じ温度センサを用いたグラフのアプリがあるので，使ってみましょう．
・[温度グラフ＆WebAppのページ](https://blog.obniz.com/make/real-time-temperature-recording/)
WebAppのページには以下のようないくつかのオプションがあると思います．\
様々なオプションを試したかったら[インストール]して実行，\
実際に何が書いてあるか気になる人は[プログラムを見る]から実行，\
取り敢えず実行してみたいだけの人は[今すぐ実行]から実行してみましょう．\
(インストールにはアカウント登録とデバイス登録が必要です．\
まだ完了してない人は，詳しくは[次回のレッスン](./making-webapp.md)で紹介しますので，少しだけ辛抱して下さい！)
[温度グラフのWebAppのページ](https://obniz.com/ja/webapp/1)にある，以下の画像のように表示できたでしょうか？\
このように一切プログラムを書くこと無く，欲しい機能を直ぐIoTで実現できるのは凄いですね．\
もちろん欲しい機能がアプリのページになかった場合は，今まで勉強したHTML/JavaScriptの知識やパーツの使い方を用いて，自分でアプリを作ることが出来ます！\
今までになかった機能をアプリで作って公開することで，他の人にあなたの作ったアプリを使って貰えるのはとてもワクワクしませんか？\
次回はこのアプリの作成や公開の話をもう少し詳しくしていきたいと思います．それでは！