Get Started

このチュートリアルでは、以下のことを行います。

  • Projectの作成
  • Milkcocoaを利用したFlowの作成
  • 作成したFlowのデータを使用したグラフ(InfoMotion)の作成

Projectの作成

enebularを始めるには、まずProjectを作成します。「Project」とは文字通りプロジェクトの単位です。Projectは、データフローである「Flow」と、データの可視化を行うグラフである「InfoMotion」を複数持つことが出来ます。

「New Project」ボタンを押した後、プロジェクト名を入力してプロジェクトを作成します。

新規Flowの作成

Projectを作成したら、まずFlowを作成しましょう。作成したProjectを選択してProjectの管理画面に移動した後、左のサイドバーの 「New Flow」 を押すと、Node-REDの編集画面が立ち上がります。この編集画面でデータフローを編集してFlowを作成します。

データフローの編集・デプロイ

編集画面にて、左に並んでいるNode(APIの名前がついているボックス)をシートに置いて、Node同士を繋いでデータフローを作成します。作成したら、右上の“Deploy”を押すとデプロイできます。

図のフローは、10秒に1回、Milkcocoa(クラウドサービス)のデータストアに、ランダムな7種類のID(dataid)をラベルとした0〜50のランダムな値(v)を保存するものです。

下記の図を参考に、フローを作成ください。timestampノードで10秒ごとにフローが実行されるよう設定し、functionノードdataidvの値を設定し、milkcocoaノードで保存先であるMilkcocoaのアプリ情報(app_id)・データストア情報(datastore)・認証情報(API KeyAPI Secret)を設定します。

functionノードのコードは以下です。

var newMes = {};

newMes.payload = {};
newMes.payload.dataid = Math.floor(Math.random()*7 + 1);
newMes.payload.v = Math.floor(Math.random()*50 + 1);

return newMes;

milkcocoaノードのData StoretutorialOperationPushです。

なお、このFlowを作成する前に、MilkcocoaのチュートリアルページのMilkcocoaを使う準備をするを参考に、アプリを作成してapp_idと、Milkcocoa管理画面内の「認証」タブから作成出来るAPI KeyAPI Secretを控えておいて下さい。

※注1:無料版のenebularでは、デプロイ後30分アクセスがなければ自動的にスリープします。現在、無料版のみ提供しています。
※注2:Flowの編集画面を開いたまま放置すると、Deploy時に「Unauthorized」と失敗するようになりますので、その場合はリロードして下さい。

※補足:「Deploy」ボタンでデプロイを完了させると、enebular側の管理画面の「Flows」にデプロイしたFlowが自動的に追加されます。「Open flow in editor」ボタンをクリックすれば、再度編集画面を立ち上げてデータフローの編集をすることが可能です。

データの可視化(Datasourceの登録とInfoMotionの作成)

データプローのデプロイが完了したら、データの可視化をしましょう。

可視化をする前に、用語として以下を理解しておいて下さい。

  • InfoMotion: いわゆるグラフです。「Infographicよりも動きがあるもの」という意味で、InfoとMotionを組み合わせた造語です。
  • Datasource: グラフに表示するデータです。現在、データを受け取る種類にapiGatewaymilkcocoaがあり、今回はMilkcocoaを使用します。

では、最初にDatasourceの登録をします。「New Data Source」ボタンから作成し、作成されたDatasourceをクリックして詳細画面へ移動します。

「Select Datasource Type」で「milkcocoa」を選択し、必要な情報を入力します。STEP3のデータフローで指定したapp_iddatasotreAPI KeyAPI Secretを入力します。「SAVE」ボタンをクリックして保存します。

Datasourceの登録が終わったら、InfoMotionを作成しましょう。「CREATE GRAPH...」ボタンから作成し、作成されたDatasourceをクリックして詳細画面へ移動します。

今回は、デフォルトで用意されているInfoMotion Type(※)である棒グラフ(core-barchart)を使用します。
※InfoMotion Typeとは、グラフの種類(いわゆる棒グラフや円グラフ)のことを差します。

下図のように設定します。DATASOURCEには、さきほど登録したDatasourceを設定します。さらに、棒グラフにはlabel(x軸)とvalue(y軸)となるkeyを設定します。今回はデータのIDをdataid、値をvとしたので、それぞれをlabelvalueに設定します。

作成されたグラフをクリックすると、グラフへ移動します。

Well Done!

今回は、データを用意されたシンプルな棒グラフで表示しましたが、自身でInfoMotion Typeを作成してアップロードして使用することも出来ます。詳しい方法については、InfoMotion Type作成のチュートリアルをご覧下さい。