Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
INFOMOTION デモ環境のつくりかた
株式会社ウフル 石川 悟
@2016-12-01
今回つくるデモ環境は..
• enebular の INFOMOTION 機能をつかって、Milkcocoa に1秒
ごとに送った0〜99 の整数値を、リアルタイムで折れ線グラフ
として可視化します
2
手順
1. enebular に登録し、project を作成する
2. milkcocoa に登録し、初期設定をおこなう
3. project にデモ用のフロウをインポートする
4. データソースを設定する
5. INFOMOTION を作成...
1. enebular に登録し、project
を作成する
4
https://enebular.com にアクセスします
5
「無料サインアップ」ボタンをクリックし、enebularのアカウント登録を行ってください
(詳細割愛)
6
アカウント登録と認証が完了すると、コンソール画面が表示されます。
My Project には作成済みのプロジェクトが表示されます(初期表示は0件)
7
クリック
プロジェクトを作成してみましょう。「+New Project」ボタンをクリックします。
8
クリック
プロジェクト名の入力欄が表示されます。
任意の名称を入力して、「Create Project」ボタンをクリックしてください。
9
クリック
プロジェクトが作成されました。
プロジェクト名の部分をクリックしてください。
10
プロジェクトのダッシュボードが表示されます。
ここでいったん enebular の操作をやめ、milkcocoa の設定に取り掛かります。
11
2. milkcocoa に登録し、初期
設定をおこなう
12
クリック
Milkcocoa のアカウント登録をおこないます。
https://mlkcca.com/ にアクセスして「無料登録」ボタンをクリックしてください。
13
Email と Password を入力し、「アカウント作成」ボタンをクリックしてください。
14
Emailが届くので、認証用のリンクをクリックしてください。
15
クリック
認証が完了しました。「ログイン」ボタンをクリックしてください。
16
クリック
ダッシュボードが表示されます。
「新しいアプリを作る」ボタンをクリックしてください。
17
クリック
任意の名称を入力し、「新しいアプリを作る」ボタンをクリックしてください。
18
クリック
アプリが作成されました。これからこのアプリの認証情報を生成します。
作成したアプリの名前をクリックしてください。
19
アプリの概要画面が表示されるので、「認証」メニューをクリックしてください。
クリック
20
クリック
「新しいAPI KeyとAPI Secretのペアを生成する」ボタンをクリックしてください。
21
API KeyとAPI Secretのペアが生成されました。
これらの値は、enebular の設定で使用します。
22
3. project にデモ用のフロウを
インポートする
23
これから、グラフに描画するデータを作成するためのフローをインポートします。
「Discover」メニューをクリックしてください。
クリック
24
25
クリック
「Flows」メニューをクリックしてください。
26
公開されているフロウに一覧が表示されます。
「milkcocoa をもちいた InfoMotion のデモフロウ」をクリックしてください。
クリック
27
「Import to your project」をクリックしてください。
クリック
28
インポートが成功しました。
「View flows in the project」リンクをクリックしてください。
クリック
29
クリック
Private Flows にさきほどのフロウが表示されます。
「Open flow in editor」をクリックしてください。
30
editor 画面が表示されます。
「milkcocoa の任意のデータストアにデータを送信するノード」をダブルクリックしてください。
31
ウインドウが表示されます。
「Log in as 」を「Add new milkcocoa」にしてから、鉛筆ボタンをクリックしてください
32
さきほどのmilkcocoa の情報を入力し、「Update」をクリックしてください
33
「Ok」をクリックしてください
34
ウインドウが閉じるので、「 Deploy」をクリックしてください
35
Successfully Deployed と表示されれば成功です。
「1秒ごとに..」のノードの左のスイッチと「msg.payload..」のノードの
右のスイッチを ON にしてください。
36
画面右側の debug タブに値が表示されるようになれば、フロウの設定は終了です。
4. データソースを設定する
37
38
Datasource タブをひらき、「+New Data Source」をクリックします。
39
適当な名前を入力し「Add New Data Source」をクリックします。
40
データソース名の部分をクリックします。
41
Select Datasource Type のセレクトボックスをクリックして、
「milkcocoa」を選択します。
42
さきほどフロウで入力した情報と同じ情報を設定して「Save」をクリックしてください。
43
これでデータソースの設定は完了です。
5. INFOMOTION を作成し、時
系列データを表示する
44
45
InfoMotion タブをクリックし、「CREATE GRAPH」をクリックしてください。
46
ウインドウが表示されます。TYPEで 「metricgraphics」を選択してください。
47
ウインドウの内容がきりかわったらそのまま「OK」をクリックしてください。
48
InfoMotion が作成されました。「Untitled Graph」をクリックしてください。
49
表示画面がひらきます。「LIVE」をクリックしてください。
50
milkcocoa に1秒ごとに送信されている 0〜99 の時系列データを描画するグラフが
リアルタイム表示されます。これでおしまいです。やったね!
おしまい
51
Upcoming SlideShare
Loading in …5
×

enebular INFOMOTION デモ環境のつくりかた

1,897 views

Published on

株式会社ウフルの運営する enebular.com の新機能 INFOMOTION(インフォモーション)を試す方法

Published in: Data & Analytics
  • Be the first to comment

