「蓄積されたデータおよび随時更新されるデータをグラフとして可視化する」アプリケーション
次に作成するのは、一言で言えば「データベースの内容をグラフ表示するWebアプリケーション」です。「D3.js」というJavaScriptライブラリを使って、第一段階でデータベースに格納されたデータをグラフ化します。
D3.jsのD3とは「Data Driven Document」のことで、強力なデータおよびドキュメント操作が可能です。ニューヨーク・タイムズ紙のWebサイトやOpen Street Mapの編集用エディター、ソーシャルグラフなど様々な用途で使われています。公式サイトのExampleには、様々な事例が掲載されています。今回はD3.jsを使って、基本的な折れ線グラフ（Line Chart）を作成します。
「蓄積されたデータおよび随時更新されるデータをグラフとして可視化する」アプリケーションの作成は、次の4ステップで進めます。
- ① Cloudantのインデックス作成
- ② Cloudantからデータを取得する処理の作成
- ③ Webアプリケーション本体の作成
- ④ センサーデータが更新されるたびにグラフを更新する処理の作成
Cloudantのインデックス作成
Cloudantでは検索処理を行うために、検索対象となる項目のインデックスを作成する必要があります。今回はTimestampによって最新レコードを取得するため、Timestampのインデックスを作成します。Cloudanat Dashboardのデータベース画面にて、「Design Documents」の「＋」アイコンをクリックし「New Search Index」を選択します（画面22）。
「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});
}
セーブすると、インデックスが作成されます（画面24）。
Cloudantからデータを取得する処理の作成
続いて、作成したインデックスを用いてCloudantからデータを取得する処理を作成します。Node-REDフローエディターを開き、画面25に示すフローを作成してください。本記事の添付ファイル（codezine_iotdemo_nodered_app2-a.json）からインポートすることもできます。
各ノードをダブルクリックして、次のように設定を確認・編集してください。
① 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件取得」という意味です。
③ storage >「cloudant」ノード
今回は両側に端子が付いているノードを使います。
- Service： プルダウンで「本アプリケーション名-cloudantNoSQLDB」を選択
- Database： 先ほど作成したデータベース名
-
Search by： search index
index / 先ほど作成したインデックス名（例えば IndexByTimestamp） - Name： 任意（画面25では「cloudant」）
④ output >「debug」ノード
デフォルトのままでOKです。
各ノードの確認・編集が終わったら「Deploy」して、動作確認します。Injectノードのボタンを押すと処理が実行され、Cloudantからのレスポンスが「debug」タブに表示されます（画面28）。
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にあります。ぜひ、下記の資料をご覧ください。（編集部）
