1. joeartsea

    Posted

    joeartsea
Changes in title
+enebular INFOMOTION のMilkcocoa以外のデータを表示する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,219 @@
+enebular INFOMOTIONはリアルタイムなデータの表示に特化しているわけではありません。何か過去のデータが蓄積されているデータソースがあればそれを表示することは可能です。API GatewayはAmazon API Gatewayを想定していますが、とりあえずクラウド上にホストしたNode-REDのエンドポイントで試すことも可能です。
+
+## HerokuでNode-REDを動かす
+
+以下のHerokuボタンでHeroku上に簡単にNode-REDをホストできますので今回はこちらを利用します。
+
+[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy?template=https://github.com/joeartsea/node-red-heroku)
+
+何もしないとNode-REDのエディタ画面がフルオープンになってしまうのでHerokuの環境変数として`NODE_RED_USERNAME`と`NODE_RED_PASSWORD`を必須としてます。ユーザ名とパスワードを決めて入力したら "Deploy for Free" ボタンをクリックしてください。
+
+<img width="912" alt="スクリーンショット 2015-12-22 14.53.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/1fc03a74-4507-0be9-d8f5-733059e50c55.png">
+
+デプロイしたらホストにアクセスしてみます(https://<HerokuアプリID>.herokuapp.com )以下のような画面が表示されますので "Go to your Node-RED flow editor" ボタンをクリックします。
+
+<img width="1174" alt="スクリーンショット 2015-12-22 14.56.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/e63a4c32-a9bb-bff2-1f11-b14b6185594c.png">
+
+するとログイン画面に遷移しますので先ほどHerokuデプロイ画面で設定したユーザ名とパスワードを入力してログインします。
+
+<img width="1174" alt="スクリーンショット 2015-12-22 14.58.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/4ddd9698-9015-2f00-3e29-8b8ec072aec7.png">
+
+これで以下のようにNode-REDエディタ画面が表示されればOKです。今後、直接エディタ画面を開くには`/red`を付与してアクセスします(今回の例ですと https://<HerokuアプリID>.herokuapp.com/red )
+
+<img width="1172" alt="スクリーンショット 2015-12-22 15.01.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/03db75b9-25c4-a3a0-b684-6c940daac448.png">
+
+## 単純なHTTPリクエスト/レスポンスを構築する
+
+まずはHTTPリクエストを受け付けるエンドポイントを作ってみましょう。以下のようにhttp in nodeをドラッグ&ドロップしてワークスペースに配置します。
+
+<img width="1201" alt="スクリーンショット 2015-10-30 14.32.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/8692d7fb-b146-a4af-b22e-ec3261343b8b.png">
+
+配置したhttp in nodeをダブルクリックするとnodeの設定ダイアログが開きます。
+
+<img width="1196" alt="スクリーンショット 2015-10-30 14.37.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/3ce7ece9-0c58-65a6-b815-6cc13832c083.png">
+
+URLを設定します。
+
+<img width="1198" alt="スクリーンショット 2015-10-30 14.44.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/ed5cbb53-5574-3533-33e8-ac2f4137a4b5.png">
+
+同じ要領でHTTPレスポンスを配置します。
+
+<img width="1196" alt="スクリーンショット 2015-10-30 14.52.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/a99ba45c-77f7-d6fb-831a-fbd2f1f67bf1.png">
+
+配置した2つのnodeをつなぎます。
+
+<img width="1197" alt="スクリーンショット 2015-10-30 14.54.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/1e68c05f-27dc-8c2f-9a30-097164f44868.png">
+
+最後にデータを受け取れるかどうか確認するため同じ要領でdebug nodeを配置してhttp in nodeと接続してDeployボタンをクリックします。
+
+<img width="1198" alt="スクリーンショット 2015-10-30 14.59.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/597c5c61-e119-2895-11fc-9f18616a8ccb.png">
+
+これで、Node-REDをインストールしたホストに`/test`というエンドポイントが作られましたのでブラウザの別ウィンドウ(タブ)などでアクセスしてみましょう。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/0b87edcd-4b14-ccb6-9435-29f7638d8c43.png)
+
+
+HTTPレスポンスで何も返してないので空のJSONが返ってきます。
+
+では、`/test?aaa=111`というようにパラメータを渡してみましょう。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/dbacfa4b-5368-161c-9b2e-0edbe6d13e09.png)
+
+渡したパラメータがレスポンスとしてJSONで返ってきました。
+
+エディタ画面に戻るとdebug nodeによってデバッグ欄に受け取ったパラメータがJSONに変換されて表示されています。
+
+<img width="1197" alt="スクリーンショット 2015-10-30 15.24.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/44f57096-c02e-d8d3-59bd-712abaac7a0f.png">
+
+つまりhttp in nodeで受け取った`aaa=111`というパラメータが`{ "aaa": "111" }`というJSONに変換されて、http out nodeとdebug nodeの両方へ流れていったということです。
+
+## 固定的なJSONデータを返すようにする
+
+ここから本来はデータベースに接続したりするところですが今回はシンプルなフローで理解するために上記フローにTemplateノードを付与して固定のJSONデータをレスポンスするようにします。
+
+以下のようにTemplateノードを追加します。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/d27a5a59-7639-88da-ded9-accba4168b26.png)
+
+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://qiita-image-store.s3.amazonaws.com/0/21109/39f2e58d-083c-17fc-c9d9-c063e40792e4.png)
+
+これで再度( https://<HerokuアプリID>.herokuapp.com/test )へアクセスすると以下のように固定的なJSONが返るようになります。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/5529bd50-f710-0e1b-9e5d-1a4196a79398.png)
+
+##Datasourceとして登録する
+
+最後に上記で設定したURL( https://<HerokuアプリID>.herokuapp.com/test )をenebularのINFOMOTIONのDatasourceに登録します。
+
+以下のように任意の名前で新しくDatasourceを作成します。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/cfb18f90-dbf3-48ee-b5a1-6490e24b1e18.png)
+
+API Gatewayタイプを選択してEndpointだけを入力します。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/8b580e35-66da-789d-987c-835262fd8f09.png)
+
+続いてグラフを以下のような設定で作成します。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/6c07ef2e-43d1-c00d-a97a-8885e653ea39.png)
+
+グラフを開くと以下のように表示されます。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/b2221e4a-295d-bd84-a126-10c88d2871e0.png)
+
+## 捕捉
+
+上記の固定データは各データにタイムスタンプがあります。INFOMOTIONで表示するデータは時系列データに限られるので必ずタイムスタンプが必要です。つまり、数日後に上記で作成したグラフは表示されなくなります。
+
+グラフの右上にある日付指定できるコントロールはグラフに表示するデータの抽出条件を指定します。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/6e70cb30-1422-dd5d-0394-687a6faa4ea1.png)
+
+表示されなくなったら、これを変更することで表示はされます。ただ、本来はデータベースのデータを取得するフローになるかと思います。その場合、このコントローラで指定した日付はAPI側に`{ "start": "1480258800000", "end": "1480950000000" }`という形で送信されます。
+
+HerokuのNode-RED側を見ると確かにデータが来てますね。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/21109/172d7c78-bb4d-839f-ab61-914d7dd78b9c.png)
+
+この値を使ってデータベースを抽出するようにロジックを組む必要がありますがフローを使えば楽に実装できますが別の機会とさせてください。
+
+## おまけ
+
+逆にMilkcocoaはリアルタイム表示しかできないのか?というとそうではありません。むしろMilkcocoaノードのOperationの`Send`と`Push`を切り替えるだけでシームレスにデータを永続化するかどうかが選択できるので過去のデータもリアルタイムなデータも両方簡単に扱えるサービスです。
+