CodeZine(コードジン)

特集ページ一覧

IoTセンサーデータを使ったD3.jsによるグラフ化と機械学習モデルによる故障予測

Bluemixではじめてみよう! 「IoT→クラウド」データ活用アプリケーション開発 【第3回】

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

「蓄積されたデータおよび随時更新されるデータをグラフとして可視化する」アプリケーション(続き)

センサーデータが更新されるたびにグラフを更新する処理の作成

第2段階の最後のステップは、センサーデータが更新されるたびにグラフを更新する処理の作成です。この処理にはWebSocketを使います。Node-REDフローエディターで既存のフローに対し、画面35で赤く囲った部分を追加・修正してください。本記事のサンプルファイル(codezine_iotdemo_nodered_app2-c.json)からインポート(追加・修正部分のみ)することもできます。

画面35:「センサーデータが更新されるたびにグラフを更新する処理の作成」のための追加・修正部分
画面35:「センサーデータが更新されるたびにグラフを更新する処理の作成」のための追加・修正部分

ここで行うのは、2つのノードの追加・変更のみです。

① output >「websocket」ノードの追加

「format EX timestamp」のfunctionノードから接続します。websocketノードをダブルクリックして以下を設定します。

  • Type: Listen on
  • Path: /ws/sensor(ペンアイコンをクリックして追加してください)
  • Name: 任意(画面35では「websocket」)
画面36:output >「websocket」ノードの設定
画面36:output >「websocket」ノードの設定
画面37:Path欄の設定。WecSocketリスナーの新規追加
画面37:Path欄の設定。WecSocketリスナーの新規追加
② 「Template」ノード(index.html)の修正
  • Template: 後に示すコードを入力(サンプルファイル「index_app2-c.html」)

Template欄に入力するコード(▼クリックするとプルダウンしてコードが表示されます)

以下、コードの追加部分の説明です。

47~49行目:WebSocketの接続用文字列とWebSocketオブジェクトを追加しています。接続用文字列は、

"ws://" + アプリケーションのURI + Node-REDのwebsocketノードで設定した文字列

となります(例 ws://codezineiotdemo.mybluemix.net/ws/sensor)。

101~105行目:WebSocketの接続/切断用のボタンを追加。

231~273行目:データ更新時のD3.jsによるグラフ描画処理。更新されたデータを使って、アニメーション処理で描画しています。

292~318行目:WebSocket接続、受信時の処理。最新1件のデータをグラフ描画用の配列に追加して1件を取り除き、グラフ描画処理を呼び出しています。

ここまで確認・編集できたら動作確認します。Webブラウザで、本アプリケーションのルートURL(例 http://codezineiotdemo.mybluemix.net/)にアクセスします。画面38に示すようなグラフが表示された後に「WebSocket接続」ボタンを押して、しばらく待ってグラフが更新されれば成功です。

画面38:動作確認。グラフがこのように表示されればOK
画面38:動作確認。グラフがこのように表示されればOK

IoT成功のカギを握る:データ管理・分析クラウドサービスのご紹介

現象をデータ化するセンサーやデバイスに注目が集まりがちなIoTですが、価値を生むのはデータ化したその後の処理です。

「多数のセンサー、デバイスからインターネット経由で送信されてくるJSONデータを効率よく保管する」
「保管した大量のデータから未知のパターンを割り出し、ビジネスを成長させる知見を提供する」

こうしたIoTが価値を生むためのサービス・製品がIBMにあります。ぜひ、下記の資料をご覧ください。(編集部)


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:Bluemixではじめてみよう! 「IoT→クラウド」データ活用アプリケーション開発
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5