(Microsoft PowerPoint - Bluemix\225\327\213\255\211\357 - \217\211\202\337\202\304\202\314Node-RED.ppt [Compatibility Mode])

Transcription

1 Bluemix はじめての Node-RED ハンズオンテキスト 日本アイ ビー エム株式会社クラウド ソフトウェア事業部エコシステム デベロップメント 2015/08/2 ゆ updated 1

2 ハンズオンアジェンダ 1. Bluemixの基本操作 2. Node-REDでHello World 3. Node-REDでWatson 連携アプリを作成 4. Node-REDでDBアクセス 4. Node-REDでIoTアプリを作成 2

3 Bluemix の基本操作 3

4 IBM Bluemix へのログイン Web ブラウザを起動し 下記 URL より Bluemix にログインします 使用するブラウザは Firefox 推奨です 右上部の ログイン をクリック IBM ID( メールアドレス ) とパスワードを し サインイン ボタンをクリック 4

5 IBM Bluemix へのログイン Bluemix のダッシュボードの画 が表 されればログイン完了です 5

6 作業する地域を確認する Bluemix は 米国南部 と 英国 の 2 つのデータセンターで稼動しています 上部右端の人の形をしたアイコンをクリックするとメニューが表示され 作業する地域を選択できます 本資料では 国南部 を使うことを想定しています 6

7 [ 補足 ] 米国南部 選択時のポップアップへの対応方法 米国南部を選択した際に スペースを作成するように指示するポップアップ ウィンドウが表 された場合は 任意の名前を し 作成をクリックしてください 本資料ではスペース名として dev を使用します 7

8 Web-DB システムの構築 Bluemix 上に下の図のような Web-DB システムを構築してみましょう コードを実 する App サーバーとして Node.js DB サーバーとして SQL Database を使用します Web アプリサーバー データベースサーバー ルーター IBM Bluemix 8

9 アプリケーション実 環境の構築 (1/3) 1. 上部メニューの カタログ にて 作成するアプリケーションの実 環境を選択します ランタイムカテゴリから Node.js による JavaScript の実 環境を選択します 2. アプリケーション名とホスト名を指定して 作成 ボタンをクリックします 任意の名前を指定します 重複しているとエラーになるのでユニークな名称を指定してください 9

10 アプリケーション実 環境の構築 (2/3) 3. アプリケーションのステージングが開始され 30 秒ほどで完了します これだけの手順で Node.js の実 環境が構築できました 10

11 アプリケーション実 環境の構築 (3/3) 4. それでは作成したインスタンスに Web ブラウザでアクセスし サンプルとして 意されたスターター コードを実 してみましょう URL リンクをクリックすると 作成された Node.js 上で JavaScript のスターター アプリケーションが動いていることが確認できます このように Bluemix を使用するとクイックに 簡単に アプリケーションの実 環境をセットアップすることができます 11 この例では にアクセスしています

12 サービスの追加 (1/4) 1. 上部メニューの ダッシュボード をクリックし 作成したアプリケーション ( 資料では Node012) をクリックします 2. アプリケーションの概要ページが表示されます サービスまたは API の追加 をクリックします 12

13 サービスの追加 (2/4) 3. Bluemix のカタログページが表示されます このカタログでアプリケーションと連携させたいサービスを選択します 先ほど作成した Node.js の実 環境に SQL Database のサービスを追加してみましょう SQL Database のアイコンをクリックします 13

14 サービスの追加 (3/4) 4. アプリ欄に先ほど作成した Node.js のアプリ名が設定されていること プランとして Free Beta が選択されていることを確認して 作成 ボタンをクリックします サービス名はデフォルトのままで OK です アプリケーションの再ステージを確認するダイアログボックスが表示されますので 再ステージ ボタンをクリックします 14

15 サービスの追加 (4/4) 5. 左側のメニューから 概要 をクリックします SQL Database サービスが追加されたことを確認してください たったこれだけの手順で クラウド上に Web-DB システムを構築することができました 15

16 アプリケーション実 環境のクラスタ化 (1/4) 最後に仕上げとして Node.js を 3 台に増やしてみましょう 1. 左側のメニューから SDK for Node.js をクリックします 16

17 アプリケーション実 環境のクラスタ化 (2/4) 2. ここで実 環境のリソース変更が可能です インスタンス : 3 メモリー : 384MB と指定して 保存 をクリックします 再ステージ後 リソースが拡張されていることを確認してください 17

18 アプリケーション実 環境のクラスタ化 (3/4) ここまでの手順で クラウド上に下の図のような Web-DB システムができました Node.js のサーバーを 3 台並べて負荷分散を っています ユーザーからのリクエストは 自動的に 3 台の Node.js のいずれかにルーティングされます Web アプリサーバー データベースサーバー ルーター IBM Bluemix 18

