IBM Bluemix ハンズオン・セミナー

Transcription

1 IBM Bluemix ハンズオン セミナー Node-RED 初 級 編 1

2 ハンズオンの 概 要 Bluemix 上 でノンプログラミングのNode-REDを 使 用 して 簡 単 なアプリケーション を 作 成 できるようになります Bluemixにおける Node-REDの 開 発 / 実 行 環 境 の 作 成 方 法 を 学 びます Bluemix 上 でNode-REDのサンプルアプリケーションを 作 成 することで Node-REDに おける 開 発 方 法 を 学 びます センサーシミュレーターから 取 得 した 各 種 センサーデータ( 温 度 湿 度 など)を 活 用 したIoTアプリケーションを 作 成 します Webアプリケーションを 作 成 します Watson 機 能 を 使 用 したWebアプリケーションを 作 成 します センサーシミュレーター ブラウザ 2

3 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 3

4 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 4

5 Node-REDとは? (1) Node-REDとは デバイス API オンラインサービスなどの 機 能 を 繋 げてアプリケーションを 作 成 していくプラットフォームです IBMのEmerging Technology Teamが 開 発 したソフトウェア 元 々はIoTデバイスの 活 用 に 特 化 したビジュアルツールだが 現 在 は 汎 用 的 オープンソフトウェアでありNode.jsが 動 く 環 境 なら 何 処 でも 動 かせる (Bluemix 環 境 ではなくても 使 用 可 能 ) 5

6 Node-REDとは? (2) 処 理 フローはブラウザベースのUIで 作 成 機 能 がカプセル 化 された Node を 繋 げていく(データの 流 れをデザイン) 汎 用 的 な 機 能 のほか Bluemixのサービス 機 能 も Node として 提 供 独 自 にNodeを 作 成 して 追 加 することも 可 能 Deployボタンのクリックで 実 行 環 境 へ 反 映 各 ノードの 動 作 を 個 別 に 設 定 シートにドラッグ&ドロップし 処 理 順 にノードを 結 合 Debug 出 力 画 面 処 理 ノードを パレットから 選 択 6

7 Node REDとは (3) Node-REDで提供される代表的なNode 2016年3月31日現在 カテゴリ 説明 Input 処理フローのトリガとなるイベント機能を提供 時間トリガ IoTデバイス mqttサブスクライバ httpリクエスト websocket受信など Output 外部へのデータ連携機能を提供 IoTデバイス mqttパブリッシュ httpレスポンス websocket送信など Function 分岐 データ加工 フォーマット変換 一時停止などのロジック機能を提供 Social メールやTwitterなどの送受信機能を提供 Storage 各種データベースとのI/O機能を提供 mongodb cloudant sqldb dashdbなど Analysis 分析機能を提供 Advanced RSSやatomなどのフィード更新時のイベント機能を提供 Watson 言語翻訳 画像認識 音声テキスト相互変換などおWatson機能を提供 7

8 Node-REDとは? (4) データの 処 理 ロジックはJavaScriptで 記 述 します 複 雑 なロジックになる 場 合 は 独 自 のノードを 作 成 したほうが 記 述 が 簡 単 になる こともあります 8

9 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 9

10 Bluemix へログイン Bluemix にログインします Webブラウザを 起 動 し Bluemix にアクセスします 下 記 URLを 入 力 します 表 示 された 画 面 上 の ログイン をクリックします 表 示 された 画 面 上 でIBM ID/パスワードを 入 力 して Sign in ボタンをクリックします ログインが 成 功 すると Bluemix の ダッシュボード 画 面 が 表 示 されます 10

11 [ 補 足 ]コンソールのタイプ 今 回 のハンズオンでは 現 行 コンソールを 利 用 いたします 現 行 コンソール NEWコンソール 11

