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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

オプション 200を超えるBluemixのチュートリアル IBM Bluemix テーマ別チュートリアル http://www.ibm.com/developerworks/jp/bluemix/tutorial.html おすすめチュートリアル Node-REDを使用してリアルタイムのチャット アプリケーションを 5 分で作成する http://www.ibm.com/developerworks/jp/cloud/library/cl-rtchat-app/ Node-REDとIBM BluemixのPushサービスを利用してプッシュ通知を自動送信す http://www.ibm.com/developerworks/jp/web/library/wa-nodered-push-app/ IoT サービスと GPS サービスを Bluemix で統合して健康のために役立てる http://www.ibm.com/developerworks/jp/cloud/library/cl-getmoarsteps-app/ 76

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

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

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

80