19 アプリケーション実 環境のクラスタ化 (4/4) 3. リソースは拡張することはもちろん 縮退させることも可能です 元の状態に戻してみましょう インスタンス : 1 メモリー : 256MB と指定して 保存 をクリックします 再ステージ後 リソースが縮退されていることを確認してください 19

20 Node-RED で Hello World 20

21 What is Node-RED? ハードウェアデバイス API オンラインサービスを連携させて ロジックを作成できるフローエディター Web ブラウザベースの UI node.js で稼動 軽量 機能をノードという単位でカプセル化して利 Bluemix でなくても使用可能です 独自ノードの作成 追加可能 Bluemix の様々なサービスを簡単に利 可能 21

22 Node-RED インターフェース シート キャンバス 表示情報の切り替え デプロイ実 ノード 処理フロー 22 ノードパレット Node 情報ウィンドウまたはデバッグコンソール

23 Node-RED 操作方法 Node-RED 画面 4Deploy を選択 1 ノードを選択しドラッグ & ドロップ 2 ノード間を接続 3 ノードプロパティ設定 23

24 Node-RED ノードの操作方法 コネクタが右 コネクタが左右 コネクタが左 イベントの起動 イベント起動条件を満たしたとき 情報を右のノードに送信する データの処理 左からデータを受信 変換 / 分岐などの処理を い 結果を右のノードに送信する イベントの終了 左からデータを受信 外部アプリの起動 /DB 保存などの処理を い フローを終了する フローの左から右 向に処理が流れる 24

25 Node-RED 環境の作成 本資料では Bluemix の米国のデータセンターを使用することを想定しています 右上部の 地域 をクリックし 米国南部 を選択 もし スペースの作成 というウィンドウが表示された場合は 任意の名前 (dev 等 ) を指定してスペースを作成してください 上部メニューから カタログ をクリック 最上段の ボイラープレート カテゴリから Node-RED Starter を選択 25

26 Node-RED 環境の作成 アプリ名とホスト名を します 実際にはアプリ名を フィールドに れると ホスト名も同じ名前が指定されます 既に同じ名前のホストが存在する場合エラーとなりますので 他の人と重複しなそうな名前を指定してください 26 作成 ボタンをクリックすると Node-RED の環境作成が始まります 完了までしばらくお待ちください

27 Node-RED 環境の作成 ステージングが完了したら作成した環境にアクセスしてみましょう Node-RED のリンクをクリックします Node-RED が起動すれば OK です 赤いボタンをクリックする 27

28 Node-RED で Hello World Step1 まずは処理を開始するノードを作ってみましょう 左側のパレットから inject ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ キャンバスにドロップした inject ノードをダブルクリックして設定画面を開きます 一番上の Payload を blank を選択します イベントの起動を うだけで 次のノードにデータは送信されません OK をクリックします この数字を転記する 28

29 Node-RED で Hello World Step1 次にメッセージの表示内容を定義するノードを作ってみましょう パレットから template ノードをキャンバスにドラッグ & ドロップします ドラッグ & ドロップ template ノードをダブルクリックして設定画面を開きます もともと されている 字列を削除し Hello World!! など 任意の 字列を してください OK をクリックします 29

30 Node-RED で Hello World Step1 受け取ったデータを表示するノードを用意します 左側のパレットから debug ノードをキャンバスにドラッグ & ドロップします ドラッグ & ドロップ ノードの横にあるコネクタをクリック & ホールドし 3 つのノードを線で繋ぎます この部分を掴んで引っ張る 30

31 Node-RED で Hello World Step1 これで Hello World を表示するフローが完成しました それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 画面上部に Successfully Deployed の文字が表示されれば OK です ( この文字はすぐに消えます ) 実 結果を確認してみましょう 右上の debug タブを選択します debug ノードに流れてきたデータはこのコンソールに表示されます inject ノードの左側にあるボタンをクリックすると処理が起動します Hello World!! の 字列が debug コンソールに表示されれば成功です 取得できる情報はスマホの機種によって異なる場合があります この部分をクリックすると処理がスタート 31

32 Node-RED で Hello World Step2 作成したフローを拡張してみましょう Hello World の 字列を Web ページに出 してみます 左側のパレットから http ノードをキャンバスにドラッグ & ドロップします ドラッグ & ドロップ http ノードをダブルクリックして設定画面を開きます URL として /hello と します このパスに Web ブラウザでアクセスすると Hello World の 字列が表 されます 32