12 作 業 する 地 域 を 確 認 する Bluemixは 米 国 南 部 英 国 シドニー の3 地 域 で 稼 動 しています 上 部 メニューの プロファイル 設 定 をクリックすることで 稼 動 する 環 境 を 選 択 することができます 今 回 は シドニー を 利 用 します 地 域 が シドニー になっていることを 確 認 してください それ 以 外 の 場 合 は 地 域 をクリックして シドニー を 選 択 してください 12

13 [ 補 足 ] 地 域 選 択 時 のポップアップへの 対 応 方 法 Bluemixへのログイン 時 もしくは 地 域 でシドニーを 選 択 した 場 合 に スペースを 作 成 するように 指 示 するポップアップ ウィンドウが 表 示 された ときは 任 意 の 名 前 ( 今 回 の 演 習 ではなるべくdevとしてください)を 入 力 し 作 成 をクリックしてください 13

14 Bluemix 画 面 操 作 (1) 画 面 上 部 にはいくつかのメニューが 並 びます ダッシュボード 作 成 されたアプリケーション サービスに 関 する 情 報 を 表 示 します カタログ 料 金 資 料 Bluemix 上 で 使 用 できるボイラープレート ランタイム サービスに 関 する 情 報 を 表 示 します 使 用 料 金 の 目 安 を 見 積 もるためのツールなどを 提 供 します Bluemixに 関 するヘルプ 文 書 を 提 供 します インターネット 上 に 様 々な 情 報 もございますが こちらで 情 報 を 確 認 いただくのが ベストです 14

15 Bluemix 画 面 操 作 (2) ブラウザ 画 面 を 有 効 に 活 用 するために 表 示 と 非 表 示 を 切 り 替 える アイコンがあります 画 面 解 像 度 によりメニューが 省 略 されることがありますので ご 注 意 ください 幅 が 小 さいブラウザーでのメニューの 表 示 非 表 示 の 切 り 替 え 例 15

16 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 16

17 ボイラープレートでアプリケーションを 作 成 する (1) Bluemixでは 幾 つかのランタイムやサービスを 組 み 合 わせたボイラー プレートというテンプレートを 提 供 しています これを 利 用 することで 簡 単 にBluemixアプリケーションを 開 発 することができます Bluemixのカタログメニューにボイラープレートを 確 認 してください 各 ボイラープレートをクリックすることで それが どのランタイム サービスを 組 み 合 わせたものかを 確 認 できます 17

18 ボイラープレートでアプリケーションを 作 成 する (2) Node-RED Starterをクリックします このボイラープレートは 以 下 の コンポーネントから 構 成 されていることが 分 かります - SDK for Node.js - Cloudant NoSQL DB 次 のように 入 力 し 作 成 ボタンをクリックします 名 前 : noderedapp+ 末 尾 に 任 意 の 文 字 列 ( 固 有 の 文 字 列 となる 必 要 ) ホスト: 上 記 の 名 前 がコピーされる 18

19 ボイラープレートでアプリケーションを 作 成 する (3) アプリケーションの 作 成 が 開 始 されます Node.jsランタイムのアプリケーション 上 にNode-REDを 含 むアプリケーションが 作 成 されます Cloudant NoSQLデータベースのインスタンスが 作 成 されて Node-REDの ノード 情 報 を 含 むデータベースが 作 成 されます Node.jsランタイムとデータベースのバインドが 実 施 されて アプリケーション 上 からデータベースを 利 用 可 能 にします 指 定 したホスト 名 でアプリケーションが 公 開 されます アプリケーションが 公 開 されるホスト 名 のFQDN ( 指 定 したホスト 名 ).au-syd.mybluemix.net 19

20 ボイラープレートでアプリケーションを作成する (4) 左上の dev のダッシュボードに戻る をクリックします スペース名が表示されるため dev ではない文字列の可能性もあります ダッシュボードに Node.jsアプリケーションと Cloudant NoSQL DB のサービスが追 加されることを確認します noderedapp アプリケーションの状態が青信号になるのを待ち 下部の右から2番 目のリンク アイコンをクリックします 青信号になるまでに数分かかることがあります 赤信号が表示されたり いつまでもステージング中の場合 ブラウザーを再読み込みしてみてください 20

