うえぶまなぶうえぶまなぶ電子部品をぶっ刺すだけ!obnizを使ったJavaScirptによる温度測定をやってみた公開日:2018/8/24JavaScriptprogrammingtwitterFacebookgoogle+はてなtfgは今年に入ってからJavaScriptでIoT開発が楽しめるという「obniz」に興味があり、いろいろ情報収集をしていました。専用のクラウドサービスと最初から連携しており、WIFiにさえ繋げればブラウザからプログラミングができて、面倒な配線も不要で電子部品を制御できるお手軽感たっぷりなところに惹かれて購入したわけです。そこで、今回は温度センサーを組み合わせて室内の温度を計測してみたのでご紹介してみます!事前準備!obniz本体(電源コード含む)温度センサー(LM35DZ)今回、準備するものなんですが「obniz」を持っていれば、あとは温度センサーだけあればOKです。普通は、ブレッドボードやジャンパーワイヤなどを使って電子部品を繋げるのですが、単純に温度を計測するだけならobnizの本体にセンサーをそのまま刺せば良いだけなので簡単なのです。あとは、PCかスマホのブラウザからJavaScriptでプログラミングするだけで手軽に制御できるというわけです。ちなみに湿度も同時に計測しようと思ったんですが、手持ちの部品が無くて現在は調達中です。RSコンポーネンツさんでは湿度センサーの部品が種類豊富なのでオススメです!温度センサー(LM35DZ)のGNDはどれ?今回、利用する温度センサーは「LM35DZ」という部品で、電子温度計などにもよく使われているわりと定番のモノです。このセンサーに限った話ではありませんが、データシートを見て部品の足を確認する時は注意が必要です。GNDはどこかを確認する際にデータシートでは次のように図解されています。VIEW」と書かれていますよね?つまり、部品を下から見た図なので以下の方向から見るわけです。そのため、GNDは左側の足になるわけです!慣れている方にとっては当たり前の話なのですが、初心者の方は間違いやすいので覚えておきましょう!室内の温度を測定してみる!それでは、早速ですが「obniz」を使って温度を測定してみましょう!「obniz」の電源を入れてWiFiに繋ぐと、以下のようにQRコードとID番号が表示されて待機状態になります。この状態で、IOに温度センサーをそのまま接続します!「obniz」のIOは、部品の表裏に関係なくどのピンに接続しても大丈夫で、あとからプログラム上で制御できるように工夫されているのが特徴です。今回は0番にGNDを刺しているので、次のようにJavaScriptで記述すると「obniz」に認識されます!「obniz.wired()」で、使用部品とピン番号を設定することができるので簡単ですね。「onchange」を使えば温度に変化があるたびに任意の関数を実行することができます。そこで、コンソールログに引数の「temp」を出力することで温度を確認することができます。実行すると、こんな感じになります!無事に温度がログへ出力されているのが分かります。「Chart.js」で温度をグラフ化してみよう!せっかく温度が取得できるようになったので、もう少し見やすいグラフに変換して表示してみましょう。今回は初心者でも扱いやすいライブラリ「Chart.js」を使ってみます。HTMLにcanvasとグラフを表示するためのボタンを設置しましょう!ボタンをクリックすることで、取得した温度をグラフに変換してcanvasへ表示したいと思います。そこで、温度とラベルを保管しておく配列を作り、Chart.jsをインスタンス化する際にオプションとして初期データを設定しておきます。[]」と「datasets[]」は必ず必要なので上記のように空のデータを設定しておくわけです。あとは、温度の変化があるたびに用意した配列へ温度とラベルを格納していけば良いでしょう!温度のデータだけだと上手くグラフに表示されないので、必ずラベル(横軸)も同時に格納するようにしておきましょう。最後に、ボタンをクリックした際にChart.jsのグラフ描画を行えば完成です!ラベルや温度のデータには「chart.data」からアクセスできるようになっています。最後に「update()」を実行してグラフを再描画しないと反映されないので注意しておきましょう!これで、実行してボタンをクリックすると温度データが見事にグラフ表示になります!まとめ簡単な温度測定を行いグラフ化するまでをやってみました。Cloud」を使えばプログラムの定期実行が可能なので好きなタイミングでデータを取得できるようになります。