enebular INFOMOTION デモ環境のつくりかた

  1. 1. INFOMOTION デモ環境のつくりかた 株式会社ウフル 石川 悟 @2016-12-01
  2. 2. 今回つくるデモ環境は.. • enebular の INFOMOTION 機能をつかって、Milkcocoa に1秒 ごとに送った0〜99 の整数値を、リアルタイムで折れ線グラフ として可視化します 2
  3. 3. 手順 1. enebular に登録し、project を作成する 2. milkcocoa に登録し、初期設定をおこなう 3. project にデモ用のフロウをインポートする 4. データソースを設定する 5. INFOMOTION を作成し、時系列データを表示する 3
  4. 4. 1. enebular に登録し、project を作成する 4
  5. 5. https://enebular.com にアクセスします 5
  6. 6. 「無料サインアップ」ボタンをクリックし、enebularのアカウント登録を行ってください (詳細割愛) 6
  7. 7. アカウント登録と認証が完了すると、コンソール画面が表示されます。 My Project には作成済みのプロジェクトが表示されます(初期表示は0件) 7
  8. 8. クリック プロジェクトを作成してみましょう。「+New Project」ボタンをクリックします。 8
  9. 9. クリック プロジェクト名の入力欄が表示されます。 任意の名称を入力して、「Create Project」ボタンをクリックしてください。 9
  10. 10. クリック プロジェクトが作成されました。 プロジェクト名の部分をクリックしてください。 10
  11. 11. プロジェクトのダッシュボードが表示されます。 ここでいったん enebular の操作をやめ、milkcocoa の設定に取り掛かります。 11
  12. 12. 2. milkcocoa に登録し、初期 設定をおこなう 12
  13. 13. クリック Milkcocoa のアカウント登録をおこないます。 https://mlkcca.com/ にアクセスして「無料登録」ボタンをクリックしてください。 13
  14. 14. Email と Password を入力し、「アカウント作成」ボタンをクリックしてください。 14
  15. 15. Emailが届くので、認証用のリンクをクリックしてください。 15
  16. 16. クリック 認証が完了しました。「ログイン」ボタンをクリックしてください。 16
  17. 17. クリック ダッシュボードが表示されます。 「新しいアプリを作る」ボタンをクリックしてください。 17
  18. 18. クリック 任意の名称を入力し、「新しいアプリを作る」ボタンをクリックしてください。 18
  19. 19. クリック アプリが作成されました。これからこのアプリの認証情報を生成します。 作成したアプリの名前をクリックしてください。 19
  20. 20. アプリの概要画面が表示されるので、「認証」メニューをクリックしてください。 クリック 20
  21. 21. クリック 「新しいAPI KeyとAPI Secretのペアを生成する」ボタンをクリックしてください。 21
  22. 22. API KeyとAPI Secretのペアが生成されました。 これらの値は、enebular の設定で使用します。 22
  23. 23. 3. project にデモ用のフロウを インポートする 23
  24. 24. これから、グラフに描画するデータを作成するためのフローをインポートします。 「Discover」メニューをクリックしてください。 クリック 24
  25. 25. 25 クリック 「Flows」メニューをクリックしてください。
  26. 26. 26 公開されているフロウに一覧が表示されます。 「milkcocoa をもちいた InfoMotion のデモフロウ」をクリックしてください。 クリック
  27. 27. 27 「Import to your project」をクリックしてください。 クリック
  28. 28. 28 インポートが成功しました。 「View flows in the project」リンクをクリックしてください。 クリック
  29. 29. 29 クリック Private Flows にさきほどのフロウが表示されます。 「Open flow in editor」をクリックしてください。
  30. 30. 30 editor 画面が表示されます。 「milkcocoa の任意のデータストアにデータを送信するノード」をダブルクリックしてください。
  31. 31. 31 ウインドウが表示されます。 「Log in as 」を「Add new milkcocoa」にしてから、鉛筆ボタンをクリックしてください
  32. 32. 32 さきほどのmilkcocoa の情報を入力し、「Update」をクリックしてください
  33. 33. 33 「Ok」をクリックしてください
  34. 34. 34 ウインドウが閉じるので、「 Deploy」をクリックしてください
  35. 35. 35 Successfully Deployed と表示されれば成功です。 「1秒ごとに..」のノードの左のスイッチと「msg.payload..」のノードの 右のスイッチを ON にしてください。
  36. 36. 36 画面右側の debug タブに値が表示されるようになれば、フロウの設定は終了です。
  37. 37. 4. データソースを設定する 37
  38. 38. 38 Datasource タブをひらき、「+New Data Source」をクリックします。
  39. 39. 39 適当な名前を入力し「Add New Data Source」をクリックします。
  40. 40. 40 データソース名の部分をクリックします。
  41. 41. 41 Select Datasource Type のセレクトボックスをクリックして、 「milkcocoa」を選択します。
  42. 42. 42 さきほどフロウで入力した情報と同じ情報を設定して「Save」をクリックしてください。
  43. 43. 43 これでデータソースの設定は完了です。
  44. 44. 5. INFOMOTION を作成し、時 系列データを表示する 44
  45. 45. 45 InfoMotion タブをクリックし、「CREATE GRAPH」をクリックしてください。
  46. 46. 46 ウインドウが表示されます。TYPEで 「metricgraphics」を選択してください。
  47. 47. 47 ウインドウの内容がきりかわったらそのまま「OK」をクリックしてください。
  48. 48. 48 InfoMotion が作成されました。「Untitled Graph」をクリックしてください。
  49. 49. 49 表示画面がひらきます。「LIVE」をクリックしてください。
  50. 50. 50 milkcocoa に1秒ごとに送信されている 0〜99 の時系列データを描画するグラフが リアルタイム表示されます。これでおしまいです。やったね!
  51. 51. おしまい 51

×