21 ボイラープレートでアプリケーションを 作 成 する (5) 21 このような 画 面 が 表 示 されれば アプリケーションの 作 成 はひとまず 成 功 です

22 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 22

23 Node-REDに 挨 拶 しよう (1) ここからは 実 際 にNode-REDを 使 ってアプリケーションを 開 発 していきます アプリケーションの 画 面 を 表 示 し Go to your Node- RED flow editor ボタンをクリックします 23

24 Node-REDに 挨 拶 しよう (2) このような 画 面 が 表 示 されます 24

25 Node-REDに挨拶しよう (3) まずは簡単なフローから作成してみましょう 作成する処理フロー クリックすると時刻を取得して 出力する 使用するNode 25 クリック時刻の取得 injectノード 年月日時分への変換 functionノード 出力処理 debugノード

26 Node-REDに 挨 拶 しよう (4) 処 理 フローを 以 下 の 要 領 で 作 成 します 使 用 するノードを 左 側 のリソースから 真 ん 中 のフローエディター 内 に ドラッグ&ドロップします Injectノードは Inputカテゴリーに functionノードは function カテゴリーに debugノードはoutputカテゴリーにあります ノードの 右 側 からノード 左 側 の 間 をドラッグして 線 でつなぎます injectノード functionノード functionノード debugノード 各 ノードの 動 作 は ダブルクリックして 表 示 される 画 面 で 設 定 する この 中 から 使 用 するノードを 選 択 して シートにドラッグ&ドロップし 処 理 順 にノードを 結 合 26

27 Node-REDに 挨 拶 しよう (5) injectノードの 設 定 injectionノードをダブルクリックすると 属 性 を 編 集 する 画 面 が 表 示 されます Payloadにtimestampを 設 定 します この 設 定 により ノードをクリックすると Payloadにtimestampが 設 定 されます 27

28 Node-REDに 挨 拶 しよう (6) functionノードの 設 定 functionノードをダブルクリックすると 属 性 を 編 集 する 画 面 が 表 示 されます 各 属 性 を 設 定 します OK ボタンをクリックします 28

29 Node-REDに 挨 拶 しよう (7) funcitonノードのコード 記 述 例 // 前 ノードからのデータ 取 得 var serialdate = msg.payload; // シリアル 値 からDateオブジェクトへの 変 換 var date = new Date(); date.settime(serialdate); // データの 設 定 msg.payload = date.tostring(); // 次 ノードへのデータ 連 携 return msg; 29

30 Node-REDに 挨 拶 しよう (8) debugノードの 設 定 は 不 要 です これまで 作 成 した 各 ノードを 繋 ぎます 画 面 右 上 のDeployボタンをクリックします クリックする とフローの 設 定 がアプリケーションサーバに 反 映 され 実 行 可 能 となります 30

31 Node-REDに 挨 拶 しよう (9) ここからは 稼 働 確 認 をしてきます debugノードの 右 側 にあるボタンをクリックして debug タブへの 出 力 を 有 効 化 します Injectノードの 左 側 にあるボタンをクリック debugタブに 以 下 のようなメッセージが 表 示 されます 31

32 [補足] Node-REDで作成したフローのエクスポート 左クリックしてドラッグすることにより エクスポートする ノードを範囲選択します 右のメニューから[Export]-[Clipboard]を選択します 表示 されたダイアログのテキストをコピーします これがエクス ポートデータとなります テキストをコピー 32

33 [ 補 足 ] ハンズオンで 使 用 するコード 当 該 ハンズオンの 資 料 およびNode-REDのコードは 以 下 のURLからダウンロードできます 33

34 [補足] Node-REDで作成したフローのインポート インポートするタブを選択して 右のメニューから [Import]-[Clipboard]を選択します 表示されたダイアロ グにインポートするデータをコピーします テキストをペースト 34

35 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 35

36 Node-RED で IoT アプリを 作 成 する (1) ここからは 本 格 的 なアプリケーションを 作 成 していきます IoT (Internet of Things) は 家 電 自 動 車 ウェラブル デバイスなどあらゆる モノ をインターネットに 接 続 し お 互 いに 情 報 をやりとりすることで 新 しい 価 値 を 生 み 出 す 概 念 です ここでは 温 度 センサーにより 取 得 したデータによって 処 理 を 変 えるような IoT システムを 作 成 していきます ( 温 度 センサーはシミュレーターを 使 用 します) 36

37 Node-RED で IoT アプリを 作 成 する (2) さきほど 作 成 したフローとは 別 のフローを 作 成 します フローエディター 上 部 にある + アイコンをクリックします 新 しいフローのタブが 表 示 されます 37

38 Node-RED で IoT アプリを 作 成 する (3) ここでは Node-REDで 接 続 するセンサーの 情 報 を 取 得 します ブラウザーの 新 しいタブを 開 き ibm.biz/iotsensor に 接 続 します IoT Sensorシミュレータは インターネットに 接 続 するデバイスを エミュレートし 気 温 湿 度 物 体 温 度 の 情 報 を 発 信 (publish) する ことができます 画 面 右 上 に 当 デバイスの MAC アドレスが 表 示 されるので メモしておきます シミュレータの 画 面 は 開 いた ままにしておいてください 後 ほど 使 用 します 38

39 Node-RED で IoT アプリを 作 成 する (4) IoT Sensor のノードを 定 義 します 左 側 のリソースパレットの inputカテゴリ 内 にあるibmiotノードをフロー エディターのキャンバスにドラッグ&ドロップしてダブルクリックします 各 属 性 を 修 正 します Device Id 属 性 には 先 ほどメモしたIoT Sensorの MACアドレスを 設 定 します OK ボタンをクリックします 前 回 使 用 したDebugノードを 使 用 することで 疎 通 確 認 できます 39

40 Node-RED で IoT アプリを 作 成 する (5) センサーデータを 取 り 出 すfunctionノードを 定 義 します 左 側 のリソースパレットの functions カテゴリ 内 の function ノードを フローエディター 中 央 のキャンバスにドラッグ&ドロップして ダブル クリックします 各 属 性 を 設 定 します Name: temp Function: return {payload:msg.payload.d.temp}; OK ボタンをクリックします Iot Sensorと 線 を 繋 ぎます 40

41 Node-RED で IoT アプリを 作 成 する (6) 次 に 温 度 データの 条 件 分 岐 を 指 定 する switch ノードを 定 義 します ここでは 温 度 40 度 以 下 と40 度 超 で 分 岐 するよう 設 定 します リソースのfunctionカテゴリー 内 のswitchノードを 中 央 のキャンバスにドラッグ&ドロップしてダブルクリックします Edit switch node のダイアログ ボックスで 以 下 のように 入 力 します Name: temp thresh 分 岐 条 件 に 以 下 のようになるように 追 加 ( +rule ボタンをクリックして 追 加 ): Property msg.payload <= 40 >= 40 checking all rules Ok ボタンをクリックします temp と temp thresh をリンクします 41

42 Node-RED で IoT アプリを 作 成 する (7) 次 に 条 件 ごとの 処 理 を 指 定 する template ノードを 定 義 します ここではメッセージ 出 力 をそれぞれ 設 定 します リソースのfunctionカテゴリー 内 のtemplateノードを2つ キャンバスにドラッグ&ドロップします 2つを 以 下 のように 編 集 します 1つ 目 Name: safe Template: Temperature ({{payload}}) within safe limits 2つ 目 Name: danger Template: Temperature ({{payload}}) critical 右 図 のようにノードをリンクします 42

