CodeZine(コードジン)

特集ページ一覧

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

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

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

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

Webアプリケーション本体の作成

では、Webアプリケーション本体を作成していきます。Node-REDフローエディターで、画面29に示すフローを作成してください。本記事の添付ファイル(codezine_iotdemo_nodered_app2-b.json)からインポートすることもできます。

画面29:Webアプリケーション本体のフローを作成
画面29:Webアプリケーション本体のフローを作成

各ノードの設定を確認・編集していきます。最初に、「Cloudantからデータ取得処理」フローを修正します。

① input >「http」ノード

Injectノードと差し替えて、functionノード(「search param」)につなげます。

  • Method: GET
  • URL: /data
  • Name: 任意(画面29では「[get] /data」)

ここで指定したURLは、Ajaxによるデータ取得処理の呼び出しで使います。

画面30:① input >「http」ノードの設定
画面30:① input >「http」ノードの設定
② functionノード(「search param」)
  • Function: この後に示すコードを入力

Function欄に入力するコード

msg.payload = {
    "query": "timestamp: 2016*",
    "sort" : "-timestamp<string>",
    "limit": msg.payload.num
};

return msg;

HTTPリクエストのパラメーターとして"num"を設定することで、取得する件数を動的に指定できるようにしています。

上述したhttpノードで設定したURLと合わせて、例えば10件データを取得するためには次のURLをAjaxで発行すればよいことになります。

/data?num=10
画面31:② functionノード(「search param」)の設定
画面31:② functionノード(「search param」)の設定
③ output >「http response」ノード

画面側へレスポンスを返すために新規に追加して、Cloudantノードの出力側へつなげます。http responseノードは特に設定する項目はありません。

また、以前の手順でつなげてあったdebugノードはそのまま残しておいて構いません。

次に、「Webアプリケーション」フローを追加します。

④ input >「http」ノード
  • Method: GET
  • URL: /
  • Name: 任意(画面29では「[get]/」)

グラフ表示するページのURLをここで設定します。上記設定の場合は作成したアプリケーションのルートとなります(例 http://codezineiotdemo.mybluemix.net/)。例えば、ここで「/chart」を設定すると、「http://codezineiotdemo.mybluemix.net/chart」がページのURLとなります。

画面32:④ input >「http」ノードの設定
画面32:④ input >「http」ノードの設定
⑤ function >「template」ノード
  • Name: 任意(画面29では「index.html」。.htmlはなくても構いません)
  • set property: msg.payload(デフォルトのまま)
  • Template: 後に示すコードを入力(サンプルファイル「index_app2-b.html」)
  • Format: Mustache template(デフォルトのまま)

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

以下、コードの説明です。

12~41行目:D3.jsのグラフ用CSSの設定です。.lineが気温、.line2が機器温度、.line3が湿度の線となり、分かりやすくするためにそれぞれ色を変えています。

49~77行目:Cloudantのデータを取得するためのAjax発行処理です。D3.jsでは、54行目の「d3.json(dataurl, function(datas){・・・}という一行の表記だけでdataurlのAjaxを発行してJSON形式の戻り値dataを得て、「・・・」の処理を行う、ということが指定できます。取得したデータを使ってグラフ描画の処理を行いますので、グラフ描画処理はこのd3.jsonのfunctionブロック内に記述します。

103~155行目:D3.jsの初期処理(共通設定)です。今回は、1つのエリアに3つ線があり、かつ温度(気温、機器温度)と湿度という2軸(Y軸が2つ)というグラフになっているので、その分、設定項目は増えています。

159~221行目:グラフの描画処理です。Ajax発行ブロック内からコールされます。170~178行目で設定しているドメインというのは、グラフのX軸・Y軸の値の範囲です。180~205行目でX軸・Y軸を描画して、207~220行目でラインを描画しています。

画面33:⑤ function >「template」ノードの設定
画面33:⑤ function >「template」ノードの設定
⑥ output >「http response」ノード

設定する項目はありません。

ここまで確認・編集できたら動作確認します。Webブラウザで、本アプリケーションのルートURL(例 http://codezineiotdemo.mybluemix.net/)にアクセスし、画面34のようなグラフが表示されれば成功です。

画面34:このようなグラフが表示されたら動作確認は成功
画面34:このようなグラフが表示されたら動作確認は成功

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

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

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

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


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

著者プロフィール

バックナンバー

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