33 Node-RED で Hello World Step2 template ノードは先ほど作成したノードをコピーします ノードをクリックして選択し Ctrl + C でコピーできます template ノードをコピーします パレットから http response ノードをキャンバスにドラッグ & ドロップします ドラッグ & ドロップ 33

34 Node-RED で Hello World Step2 3 つのノードを線で繋ぎます これで Hello World を Web に表示するフローが完成しました それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 34 Web ブラウザの新しいタブを開きます Node-RED フローエディタの URL の末尾の red/# を削除し 代わりに hello と して Web ページにアクセスします ( 例 ) の場合は を開きます Hello World が Web ブラウザに表示されました!

35 Node-RED で Hello World Step3 あらかじめ template ノードに書かれた 字列だけでなく 任意の 字列を表 できるようにしてみましょう そのためには変数を使用します まずは URL リクエストパラメータで 字列を変数として渡す 法を試してみます Step2 で作成したフローをコピーします Shift キーを押しながらノードをクリックするとフロー全体が選択されます フローごとコピーします 右端の http ノードの設定画面を開き URL として /hello2 と します 中央の template ノードの設定画面を開き 表示内容を修正します {{name}} さん はろーわーるど!! と変更しました 35

36 Node-RED で Hello World Step3 左側のパレットから function ノードをキャンバスにドラッグ & ドロップします function ノードには JavaSctipt でコードを書くことができます フローごとコピーしますドラッグ & ドロップ function ノードをダブルクリックして設定画面を開きます 目に msg.name = msg.payload.name; と します 目はそのままで OK をクリックします 36

37 Node-RED で Hello World Step3 ノードを下の図のようにつなぎ直します 線を削除するには クリックで線を選択してDELETEキーです これで URL のパラメータで変数の値を受け取って Web に 字列を表 するフローが完成しました それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 37

38 Node-RED で Hello World Step3 Webブラウザの新しいタブを開いて 以下のURLにアクセスしてみましょう 佐藤 Node-RED エディタの URL です name 変数の値として 佐藤 という 字列を渡しています これで URL のパラメータで変数の値を受け取って Web に 字列を表 するフローが完成しました パラメータで渡した名前が Web ブラウザに表示されました! 38

39 Node-RED で Watson 連携アプリを作成 39

40 Watson Q&A サービスの追加 1. 上部メニューの ダッシュボード から 先ほど作成した Node-RED のアプリケーションを選択します 2. サービスまたは API の追加 をクリックします 40

41 Watson Q&A サービスの追加 3. カタログページに遷移します Watson カテゴリの Question and Answer をクリックします 4. 使用 をクリックします 41

42 Watson Q&A サービスの追加 5. アプリケーションの再ステージの確認がありますので 再ステージ をクリックします 6. ステージングが完了すれば準備 OK です リンクをクリックして Node-RED にアクセスします これで Node-RED から Watson の Q&A サービスが利 できるようになります 42

43 Node-RED で Watson アプリを作成 Node-RED が起動します Sheet 1 に先ほど作成したフローが残っている方は別シートを追加します 上部の + ( プラス ) ボタンをクリックします 新しいシートが開きますので ここで処理フローを作成してみましょう 43

44 Node-RED で Watson アプリを作成 Watson に質問を投げて その回答を受け取るフローを作ってみましょう 左側のパレットから 以下の 4 つのノードをキャンバスにドラッグ & ドロップして配置します input カテゴリ inject ノード output カテゴリ debug ノード function カテゴリ template ノード IBM_Watson カテゴリ Q and A ノード 44

45 Node-RED で Watson アプリを作成 順に各ノードの設定を っていきましょう inject ノードをダブルクリックして設定画面を開き Payload で blank を選択します OK をクリックします 45

46 Node-RED で Watson アプリを作成 function ノードには Watson に投げる質問 を します ここでは例として Which is the best hotel to stay in Okayama? とします OK をクリックします 46

47 Node-RED で Watson アプリを作成 Q and A ノードでは Watson のコーパスを指定します Corpus で Travel を選択します OK をクリックします 47

48 Node-RED で Watson アプリを作成 debug ノードは変更なしで OK です 4 つのノードを下記のように線で繋ぎます それでは実 してみましょう 右上の deploy をクリックします 48

49 Node-RED で Watson アプリを作成 inject ノードの左端部分をクリックすると 処理が開始されます template ノードに書かれた質問文が Watson Q&A サービスに投げられ その結果が右端の debug 画面に表示されます debug タブを選択 ここをクリック Watson からの回答が表示されれば成功です! Node-RED を使 すると もコードを書かずに Watson Q&A サービスを利 できます 49