43 Node-RED で IoT アプリを 作 成 する (8) 処 理 結 果 をモニター 出 力 するための debug ノードを 定 義 します リソースのoutputカテゴリー 内 のdebugノードを キャンバスにドラッグ&ドロップし ダブルクリックします Edit debug node のダイアログ ボックスで 以 下 のように 入 力 します Output: message property msg.payload to: debug tab Name: cpu status OK ボタンをクリックします template と cpu status を 以 下 のようにリンクします 43

44 Node-RED で IoT アプリを 作 成 する (9) これまでのステップで 下 図 のようなフローができあがります 右 上 の Deploy ボタンをクリッ クし アプリケーションをデプロイします 上 部 に Successfully deployed と 表 示 されれば Bluemix 上 でのアプリケーションの デプロイは 成 功 です 右 側 のサイドバーを debug タブに 切 り 替 えます ( 必 要 に 応 じ 右 側 にウィンドウが 表 示 されるよう 操 作 します) 44

45 デプロイしたアプリケーションを 確 認 する IoT Sensor のウィンドウで 矢 印 ボタンをクリックし 温 度 を 変 更 します IoT Sensor の 温 度 が debug タブに 出 力 され 40 度 以 下 のときは Temperature (xx) within safe limits と 出 力 されることを 確 認 します IoT Sensor の 温 度 を 上 げて 40 度 を 超 えると Temperature (xx) critical と 出 力 されることを 確 認 します 45

46 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 46

47 Node-REDでWebアプリを作成する (1) ここではNode-REDを使用して Webアプリケーションを 作成していきます HTMLフォームの出力 ブラウザからのHTTPリクエストに対して HTTPレスポンスを返す方法を学びます HTMLフォームで入力された値の取得 HTTPリクエストのパラメータを取得して HTTPレスポンスに出力する方法を学びます ブラウザ HTTPリクエスト Bluemix Node-REDアプリケーション HTTPレスポンス 47 <html> <head> <title>hello Bluemix!</title> </head> Node.js ランタイム

48 Node-REDでWebアプリを 作 成 する (2) ~ HTMLフォームを 出 力 HTTPリクエストを 受 ける HTTP in ノードを 定 義 します 左 側 のリソースパレットの inputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 して Ok ボタンをクリックします Method: GET URL: /hello 48

49 Node-REDでWebアプリを 作 成 する (3) ~ HTMLフォームを 出 力 HTMLを 定 義 するtemplateノードを 定 義 します 左 側 のリソースパレットの functionカテゴリ 内 のtemplateノードをフロー エディタ 中 央 のキャンバスにドラッグ&ドロップしダブルクリックします 各 属 性 を 修 正 します Name: 入 力 画 面 Set property: msg.payload Syntax Highlight: HTML Template: HTMLを 記 載 Format: Mustache template OK ボタンをクリックします HTTP inノードと 線 を 繋 ぎます 49

50 Node-REDでWebアプリを 作 成 する (3) ~ HTMLフォームを 出 力 templateノードのコード 記 述 例 <html> <head> <title>web Application on Node-RED</title> </head> <body> <h1>hello World on Node-RED</h1> <h2>input your name!</h2> <form action="/hello" method="post"> <input type="text" name="name"> <input type="submit"> </form> </body> </html> 50

51 Node-REDでWebアプリを 作 成 する (4) ~ HTMLフォームを 出 力 HTTPレスポンスとなるHTTP responseノードを 定 義 します 左 側 のリソースパレットの outputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 します Name: HTTP 出 力 OK ボタンをクリックします 入 力 画 面 と 線 を 繋 ぎます Z 51

52 Node-REDでWebアプリを 作 成 する (5) ~ HTMLフォームを 出 力 これまでのステップで 下 図 のようなフローができあがります 右 上 の Deploy ボタンをクリッ クし アプリケーションをデプロイします 上 部 に Successfully deployed と 表 示 されれ ば Bluemix 上 でのアプリケーションのデプロイは 成 功 です ブラウザから 確 認 Node-REDのボイラーテンプレートの 名 前 と http in ノードで 指 定 したURLをもとにアクセス ブラウザからアクセス 例 ) 52

