SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

次に作成するのは、一言で言えば「データベースの内容をグラフ表示するWebアプリケーション」です。「D3.js」というJavaScriptライブラリを使って、第一段階でデータベースに格納されたデータをグラフ化します。

D3.jsのD3とは「Data Driven Document」のことで、強力なデータおよびドキュメント操作が可能です。ニューヨーク・タイムズ紙のWebサイトやOpen Street Mapの編集用エディター、ソーシャルグラフなど様々な用途で使われています。公式サイトのExampleには、様々な事例が掲載されています。今回はD3.jsを使って、基本的な折れ線グラフ(Line Chart)を作成します。

画面21:D3.jsの公式サイト
画面21:D3.jsの公式サイト

「蓄積されたデータおよび随時更新されるデータをグラフとして可視化する」アプリケーションの作成は、次の4ステップで進めます。

  • ① Cloudantのインデックス作成
  • ② Cloudantからデータを取得する処理の作成
  • ③ Webアプリケーション本体の作成
  • ④ センサーデータが更新されるたびにグラフを更新する処理の作成

Cloudantのインデックス作成

Cloudantでは検索処理を行うために、検索対象となる項目のインデックスを作成する必要があります。今回はTimestampによって最新レコードを取得するため、Timestampのインデックスを作成します。Cloudanat Dashboardのデータベース画面にて、「Design Documents」の「+」アイコンをクリックし「New Search Index」を選択します(画面22)。

画面22:Cloudantのインデックス作成
画面22:Cloudantのインデックス作成

「Create Search Index」タブが開くので、以下の値を設定して「Save Document and Build Index」をクリックして、設定をセーブします。

「Create Search Index」タブ
  • _design/: index
  • Index name: 任意だが必須(画面23ではIndexByTimestamp)
  • Search index function: 後に示すコードを入力
  • Analyzer: Single
  • Type: Keyword

Search index function欄に入力するコード

function (doc) {
  index("timestamp", doc.timestamp, {"store": true});
  
}
画面23:「Create Search Index」タブの設定
画面23:「Create Search Index」タブの設定

セーブすると、インデックスが作成されます(画面24)。

画面24:インデックスが作成された
画面24:インデックスが作成された

Cloudantからデータを取得する処理の作成

続いて、作成したインデックスを用いてCloudantからデータを取得する処理を作成します。Node-REDフローエディターを開き、画面25に示すフローを作成してください。本記事の添付ファイル(codezine_iotdemo_nodered_app2-a.json)からインポートすることもできます。

画面25:インデックスを用いてCloudantからデータを取得する処理のフロー
画面25:インデックスを用いてCloudantからデータを取得する処理のフロー

各ノードをダブルクリックして、次のように設定を確認・編集してください。

① input >「Inject」ノード

デフォルトのままでOKです。

② function >「function」ノード
  • Name: 任意(画面25では「search param」)
  • Function: 後に示すコードを入力

Function欄に入力するコード

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

return msg;

ここでは、Cloudantの検索APIに対するパラメーターを指定しています。「timestampで2016が先頭一致するデータを、降順でソートして、2件取得」という意味です。

画面26:Cloudantの検索APIに対するパラメーターを指定
画面26:Cloudantの検索APIに対するパラメーターを指定
③ storage >「cloudant」ノード

今回は両側に端子が付いているノードを使います。

  • Service: プルダウンで「本アプリケーション名-cloudantNoSQLDB」を選択
  • Database: 先ほど作成したデータベース名
  • Search by: search index
    index / 先ほど作成したインデックス名(例えば IndexByTimestamp)
  • Name: 任意(画面25では「cloudant」)
画面27:③ storage >「cloudant」ノードの設定
画面27:③ storage >「cloudant」ノードの設定
④ output >「debug」ノード

デフォルトのままでOKです。

各ノードの確認・編集が終わったら「Deploy」して、動作確認します。Injectノードのボタンを押すと処理が実行され、Cloudantからのレスポンスが「debug」タブに表示されます(画面28)。

画面28:Cloudantからのレスポンスが「debug」タブに表示される
画面28:Cloudantからのレスポンスが「debug」タブに表示される

Cloudantからは、次のようなJSON形式の配列データが返ってきます。確認が終わったら、debugノードの出力をOFFにしておきましょう。

[ 
  { "_id": "36e86023793826c0feed6d98bfdbbfbf",
    "_rev": "1-17e5db35ee9966970c48f810b02f325c",
    "name": "d5e43608c74e",
    "timestamp": "2016-03-24_17:23:02",
    "temp": 18,
    "humidity": 78,
    "objectTemp": 24 
  },
  { "_id": "292064bfb6ee841d0e47c3aea48e3219",
    "_rev": "1-dcb4ff5982f6574d5e85b1ddc1423521",
    "name": "d5e43608c74e", 
    "timestamp": "2016-03-24_17:22:02", 
    "temp": 18, 
    "humidity": 78, 
    "objectTemp": 24
  }
]

クエリを実行してCloudantからデータを取得することが確認できたので、グラフを表示するWebアプリケーションは、この処理をAjaxで呼び出す仕組みで実装します。

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

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

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

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

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Bluemixではじめてみよう! 「IoT→クラウド」データ活用アプリケーション開発連載記事一覧

もっと読む

この記事の著者

大田尾 一作(株式会社DTS)(オオタオ イサク)

株式会社DTS イノベーション推進部在籍。業務内容は、FintechやIoT、AIといった新しい領域でのビジネスを推進するための調査・研究。日本Seleniumユーザーコミュニティに参加。   

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9354 2016/07/08 14:48

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング