2018年2月8日開催のIBM Cloud勉強会の発表スライドになります。

1. Node-RED
10本ノック
（Visual Recognition APIを絡めて）
Node-RED User Group Japan @ Osaka
岡田 裕行
2018年 2月8日 IBM Cloud勉強会

2. 自己紹介
● コミュニケーションロボット「ユニボ」を開発・販売するハードウェア
スタートアップ、ユニロボット株式会社にて、「ユニボ」の開発に従事
● CoderDojo西宮 / 梅田 でメンターもやってます
● 今年、Node-RED User Group Japan @ Osaka を立ち上げました！
@okhiroyuki

3. Node-REDとは？

4. Node-RED：Webベースの総合開発環境
● IBMが開発し、JS Foundationに寄贈した 「IoT向けプラットフォーム」
● ライセンスは、「Apache 2.0 License」
● WebブラウザでFlowEditorにアクセスすることで開発可能
● ビジュアルプログラミング環境

5. Node-REDの特徴
1. 移植性
2. 再利用性
3. 拡張性

6. 特徴１：移植性
● 組み込み環境
● PC / サーバー
● パブリッククラウド

7. 特徴２：再利用性
● 作成したFlow（プログラム）はJSONフォーマット
● Export / Import 可能

8. 特徴３：拡張性
● カスタムNode（拡張機能）の
インポートが可能
● Node-RED Libraryの存在
https://flows.nodered.org/
● Node-RED（FlowEditor）内からイ
ンストール可能

9. Node-RED x Visual Recognition API

10. Visual Recognition API
今年1月にライトプランでも使用できるようになった、画像認識APIです。
もちろん、IBM Cloud上のNode-REDから利用可能です。
● Node-REDで対応している内容
○ 画像の分類（ものの名称、信頼度など）
■ 既存のモデルデータ
■ 別途学習させたカスタムモデルベース
○ 顔検出（顔の位置、性別、年齢層）
○ テキスト認識（抽出した文字列）
https://console.bluemix.net/catalog/services/visual-recognition?taxonomyNavigation=app-serv
ices

12. Node-REDへの追加手順
1. カタログからサービスを選択
2. サービスの作成
3. Node-REDの接続へ移動
4. サービスをConnect
5. 再ステージ

18. Visual Recognition ノード

19. Visual Recognition ノード
● 設定画面では、３つの分析内容が選択できる
○ 画像分類（デフォルトのモデルを使用）
○ 顔検出
○ テキスト認識
● 入力データは、URL or 画像データ（Buffer）を、msg.payload経由で渡
す
● 出力結果は、msg.resultで取得できる
● msg.paramsを使用すると、動的に設定を変更できるほか、カスタム分類モ
デルを指定できる。
※詳細は、情報タブを参照ください。

20. Visual Recognition ノードのサンプル
● ポイント
○ 解析対象となる画像URLをinjectノードのペイロード（ msg.payload）にセットする
○ Detect対象を決める

21. 顔検出結果の一例

22. 画像分類結果の一例

23. テキスト認識結果の一例

24. Node-REDでAPI化

25. HTTP Node
Webサービスを作成するためのHTTPエンドポイントが作成できます。
必ず、Http in / Http Request Node をセットで使用します。
使用に当たっては、下記のオブジェクトが重要となります。
● msg.req
○ このオブジェクトには、要求に関する情報を提供する複数のプロパティが含まれています。
● msg.payload
○ Http In：GETリクエストの場合、クエリ文字列パラメータのオブジェクトが含まれます。それ以外の場
合は、HTTP要求の本文が含まれます。
○ Http Request：レスポンスのBodyとなります

26. FunctionNode
Functionノードは、受け取ったメッセージに対してJavaScriptコードを実行
することができ、フローを継続するためにゼロ個以上のメッセージを返すことが
できます。
その他の特徴
● Contextにデータ保存できる
● モジュールや関数が使用可能
● その他の機能については、
https://nodered.jp/docs/writing-functions

27. APIのベース
この例は、GET /test でアクセスすると、”hello world” を返すだけ

28. 画像URLを渡して、テキスト認識させる
● ポイント
○ URLは、msg.payload.url で取得できるので、取得値を msg.payload に代入する
○ 分析結果（ msg.result ）を msg.payload に代入する

29. curlコマンド
curl -X GET
'https://****.mybluemix.net/text?url=http://gahag.net/img/20
1604/13s/gahag-0075670157-1.png'
-H 'Cache-Control: no-cache'

30. ChangeNode
● メッセージ、フローコンテキストまたはグローバルコンテキストのプロパ
ティを設定、変更、削除、または移動します。
● ノードは、定義された順序で適用される複数のルールを指定できます。

31. FunctionNodeの変わりにChangeNodeを使う
● ポイント
○ FunctionNode を参考に、設定する

32. curlコマンド
curl -X GET
'https://****.mybluemix.net/text/change?url=http://gahag.net
/img/201604/13s/gahag-0075670157-1.png'
-H 'Cache-Control: no-cache'

33. 画像データを扱う

34. 画像ファイルを渡して、テキスト認識させる
● ポイント
○ Http Inノードで、ファイルのアップロード にチェックを入れる
○ ファイルのデータは、 msg.req.files[0].buffer で取得する

35. curlコマンド
curl -X POST
https://****.mybluemix.net/text
-H 'Cache-Control: no-cache'
-H 'content-type: multipart/form-data'
-F files=@{filepath}

36. パラメータ処理

37. パラメータで処理内容を変更する
● ポイント
○ リクエストからパラメータを取得する
○ Switchノードでパラメータの内容により、処理を切り替える

38. パラメータの取得
● msg.payload.{key} で取得可能

39. Switchノード
● プロパティの内容に応じて、
処理を分岐させることができる
ここでは、
● プロパティ値として、
msg.method を使用
● 該当がない場合の対応として、
“otherwise” を入れておく

40. curlコマンド
curl -X POST
https://****.mybluemix.net/switch
-H 'Cache-Control: no-cache'
-H 'content-type: multipart/form-data'
-F 'files=@{filepath}'
-F method=text

41. カスタムモデルの使用

42. カスタムモデルの作成手順
● Visual Recognition Tool（Beta）を起動
● 下記の情報をアップロード
○ モデル名
○ 分類したい写真群の ZIPデータ
○ ネガティブモデルもオプションで追加可能
● 作成開始
● トレーニング
● 準備完了
詳しくは、
https://console.bluemix.net/docs/services/visual-recognition
/tutorial-custom-classifier.html#-

48. サンプルコード
ポイント
● msg.paramsで設定が必要
○ detect_mode : classify
○ classifier_ids : {ids}
○ owners : IBM
● 今は、URL指定のみ？

49. 分析結果
https://raw.githubusercontent.com/watson-developer-cloud/doc-tutorial
-downloads/master/visual-recognition/dogs.jpg

50. まとめ
● Visual Recognition APIは、画像を与えるだけでWatosonから解析結果
を取得できる
● カスタムモデルも簡単に作成できる
● HTTPノードでAPI化してしまえば、他のサービスから簡単に利用することが
できる
● Functionノードを使えば、Javascriptでコードが記述できる
● Functionノードを使わなくても、他のノードで代替可能
気になるところ
● APIの制限はどうかけるのか？

51. Node-RED User Group Japan @ Osakaの活動

52. 第１回「Osakaキックオフ」やります！
https://node-red-osaka.connpass.com/event/77653/

53. LT枠あります！

54. ご清聴ありがとうございました！