53 Node-REDでWebアプリを 作 成 する (6) ~ HTMLフォームで 入 力 された 値 の 取 得 HTTPリクエストを 受 ける HTTP in ノードを 定 義 します 左 側 のリソースパレットの inputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 して Ok ボタンをクリックします Method: POST URL: /hello 53

54 Node-REDでWebアプリを 作 成 する (7) ~ HTMLフォームで 入 力 された 値 の 取 得 HTMLを 定 義 するtemplateノードを 定 義 します 左 側 のリソースパレットの functionカテゴリ 内 のtemplateノードをフロー エディタ 中 央 のキャンバスにドラッグ&ドロップしダブルクリックします 各 属 性 を 修 正 します Name: 結 果 画 面 Set property: msg.payload Syntax Highlight: HTML Template: HTMLを 記 載 Format: Mustache template OK ボタンをクリックします HTTP inノードと 線 を 繋 ぎます 54

55 Node-REDでWebアプリを 作 成 する (7) ~ HTMLフォームで 入 力 された 値 の 取 得 templateノードのコード 記 述 例 <html> <head> <title>web Application on Node-RED</title> </head> <body> <h1>hello World on Node-RED</h1> <h2> Your name is {{payload.name}} </h2> </body> </html> 55

56 Node-REDでWebアプリを 作 成 する (8) ~ HTMLフォームで 入 力 された 値 の 取 得 HTTPレスポンスとなるHTTP responseノードを 定 義 します 左 側 のリソースパレットの outputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 します Name: HTTP 出 力 OK ボタンをクリックします 入 力 画 面 と 線 を 繋 ぎます Z 56

57 Node-REDでWebアプリを 作 成 する (9) ~ HTMLフォームで 入 力 された 値 の 取 得 これまでのステップで 下 図 のようなフローができあがります 右 上 の Deploy ボタンをクリッ クし アプリケーションをデプロイします 上 部 に Successfully deployed と 表 示 されれ ば Bluemix 上 でのアプリケーションのデプロイは 成 功 です 57

58 Node-REDでWebアプリを 作 成 する (10) ~ HTMLフォームで 入 力 された 値 の 取 得 HTMLフォームにデータを 入 力 最 初 に 作 成 したHTMLフォームを 出 力 するURLへアクセスして データを 入 力 して 送 信 ボタンをクリック 例 ) /helloにhttpリクエストが 送 信 され 以 下 の 画 面 が 表 示 されます 58

59 ハンズオン 手 順 1. Node-REDとは? 2. Bluemixへのアクセス 3. ボイラープレートでアプリケーションを 作 成 する 4. Node-REDに 挨 拶 しよう 5. Node-REDでIoTアプリケーションを 作 成 する 6. Node-REDでWebアプリケーションを 作 成 する 7. Node-REDでWatsonアプリケーションを 作 成 する 59

60 Node-REDでWatsonアプリを作成する (1) ここでは ブラウザベースの Watson アプリケーションを 作成していきます 具体的には ブラウザから入力された画像URLをもとに WatsonのVisual Recognition機能で画像を解析した結果を 出力します ブラウザ HTTPリクエスト Bluemix Node-REDアプリケーション Visual Recognition Node.js ランタイム HTTPレスポンス <html> <head> <title>hello Bluemix!</title> </head> 60

61 Node-REDでWatsonアプリを作成する (2) Visual Recognitionの追加① ボイラーテンプレートで作成したランタイムに 画像分析を 行うためのVisual Recognitionサービスを追加します 61

62 Node-REDでWatsonアプリを作成する (3) Visual Recognitionの追加② スペース アプリを確認して 作成 ボタンをクリックし ます サービス名は既定のままでかまいません 62