50 Node-RED で Watson アプリを作成 Web 編 次に Watson からの回答を Web ページに表示するようにフローを編集してみましょう 左側のパレットから function ノードをドラッグ & ドロップで追加します function カテゴリ function ノード 設定画面を開き 1 目に context.global.answer = msg.payload; と追記します 2 目は変更なしで OK です 50

51 Node-RED で Watson アプリを作成 Web 編 追加した function ノードが Q and A ノードと debug ノードの間に入るように線を繋ぎます これで Watson からの回答が context.global.answer という変数に代入されました 続いて その回答を Web ページに表示するフローを作ってみましょう 51

52 Node-RED で Watson アプリを作成 Web 編 Watson からの回答を Web ページに表示するフローを作ってみましょう 左側のパレットから 以下の 4 つのノードをキャンバスにドラッグ & ドロップして配置します input カテゴリ http ノード function カテゴリ function ノード function カテゴリ template ノード output カテゴリ http response ノード 52

53 Node-RED で Watson アプリを作成 Web 編 順に各ノードの設定を っていきましょう http ノードをダブルクリックして設定画面を開き URL に /wat1 と します OK をクリックします 53

54 Node-RED で Watson アプリを作成 Web 編 function ノードをダブルクリックして設定画面を開き 1 目に msg.payload = context.global.answer; と追記します 2 目は変更なしで OK です OK をクリックします 54

55 Node-RED で Watson アプリを作成 Web 編 template ノードをダブルクリックして設定画面を開き 1 目に <h1>watson さんの回答 </h1>{{payload}} と します OK をクリックします 55

56 Node-RED で Watson アプリを作成 Web 編 http response ノードは変更なしで OK です 4 つのノードを下記のように線で繋ぎます それでは実 してみましょう 右上の deploy をクリックします 56

57 Node-RED で Watson アプリを作成 Web 編 先程と同様 inject ノードの左端部分をクリックすると 処理が開始されます Watson からの回答が debug 画面に表示されていることを確認します Web ブラウザの新しいタブを開きます Node-RED フローエディタの URL の末尾の red/# を削除し 代わりに wat1 と して Web ページにアクセスします ( 例 ) の場合は を開きます Watson からの回答が Web ブラウザに表示されました! 57

58 Node-RED で Watson アプリを作成 Web 編 Web ブラウザから質問 を できるようにしましょう これまで作成したフローから 再利 できる部分をコピーして新しいフローを作成してみます Shift キーを押しながら先程作成した 2 つ目のフローをクリックします このフローのすべてのノードが選択されます Ctrl キーと C キーを同時に押してコピーし Ctrl キーと V キーでペーストします キャンバスの適当な場所をクリックすると コピーしたフローが配置されます フローをコピーします 58

59 Node-RED で Watson アプリを作成 Web 編 左端のhttpノードをダブルクリックし URLを /wat2 と変更します 2 番目のfunctionノードをクリックして選択し Delete キーを押して削除します 3 番目のtemplateノードは次ページを参照 4 番目のhttp responseノードはそのままでokです 削除 次ページ 変更なし 59

60 Node-RED で Watson アプリを作成 Web 編 3 番目の template ノードに 質問文を受け取る HTML フォームを定義します ダブルクリックして以下の内容を してください 元の記載内容は削除します <form action= /wat3 method= post > <input type= text name= question value= Which is the best hotel to stay in Okayama? ><br> <button type= submit > 質問する </button> 質問例 </form> 以下のように 3 つのノードを線で繋ぎます これで Web ブラウザから質問 を するフローができました 60

61 Node-RED で Watson アプリを作成 Web 編 Watson に質問し 回答を表示するフローを作成しましょう これまで作成したフローから 再利 できる部分をコピーして新しいフローを作成してみます Shift キーを押しながら先程作成した 2 つ目のフローをクリックして選択します Ctrl キーと C キーを同時に押してコピーし Ctrl キーと V キーでペーストします キャンバスの適当な場所をクリックすると コピーしたフローが配置されます もう 度フローをコピーします 61

62 Node-RED で Watson アプリを作成 Web 編 左端の http ノードをダブルクリックし Method を POST URL を /wat3 と変更します 2 番目の function ノードをダブルクリックし context.global.answer の部分を msg.payload.question と書き換えます 3 番目の template ノードはそのままで OK です 4 番目の http response ノードもそのままで OK です 変更なし 変更なし 62

63 Node-RED で Watson アプリを作成 Web 編 Watson に質問する処理を追加します 最初に作成したフローから Q and A ノードをコピーします パレットから Q and A ノードを追加しても OK です その場合は忘れず Corpus を Travel に変更してください Q and A ノードをコピーします 63

