1. joeartsea

    Posted

    joeartsea
Changes in title
+enebular INFOMOTION のMilkcocoa以外のデータを表示する
Changes in tags
Changes in body
Source | HTML | Preview

enebular INFOMOTIONはリアルタイムなデータの表示に特化しているわけではありません。何か過去のデータが蓄積されているデータソースがあればそれを表示することは可能です。API GatewayはAmazon API Gatewayを想定していますが、とりあえずクラウド上にホストしたNode-REDのエンドポイントで試すことも可能です。

HerokuでNode-REDを動かす

以下のHerokuボタンでHeroku上に簡単にNode-REDをホストできますので今回はこちらを利用します。

Deploy

何もしないとNode-REDのエディタ画面がフルオープンになってしまうのでHerokuの環境変数としてNODE_RED_USERNAMENODE_RED_PASSWORDを必須としてます。ユーザ名とパスワードを決めて入力したら "Deploy for Free" ボタンをクリックしてください。

スクリーンショット 2015-12-22 14.53.35.png

デプロイしたらホストにアクセスしてみます(https://<HerokuアプリID>.herokuapp.com )以下のような画面が表示されますので "Go to your Node-RED flow editor" ボタンをクリックします。

スクリーンショット 2015-12-22 14.56.44.png

するとログイン画面に遷移しますので先ほどHerokuデプロイ画面で設定したユーザ名とパスワードを入力してログインします。

スクリーンショット 2015-12-22 14.58.54.png

これで以下のようにNode-REDエディタ画面が表示されればOKです。今後、直接エディタ画面を開くには/redを付与してアクセスします(今回の例ですと https://<HerokuアプリID>.herokuapp.com/red )

スクリーンショット 2015-12-22 15.01.06.png

単純なHTTPリクエスト/レスポンスを構築する

まずはHTTPリクエストを受け付けるエンドポイントを作ってみましょう。以下のようにhttp in nodeをドラッグ&ドロップしてワークスペースに配置します。

スクリーンショット 2015-10-30 14.32.26.png

配置したhttp in nodeをダブルクリックするとnodeの設定ダイアログが開きます。

スクリーンショット 2015-10-30 14.37.06.png

URLを設定します。

スクリーンショット 2015-10-30 14.44.36.png

同じ要領でHTTPレスポンスを配置します。

スクリーンショット 2015-10-30 14.52.37.png

配置した2つのnodeをつなぎます。

スクリーンショット 2015-10-30 14.54.47.png

最後にデータを受け取れるかどうか確認するため同じ要領でdebug nodeを配置してhttp in nodeと接続してDeployボタンをクリックします。

スクリーンショット 2015-10-30 14.59.50.png

これで、Node-REDをインストールしたホストに/testというエンドポイントが作られましたのでブラウザの別ウィンドウ(タブ)などでアクセスしてみましょう。

image

HTTPレスポンスで何も返してないので空のJSONが返ってきます。

では、/test?aaa=111というようにパラメータを渡してみましょう。

image

渡したパラメータがレスポンスとしてJSONで返ってきました。

エディタ画面に戻るとdebug nodeによってデバッグ欄に受け取ったパラメータがJSONに変換されて表示されています。

スクリーンショット 2015-10-30 15.24.22.png

つまりhttp in nodeで受け取ったaaa=111というパラメータが{ "aaa": "111" }というJSONに変換されて、http out nodeとdebug nodeの両方へ流れていったということです。

固定的なJSONデータを返すようにする

ここから本来はデータベースに接続したりするところですが今回はシンプルなフローで理解するために上記フローにTemplateノードを付与して固定のJSONデータをレスポンスするようにします。

以下のようにTemplateノードを追加します。

image

Templateノードの設定ダイアログを開いて以下のJSONを入力します。

[{
    "created": 1480928602000,
    "value": 68
}, {
    "created": 1480928603000,
    "value": 93
}, {
    "created": 1480928604000,
    "value": 5
}, {
    "created": 1480928605000,
    "value": 84
}, {
    "created": 1480928606000,
    "value": 1
}, {
    "created": 1480928607000,
    "value": 25
}, {
    "created": 1480928608000,
    "value": 21
}, {
    "created": 1480928609000,
    "value": 32
}, {
    "created": 1480928610000,
    "value": 7
}, {
    "created": 1480928611000,
    "value": 64
}, {
    "created": 1480928612000,
    "value": 48
}, {
    "created": 1480928613000,
    "value": 98
}, {
    "created": 1480928614000,
    "value": 8
}, {
    "created": 1480928615000,
    "value": 70
}, {
    "created": 1480928616000,
    "value": 98
}, {
    "created": 1480928617000,
    "value": 81
}, {
    "created": 1480928618000,
    "value": 63
}, {
    "created": 1480928619000,
    "value": 69
}, {
    "created": 1480928620000,
    "value": 91
}, {
    "created": 1480928621000,
    "value": 97
}, {
    "created": 1480928622000,
    "value": 87
}, {
    "created": 1480928623000,
    "value": 19
}, {
    "created": 1480928624000,
    "value": 29
}, {
    "created": 1480928625000,
    "value": 40
}, {
    "created": 1480928626000,
    "value": 30
}, {
    "created": 1480928627000,
    "value": 44
}, {
    "created": 1480928628000,
    "value": 24
}, {
    "created": 1480928629000,
    "value": 14
}, {
    "created": 1480928630000,
    "value": 59
}, {
    "created": 1480928631000,
    "value": 86
}]

image

これで再度( https://<HerokuアプリID>.herokuapp.com/test )へアクセスすると以下のように固定的なJSONが返るようになります。

image

Datasourceとして登録する

最後に上記で設定したURL( https://<HerokuアプリID>.herokuapp.com/test )をenebularのINFOMOTIONのDatasourceに登録します。

以下のように任意の名前で新しくDatasourceを作成します。

image

API Gatewayタイプを選択してEndpointだけを入力します。

image

続いてグラフを以下のような設定で作成します。

image

グラフを開くと以下のように表示されます。

image

捕捉

上記の固定データは各データにタイムスタンプがあります。INFOMOTIONで表示するデータは時系列データに限られるので必ずタイムスタンプが必要です。つまり、数日後に上記で作成したグラフは表示されなくなります。

グラフの右上にある日付指定できるコントロールはグラフに表示するデータの抽出条件を指定します。

image

表示されなくなったら、これを変更することで表示はされます。ただ、本来はデータベースのデータを取得するフローになるかと思います。その場合、このコントローラで指定した日付はAPI側に{ "start": "1480258800000", "end": "1480950000000" }という形で送信されます。

HerokuのNode-RED側を見ると確かにデータが来てますね。

image

この値を使ってデータベースを抽出するようにロジックを組む必要がありますがフローを使えば楽に実装できますが別の機会とさせてください。

おまけ

逆にMilkcocoaはリアルタイム表示しかできないのか?というとそうではありません。むしろMilkcocoaノードのOperationのSendPushを切り替えるだけでシームレスにデータを永続化するかどうかが選択できるので過去のデータもリアルタイムなデータも両方簡単に扱えるサービスです。