63 Node-REDでWatsonアプリを 作 成 する (4) ~ HTMLフォームを 出 力 HTTPリクエストを 受 ける HTTP in ノードを 定 義 します 左 側 のリソースパレットの inputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 して Ok ボタンをクリックします Method: GET URL: /recognize 63

64 Node-REDでWatsonアプリを 作 成 する (5) ~ HTMLフォームを 出 力 HTMLを 定 義 するtemplateノードを 定 義 します 左 側 のリソースパレットの functionカテゴリ 内 のtemplateノードをフロー エディタ 中 央 のキャンバスにドラッグ&ドロップしダブルクリックします 各 属 性 を 修 正 します Name: 入 力 画 面 Set property: msg.payload Syntax Highlight: HTML Template: HTMLを 記 載 Format: Mustache template OK ボタンをクリックします HTTP inノードと 線 を 繋 ぎます 64

65 Node-REDでWatsonアプリを 作 成 する (5) ~ HTMLフォームを 出 力 templateノードのコード 記 述 例 <html> <head> <title>web Application on Node-RED</title> </head> <body> <h1> 画 像 のURLを 入 力 してください </h1> <form action="/recognize" method="post"> <input type="text" name="imageurl"> <input type="submit"> </form> </body> </html> 65

66 Node-REDでWatsonアプリを 作 成 する(6) ~ HTMLフォームを 出 力 HTTPレスポンスとなるHTTP responseノードを 定 義 します 左 側 のリソースパレットの outputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 します Name: HTTP 出 力 OK ボタンをクリックします 入 力 画 面 と 線 を 繋 ぎます Z 66

67 Node-REDでWatsonアプリを 作 成 する (7) ~ HTMLフォームを 出 力 これまでのステップで 下 図 のようなフローができあがります 右 上 の Deploy ボタンをクリッ クし アプリケーションをデプロイします 上 部 に Successfully deployed と 表 示 されれ ば Bluemix 上 でのアプリケーションのデプロイは 成 功 です ブラウザから 確 認 Node-REDのボイラーテンプレートの 名 前 と http in ノードで 指 定 したURLをもとにアクセス ブラウザからアクセス 例 ) 67

68 Node-REDでWatsonアプリを 作 成 する (8) ~ HTMLフォームで 入 力 された 値 の 取 得 HTTPリクエストを 受 ける HTTP in ノードを 定 義 します 左 側 のリソースパレットの inputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 して Ok ボタンをクリックします Method: POST URL: /recognize 68

69 Node-REDでWatsonアプリを 作 成 する (9) ~ 画 像 URLを 抽 出 するノードの 追 加 入 力 画 面 から 画 像 URLを 抽 出 する changeノードを 定 義 します 左 側 のリソースパレットの functionカテゴリ 内 のchangeノードをフロー エディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 します Name: 画 像 URLの 抽 出 Set: msg.payload to: msg.payload.imageurl OK ボタンをクリックします HTTP inノードと 線 を 繋 ぎます 69

70 Node-REDでWatsonアプリを 作 成 する (10) ~ 画 像 を 解 析 するノードの 追 加 Visual Recgnitionノードを 定 義 します 左 側 のリソースパレットの IBM_Watsonカテゴリ 内 のvisual recognition ノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップします 先 ほど 作 成 したchangeノードとvisual recognitionを 結 びます (visual recognitionでは 属 性 の 定 義 は 必 要 ありません) 70

71 Node-REDでWatsonアプリを 作 成 する (11) ~ 結 果 画 面 を 定 義 するノードの 追 加 HTMLを 定 義 するtemplateノードを 定 義 します 左 側 のリソースパレットの functionカテゴリ 内 のtemplateノードをフロー エディタ 中 央 のキャンバスにドラッグ&ドロップしダブルクリックします 各 属 性 を 修 正 します Name: 結 果 画 面 Set property: msg.payload Syntax Highlight: HTML Template: HTMLを 記 載 Format: Mustache template OK ボタンをクリックします 先 ほどのノードと 線 を 繋 ぎます 71