64 Node-RED で Watson アプリを作成 Web 編 ノードを下記のように線で繋ぎ直します これで Watson に質問をして回答を Web ブラウザに表示するフローが完成しました それでは実 してみましょう 右上の deploy をクリックします 64

65 Node-RED で Watson アプリを作成 Web 編 Node-RED フローエディタの URL の末尾の red/# を削除し 代わりに wat2 と して Web ページにアクセスします ( 例 ) の場合は を開きます 質問 を して 質問する をクリックすると回答画面に遷移します Watson からの回答が Web ブラウザに表示されれば OK です! お疲れ様でした! このように Web アプリケーションを作成する場合も Node-RED は非常に便利です 65

66 Node-RED で DB アクセス 66

67 SQL Database へのデータ取り込み 1. 沢区が公開している AED の設置場所のデータを Web から取得します Web ブラウザを起動し 沢区データポータル にアクセスします 2. AED 設置場所 をクリックして CSV ファイルを保存します ファイル名はデフォルトの 3-kz-somu.csv のままで結構です 67

68 SQL Database へのデータ取り込み 3. ダッシュボードにて 最初のハンズオンで作成した SQL Database サービスをクリックします 4. Launch をクリックして SQL Database のコンソールを起動します 68

69 SQL Database へのデータ取り込み 5.Load Data をクリックします 69

70 SQL Database へのデータ取り込み 6. Brows files をクリックし ダウンロードした 3-kz-somu.csv を指定します ダウンロードした csv ファイルのコードページは Shift_JIS ですので Code page を 1208 から 943 に上書き変更します Does the file have columns that contain dates or times? を Yes にし 右下の Load File をクリックします ダウンロードした csv ファイルを指定 コードページを に変更 Yes に変更 70

71 SQL Database へのデータ取り込み 7. サンプルデータの CSV ファイルの内容が表示されていることを確認し Next をクリックします 71

72 SQL Database へのデータ取り込み 8. Create a new table and load にチェックを入れ Next をクリックします 72

73 SQL Database へのデータ取り込み 9. Table name を AEDKANAZAWA に変更します 10.Columnを以下のとおり変更し Finish をクリックします 名称 NAME 住所 ADDRESS 緯度 LATITUDE 経度 LONGITUDE AEDの数 AED 更新 UPDATE 73

74 SQL Database へのデータ取り込み 11. ロードしたテーブルを確認します 左上の Manage から Work with Table を選択します 12. 左側に表示されている AEDKANAZAWA をクリックすると 右側にテーブルの情報が表示されます 74 表の作成とデータの取り込みが完了しました

75 SQL Database サービスのバインド 1. 上部メニューの ダッシュボード から 先ほど作成した Node-RED のアプリケーションを選択します 2. サービスまたは API のバインド をクリックします 75

76 SQL Database サービスのバインド 3. バインド可能なサービスが表示されます SQL Database を選択し 追加 をクリックします 4. アプリケーションの再ステージの確認があるので 再ステージ をクリックします ステージングが完了すると Node-RED から SQL Database サービスが利 できるようになります 76

77 Node-RED で DB アクセス SQL Database から AED の情報を取得する Web API を作成します 左側のパレットから 以下の 3 つのノードをキャンバスにドラッグ & ドロップして配置します input カテゴリ http ノード output カテゴリ http response ノード storage カテゴリ sqldb ノード 左右にコネクタが付いたノードです 77

78 Node-RED で DB アクセス 順に各ノードの設定を っていきましょう http ノードをダブルクリックして設定画面を開き URL に /aed と します OK をクリックします 78

79 Node-RED で DB アクセス sqldb ノードをダブルクリックして設定画面を開きます -Server : バインドした SQL Database サービスを選択 -Query : SELECT * FROM AEDKANAZAWA OK をクリックします 79

80 Node-RED で DB アクセス http response ノードは変更なしで OK です 3 つのノードを下記のように線で繋ぎます それでは実 してみましょう 右上の deploy をクリックします 80

81 Node-RED で DB アクセス Web ブラウザの新しいタブを開きます Node-RED フローエディタの URL の末尾の red/# を削除し 替わりに aed と して Web ページにアクセスします ( 例 ) の場合は を開きます DB に格納された AED の情報が Web ブラウザに表示されました! 81

82 Node-RED で DB アクセス 作成した API を呼び出すアプリケーションを作成します 左側のパレットから 以下の 3 つのノードをキャンバスにドラッグ & ドロップして配置します input カテゴリ http ノード output カテゴリ http response ノード function カテゴリ template ノード 82

83 Node-RED で DB アクセス 順に各ノードの設定を っていきましょう http ノードをダブルクリックして設定画面を開き URL に /aedmap と します OK をクリックします 83