72 Node-REDでWatsonアプリを 作 成 する (11) ~ 結 果 画 面 を 定 義 するノードの 追 加 templateノードのコード 記 述 例 <html> <head> <title>watson Visual Recognition on Node-RED</title> </head> <body> <h1>node-red Watson Visual Recognition 認 識 結 果 </h1> <h2> 解 析 対 象 イメージ image: {{payload}}<br/> <img src="{{payload}}" height='100'/></h2> <table border='1'> <thead><tr><th> 名 称 </th><th>スコア( 一 致 度 )</th></tr></thead> <tbody> {{#labels}} <tr> <td><b>{{label_name}}</b></td><td><i>{{label_score}}</i></td> </tr> {{/labels}} </tbody> </table> <hr/> <form action="/recognize"> <input type="submit" value="もう 一 度 解 析 "/> </form> </body> </html> 72

73 Node-REDでWatsonアプリを 作 成 する (12) ~ 結 果 画 面 の 出 力 HTTPレスポンスとなるHTTP responseノードを 定 義 します 左 側 のリソースパレットの outputカテゴリ 内 のhttpノードをフローエディタ 中 央 のキャンバスにドラッグ&ドロップし ダブルクリックします 各 属 性 を 修 正 します Name: HTTP 出 力 OK ボタンをクリックします 入 力 画 面 と 線 を 繋 ぎます Z 73

74 Node-REDでWatsonアプリを 作 成 する (13) これまでのステップで 下 図 のようなフローができあがります 右 上 の Deploy ボタンをクリッ クし アプリケーションをデプロイします 上 部 に Successfully deployed と 表 示 されれ ば Bluemix 上 でのアプリケーションのデプロイは 成 功 です 74

75 Node-REDでWatsonアプリを 作 成 する (14) HTMLフォームにデータを 入 力 最 初 に 作 成 したHTMLフォームにて 画 像 を 表 わすURLを 入 力 して 送 信 ボタンをクリック 例 ) 画 像 URLを 入 力 Visual Recognitionでの 画 像 解 析 結 果 が 表 示 されます 75

76 オプション 200を超えるBluemixのチュートリアル IBM Bluemix テーマ別チュートリアル おすすめチュートリアル Node-REDを使用してリアルタイムのチャット アプリケーションを 5 分で作成する Node-REDとIBM BluemixのPushサービスを利用してプッシュ通知を自動送信す IoT サービスと GPS サービスを Bluemix で統合して健康のために役立てる 76

77 ハンズオンのまとめ Bluemix 上 でノンプログラミングのNode-REDを 使 用 して 簡 単 なアプリ ケーションを 作 成 できるようになりました Bluemixにおける Node-REDの 開 発 / 実 行 環 境 を 作 成 できるようになりました Bluemix 上 でNode-REDのサンプルアプリケーションを 作 成 することで Node- REDにおける 開 発 方 法 を 学 びました センサーシミュレーターから 取 得 した 各 種 センサーデータ( 温 度 湿 度 など)を 活 用 したIoTアプリケーションを 作 成 できるようになりました Webアプリケーションを 作 成 できるようになりました Watson 機 能 を 使 用 したWebアプリケーションを 作 成 できるようになりました 77

78 Bluemix User Group (BMXUG:ビーザグ) Bluemixの 利 用 促 進 や 情 報 交 換 を 目 的 としたコミュニティ ユーザー 様 主 体 有 志 による 運 営 Bluemixのユーザー 会 が 設 立 されました! ぜひご 参 加 ください! BMXUG facebookで グループに 参 加 をクリック! または 女 子 部 もありますのでお 気 軽 にどうぞ Doorkeeperからご 登 録 ください!(ニックネームだけでの 登 録 も 可 能 です) 78

79 最 後 に:アンケート ibm.biz/bluemixq アンケート 記 入 にご 協 力 ください 3 分 ほどで 入 力 いただける 内 容 です 79

80 80