84 Node-RED で DB アクセス template ノードをダブルクリックして設定画面を開き Template の内容として の HTML をコピーします OK をクリックします 84

85 Node-RED で DB アクセス http response ノードは変更なしで OK です 3 つのノードを下記のように線で繋ぎます それでは実 してみましょう 右上の deploy をクリックします 85

86 Node-RED で DB アクセス Web ブラウザの新しいタブを開きます Node-RED フローエディタの URL の末尾の red/# を削除し 替わりに aedmap と して Web ページにアクセスします ( 例 ) の場合は を開きます アプリケーションが起動すれば成功です! 86

87 Node-RED で IoT アプリを作成 87

88 Node-RED で IoT アプリを作成 全体像 サービス アプリケーション IoT Foundation サービスはセンサーデータを仲介する IBM IoT Foundation デバイス IBM Bluemix スマホのセンサーで計測したデータをクラウドサービスに送信 アプリはサービスからセンサーデータを取得して処理する 88

89 Node-RED で IoT アプリを作成 スマートフォンをお持ちの方は スマホのブラウザで以下の URL にアクセスしてください PhoneSensor が起動します スマホに内蔵された各種センサーの情報を取得し Bluemix の IoT Foundation サービスに送信しています このセンサー情報を受け取って処理するアプリを Bluemix 上の Node-RED で作ってみましょう 89

90 Node-RED で IoT アプリを作成 スマホのセンサー情報を クラウド上の IoT Foundation サービスから受け取ってみましょう 左側のパレットから ibmiot ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ キャンバスにドロップした IBM IoT App In ノードをダブルクリックして設定画面を開きます Authentication は Quickstart を選択 Device Id に先程の PhoneSensor に表示されている 字列の末尾 12 桁の数字を この数字を転記する 90

91 Node-RED で IoT アプリを作成 受け取ったデータを表示するノードを用意します 左側のパレットから debug ノードを中央のキャンバスにドラッグ & ドロップします ドラッグ & ドロップ ノードの横にあるコネクタをクリック & ホールドし ibmiot ノードと debug ノードを線で繋ぎます この部分を掴んで引っ張る 91

92 Node-RED で IoT アプリを作成 これでデータの と出 の定義ができました それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 画面上部に Successfully Deployed の文字が表示されれば OK です ( この文字はすぐに消えます ) 実 結果を確認してみましょう 右上の debug タブを選択します debug ノードに流れてきたデータはここに表示されます 先程の PhoneSensor を動かします スマホのセンサー情報が debug 画面に表示されれば成功です 取得できる情報はスマホの機種によって異なる場合があります 92

93 Node-RED で IoT アプリを作成 debug 画面にセンサーデータがうまく表示されない場合のチェックポイント -PhoneSensor が正しく稼動しているかどうかを確認してください スリープ状態でアプリが停止していないでしょうか -PhoneSensor の接続ステータスが Connected になっていることを確認してください 例えば 誤って PhoneSensor 画面下部の Register をタップしてしまうと ステータスが Disconnected になります - ibmiot ノードの Device Id が正しく設定されているかどうかをご確認ください スマホの Web ブラウザで PhoneSensor を再読み込みすると Device Id が変わってしまいます その場合は再度 ibmiot ノードの定義情報を PhoneSensor 側と同じになるよう変更してください 93

94 Node-RED で IoT アプリを作成 正しくセンサー情報が取得できたので この情報に応じて何らかの処理を うフローを作ってみましょう tiltlr というデータ項目に着目します これはスマホ端末の左右の傾きを測定しているようです 実際に端末を動かして 値の変化を確認してください この傾き度合いによって表 メッセージを変えてみましょう センサー情報から tiltlr の値だけを抽出します 左側のパレットから function ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き Function の内容を以下のように書き換えて OK をクリックします return {payload:msg.payload.d.tiltlr}; 94

95 Node-RED で IoT アプリを作成 正しく動くかどうか確認してみましょう ibmiot と debug との間に 今作成した function ノードを挟むように線を繋ぎ変えます 線はクリックで選択した状態で Delete キーで削除できます 右上の Deploy ボタンをクリックします 不要な情報が削除されて tiltlr の値だけが表示されれば OK です 95

96 Node-RED で IoT アプリを作成 tiltlr の値によって処理を分岐させます 左側のパレットから switch ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き 分岐条件を指定します 左に 5 度以上傾いた場合 = 左に傾いてます 右に 5 度以上傾いた場合 = 右に傾いてます 傾きが 5 度未満の場合 = ほぼフラットです 上記のような条件設定をするには右図のように指定して OK をクリックします 条件を追加するには +rule ボタンをクリックします 傾きが -5 度以上 ( 左 ) なら 1 番へ 傾きが 5 度以上 ( 右 ) なら 2 番へ どちらでもない ( フラット ) なら 3 番へ 96

97 Node-RED で IoT アプリを作成 条件分岐された後の処理を作成します 左側のパレットから template ノードを中央のキャンバスにドラッグ & ドロップします ダブルクリックで設定画面を開き 表示するメッセージを定義します ご 由にメッセージの内容を してください {{payload}} と指定すると 先程 debug 画面で確認した傾きデータの値が表示されます 1 番 ( 左 ) 2 番 ( 右 ) 3 番 ( フラット ) 97 同様に 2 番 3 番のノードも作成し それぞれメッセージを定義します 最後に switch ノードのコネクタと 1 番 2 番 3 番のノードを線で繋げます

98 Node-RED で IoT アプリを作成 キャンバスの中を整理して 各ノードを以下の図のように接続してください 正しく線が繋がっていれば ノード自体はキャンバス内のどこに置かれていても動作に影響はありません 処理フローが完成しました! それでは実際に動かしてみましょう 右上の Deploy ボタンをクリックします 98

99 Node-RED で IoT アプリを作成 Successfully Deployed のメッセージが表示されれば成功です PhoneSensor を稼動させたスマホを左右に傾けてメッセージが正しく表示されることを確認してください お疲れ様でした! IBM Bluemix と Node-RED によって ほぼノンプログラミングで IoT デバイスから収集したデータを処理するアプリが作れました 99

100 Node-RED 応用編 100

101 Node-RED でフローのエクスポート / インポート ここから先は応用編です 余裕のある方はぜひ試してみてください Node-RED は作成したフローを JSON 形式のテキストとして export/import することができます JSON 形式のテキストの例 [{ id : 13257eec , type : websocket-listener, path : /ws/stations, wholemsg : false },{ id : 28a6990b.d75966, type : websocket out, name :, server : 13257eec , x :677, y :274, z : 60aa0f7b.9f55f, wires :[]},{ id : f5ecfe3e.0a13, type : xml, name :, attr : $, chr : _, x :498.5, y :27 5, z : 60aa0f7b.9f55f, wires :[[ 28a6990b.d75966, 3e967dc2.c16982 ]]},{ id : 3e967dc2.c16982, type : debug, name :, active :true, console : false, complete : false, x :626.5, y :340, z : 60aa0f7b.9f55f, wires :[]},{ id : 2c1c43fd.d3e3bc, type : http request, name : リクナビ API 呼び出し, method : GET, url : x :326, y :275, z : 60aa0f7b.9f55f, wires :[ [ f5ecfe3e.0a13 ]]},{ id : ad4079b6.52bf88, type : websocket in, name :, server : 13257eec , x :126, y :275, z : 60aa0f7b.9f55f, wires :[[ 2c1c43fd.d3e3bc ]]},{ id : fda d9, type : http response, name :, x :492, y :181, z : 60aa0f7b.9f55f, wires :[]},{ id : a8.88baf8, type : template, name : 表示内容の定義, field : payload, template : <!DOCTYPE html> n<html> n <head> n <meta name= viewport content= initial-scale=1.0, user-scalable=no > n <meta charset= utf-8 > n <title> 大学キャンパスマップ </title> n <style> n html, body, #map-canvas { n height: 94%; n margin: 5px; n padding: 0px n } n </style> n <script src= " "></script> n <script> n t tfunction initialize() { n t t var mylatlng = new google.maps.latlng(36.095, ); n t t var mapoptions = { n t t zoom: 11, n t t center: mylatlng, n t t }; n t t var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); n t t n t t var loc = window.location; n if (loc.protocol === "https: ") { n newuri = "wss: "; n } else { n newuri = "ws: "; n } n newuri += "// " + loc.host + "/ws/stations "; n t t n t t n t t var sock = new WebSocket(newUri); n t t sock.onopen = function(){ n t t console.log( "Connected websocket "); n t t console.log( "Sending ping.. "); n t t tsock.send( "Ping! "); n t t console.log( "Ping sent.. "); n t t }; n t t sock.onerror = function(){ console.log( "Websocket error "); }; n t t sock.onmessage = function(evt){ n t t var schooldata = JSON.parse(evt.data); n t t var stations = schooldata.results.school[0].campus; n t t tfor(var i = 0; i < stations.length; i++) { n t t t var camp = stations[i]; n var marker = new google.maps.marker({ n t t t position: new google.maps.latlng(camp.latitude[0],camp.longitude[0]), n t t t map: map, n t t t animation: google.maps.animation.bounce, n t t t title: camp.address[0] n t t t }); n t t t n t t t} n t t }; n t t}; n t t n t tgoogle.maps.event.adddomlistener(window, 'load', initialize); n n </script> n </head> n <body> n <div id= "map-canvas "></div> n <font size= "6 "> 大学キャンパスマップ </font> n <br>powered by IBM Bluemix and Node-RED n <div align= "right "> n <a href= " "><img src= " " alt= " リクナビ進学 Web サービス " width= "88 " height= "35 " border= "0 " title= " リクナビ進学 Web サービス "></a> n </div> n </body> n</html>","x":330,"y":181,"z":"60aa0f7b.9f55f","wires":[["fda d9"]]},{"id":"636d7b37.9c9284","type":"http in","name":"","url":"/schoolmap","method":"get","x":143,"y":181,"z":"60aa0f7b.9f55f","wires":[["774506a8.88baf8"]]}] 10 1

102 Node-RED で Watson アプリを作成 Web 編 - option Watsonに質問をするWebアプリを機能拡張したフローを公開しています この記事の 4. サンプルフロー の手順でフローを取り込んでみましょう 今回のハンズオンで作成したアプリだけでなく さらに拡張したフローもありますので Web アプリ作成の参考にしてください 10 2

103 Node-RED で Web API を活用したアプリを動かす 地図を表示する Google Maps API と大学の情報を提供するリクナビ進学 API を連携させたキャンパスの場所を地図上に示すサンプルアプリのフローを公開しています これらのフローを Node-RED に取り込んでみましょう JSON 形式のテキストを 選択 コピー します 10 3

104 Node-RED で Web API を活用したアプリを動かす Node-RED でシートを追加します 上部の + ( プラス ) ボタンをクリックして 新しいシートを開きます 新しいシートに先程コピーした処理フローを取り込みます 上部右端の三本線のアイコンをクリックし 表示されたメニューから import Clipboard を選択します 10 4

105 Node-RED で Web API を活用したアプリを動かす Import nodes ウィンドウが表示されるので 先程クリップボードにコピーしたテキストをペーストして OK ボタンをクリックします 処理フローが取り込まれますので キャンバスの適当な場所をクリックして配置します 10 5

106 Node-RED で Web API を活用したアプリを動かす このアプリを動かしてみましょう 右上の Deploy ボタンをクリックします 画面上部に Successfully Deployed の文字が表示されれば OK です 実 結果を確認してみましょう Web ブラウザの新しいタブを開いて Node-RED のホスト名の末尾に /schoolmap というパスを付加した URL にアクセスします Node-RED を開いている Web ブラウザの URL の末尾の /red/# を削除し /schoolmap を追加します ( 例 ) で Node-RED を開いている場合 にアクセスします 10 6

107 Node-RED で Web API を活用したアプリを動かす Node-RED で作ったサンプルアプリ 筑波大学はココ! が表示されれば OK です 地図上の筑波大学のキャンパスにマーカーが表示され マウスポインタを合わせると大学の住所が表示されます 10 7

108 Node-RED で Web API を活用したアプリを動かす debug 画面に リクナビ進学 API を呼び出した結果が表示されていることを確認してください 緯度経度や住所以外にも様々な情報が取得できています このようにクラウドで公開されている外部の API を呼び出すことで アプリの機能を拡張できます 10 8

109 Node-RED で Web API を活用したアプリを動かす - option 試してみましょう リクナビ進学 API に対してリクエストする内容を変えてみましょう リクナビ API 呼び出し ノードをダブルクリックして構成画面を開きます URL 欄の code=sc の部分を code=sc と変更して OK をクリック SC は茨城大学の学校コードです 時間のある方は SC : 関 学 SC : 日本大学なども試して結果を確認してみましょう デプロイして結果を てみましょう 右上の Deploy ボタンをクリックします 筑波大学はココ! をWebブラウザで再読み込みすると 実 結果はどう変わるでしょうか? 10 9

110 API 活用によるアプリ開発と IBM Bluemix 大学キャンパスマップアプリは Bluemix 環境の Node-RED 上で稼動しています 地図は Google Maps API を 学の住所および緯度経度の情報はリクナビ進学 API を呼び出して統合し Web ブラウザ上に表示しています IBM Bluemix API を活用することで効率的なアプリ開発が可能 大学キャンパスマップアプリ Google Maps API リクナビ進学 API クラウドの世界では API の公開が拡がっている 11 0

111 THANK YOU! 11 1

112 Bluemix User Group - BMXUG( ビーザグ ) Bluemix のユーザー会が発足しました! ぜひご参加ください! BMXUG はユーザー様主体 有志によって運営される 情報交換 ネットワーキングの場です 11 2

113 BMXUG への参加方法 で グループに参加 で コミュニティに参加