Node-RED初心者向けハンズオン教材

4/14に開催されたNode-RED UG Osaka 勉強会Vol2
https://node-red-osaka.connpass.com/event/80950/
の初心者向けハンズオン教材

Transcript

1. Node-RED初心者向けハンズオン 2018年4月14日 Node-RED UG Osaka
2. Node-REDとは：Webベースの統合開発環境 2 ・ブラウザ上で開発/デプロイ WebブラウザでFlowEditorに アクセスすることで開発を開始。 ・IBMが開発し、JS Foundationに寄贈した 「IoT向けプラットフォーム」 ライセンスは「Apache 2.0 License」 Node Flow 機能モジュールである「Node」を並べ、接続することで処理の「Flow」を定義。 ブラウザ上の「Deploy」でそのままサーバにデプロイ。 そのまま実行できる。 ・ビジュアルプログラミング環境
3. Node-REDの特徴 3 Node.jsベースで開発されており、さまざまなOS環境で動作する。 ・移植性 組み込み環境 PC/サーバ パブリッククラウド
4. Node-REDの特徴 4 つくったFlowはJSONフォーマットでFlowEditorへExport/Importできる。 ⇒他の人がつくったFlowを再利用できる ・再利用性 Node-RED Libraryで 公開されている CustomNodeを 取り込むことで、 各種Webサービスや 各社サービスの機能を FlowEditorに組み込むことができる。 ・拡張性 http://flows.nodered.org/
5. Node-REDのインストール 5 サーバソフトウェア（サービス）としてインストールする ⇒サーバソフトウェアとして起動する（ポート番号は1880） ⇒ブラウザからアクセスして利用する （同じホストでブラウザを起動してアクセスしてもよい） ・Node-REDはサーバソフトウェア 宅内LAN http://localhost:1880/ 192.168.100.35 192.168.100.100 http://192.168.100.35:1880/ ルータ https://nodered.cloud.example.com/admin nodered.cloud.example.com http://localhost:1880/
6. Node-REDをはじめる：PC(Windows/macOS) 6 Node.jsのLTS(Long Term Support)版をインストーラでインストールする （2018/4/13現在 v8.11.1) 標準でnpm 5.xが導入される ・必要なミドルウェアの導入
7. Node-REDをはじめる：PC(Windows/macOS) 7 管理者権限が必要 ・Linux/macOSの場合はsudoを使って管理者で 「sudo npm install -g --unsafe-perm node-red」 ・Windowsの場合はコマンドプロンプトを「管理者として実行」で 「npm install -g --unsafe-perm node-red」 ・npmでNode-REDの導入 ・起動は「node-red」 ・ブラウザで「http://localhost:1880」にアクセスする
8. Node-REDをはじめる：Raspberry Pi 8 Raspbian 2015-11-23版より、Node-REDが標準でインストールされている。 ・Raspberry Piではじめる コンソールが開いて サービスが起動する ブラウザで http://localhost:1880/ にアクセス
9. Node-REDをはじめる：Raspberry Pi 9 Raspbianで標準サポートされている ミドルウェアが古い場合があり、 そのままでは安定して動作しない。 ・Raspberry PiにおけるNode-REDの更新 ⇒更新用スクリプト 「update-nodejs-and-nodered」を用いて Node.jsとNode-REDを最新版に更新する （所要時間約12分）
10. クラウド環境でのNode-RED 10 ※ハンズオン用にお渡ししたアカウントでログインします
11. Node-REDのFlowEditor 11
12. Node-REDのFlowEditor 12 ノードパレット ワークスペース コンソール （情報・デバッグ等） デプロイボタン メニュー
13. Node-REDを使ってみる 13 ▪最初のフロー： Hello World ノードをワークスペースへドラッグ ノードの端子間をドラッグしてつなげる
14. Node-REDを使ってみる 14 ノードをダブルクリック ペイロードを文字列に変更して文字列を入力 ▪最初のフロー： Hello World
15. Node-REDを使ってみる 15 デプロイをクリック ▪最初のフロー： Hello World
16. Node-REDを使ってみる 16 インジェクトのボタンをクリック デバッグタブに文字列が表示される ▪最初のフロー： Hello Worldの実行
17. Node-REDを使ってみる 17 ▪フローのコピーペースト ノードをドラッグして選択し コピー（Ctrl+C / Command+C) ペースト （Ctrl+V / Command+V)
18. Node-REDを使ってみる 18 ▪ワークスペースタブの操作 タブの右端「＋」をダブルクリック タブが増える タブをダブルクリックすると タブの名称、情報を修正できる （状態を無効にすることでタブ内のFlowが実行されなくなる） タブを削除できる
19. Node-REDを使ってみる 19 ▪タブ間のフローのコピーペースト ノードをドラッグして選択し コピー（Ctrl+C / Command+C) タブを切り替えてペースト （Ctrl+V / Command+V)
20. Node-REDを使ってみる 20 ▪フローの書き出し、読み込み ・書き出し（Export） フローを選択して メニューの「書き出し」⇒「クリップボード」 用途：異なるサーバのFlowEditorにフローを移動するとき フローのバックアップ、リストア
21. Node-REDを使ってみる 21 ▪フローの書き出し、読み込み ・メモ帳で保存 メモ帳にペースト 拡張子JSONで、UTF8で保存
22. Node-REDを使ってみる 22 ▪フローの書き出し、読み込み メモ帳からコピー（Ctrl-A → Ctrl-C) メニューの 「読み込み」⇒クリップボード ・読み込み(Import)
23. Node-REDを使ってみる 23 ▪フローの書き出し、読み込み ・読み込み(Import) ここにペースト (Ctrl + V) 読み込みをクリック
24. Node-REDをWebサーバにする 24 ▪静的Webページを作成 http inノードのURLに/から指定したものが、パスになる
25. Node-REDをWebサーバにする 25 ▪動的Webページを作成 ＵＲＬの一部をパラメータとして「：」（コロン）付きで記載 （先頭には使えません） テンプレートノードにmushtache記法で記載 {{req.params.パラメータ}} がパラメータに置き換わる
26. Node-REDからWebサービスにアクセスする 26 ▪外部Webサービスへのアクセス http://qiita.com/matsuoshi/items/7c19e7dcf404b7d921d6 日本の祝日を JSON / CSV 形式で返す API https://holidays-jp.github.io/api/v1/date.json
27. Node-REDからWebサービスにアクセスする 27 ▪外部Webサービスへのアクセス Node-REDからアクセスする： http requestノード
28. Node-REDからWebサービスにアクセスする 28 ▪外部Webサービスからのデータを構造化 JSON形式なら、取得したデータが構造化され、使いやすくなる
29. Node-REDからWebサービスにアクセスする 29 ▪外部Webサービスからのデータを構造化 Changeノードをつかって、構造化したデータを扱う
30. Node-REDを使ってみる 30 ▪課題：日本の祝日APIをNode-REDでつくってみる ヒント１：オリジナルの「日本の祝日API」の出力をTemplateノードにコピー ヒント２：TemplateノードはJSONでレスポンスに送る ヒント３：正しくできたかどうか、 前項のフローで自身でアクセスしてみる このアイコンで値をコピーできます
31. Node-REDを使ってみる 31 ▪課題：日本の祝日APIをNode-REDでつくってみる
32. Node-REDを掘り下げる 32 ▪フローを流れるメッセージのデータ型 JSON (JavaScript Object Notation) boolean:論理型(true/false) number:数値型 string：文字列型 Buffer: Buffer型(バイナリストリーム) msg.payload
33. JSONについて 33 ▪JSON (JavaScript Object Notation)
34. Node-REDのロジックを使ってみる 34 ▪フローによるロジック ・メッセージ変更
35. Node-REDのロジックを使ってみる 35 ▪フローによるロジック ・条件分岐
36. Node-REDのロジックを使ってみる 36 ▪フローによるロジック ・ループ
37. Node-REDのロジックを使ってみる 37 ▪フローによるロジック ・永続化 Flow/Global変数 ファイル
38. Node-REDを使ってみる 38 ▪さまざまなNode Flowエディタ操作（クリック）をトリガとしてFlowにメッセージを出力する。 定期送信機能（インターバル/時間指定/期間指定）も持つ。 Tab内のJavascript例外を捕らえてFlowにメッセージを出力する。 処理異常時のFlow定義に用いる。 Tab内のNodeの状態変化を捕らえてFlowにメッセージを出力する。 インターネットからのhttpsのリクエスト(GET/POST/PUT/DELETE）を捕らえてFlowにメッセージ を出力する。httpサービスのFlow定義に用いる。Flow中にhttp responseノードが１つ以上必要。 インターネットからのwebsocket（wss://）を捕らえてFlowにメッセージを出力する。Websocket サービスのFlow定義に用いる。Flow中にwebsocket出力ノードが１つ以上必要。 Flowからメッセージを受信してdebugサイドバーに出力する。サーバのコンソールに出力することも できる。 Flowからメッセージを受信してhttpsクライアントにレスポンスを返す。http入力ノードとセットで 用いる。 Flowからメッセージを受信してWebsocketクライアントにレスポンスを返す。websocket入力ノー ドとセットで用いる。 標準or カスタム 標準 標準 標準 標準 標準 標準 標準 標準
39. Node-REDを使ってみる 39 ▪さまざまなNode Function Node：Javascriptで自由に処理を記載できるNode。出力を配列にすることにより、条件に よって複数の出力を持つことができる。 メッセージのテンプレートを出力するNode。mustache/HTML/JSON/Markdown形式で文法チェッ クが可能。 メッセージを遅延出力するNode。遅延量固定/ランダム/最大量指定/平滑化が可能。 2つのメッセージを入力情報/一定時間に応じて出力しわけるするNode。GPIOのトグル出力などに用 いる。 Flowに注釈を記載するNode。処理には関係しない。 条件にしたがって出力を分岐するNode。Function Nodeでも記載可能だがより視覚的。 メッセージの作成/交換/削除を行うNode。Function Nodeでも記載可能だがより視覚的。 CSVやTSVのように、区切り文字で区切られた文字列をJavascriptのオブジェクトに変換したり、そ の逆を行うNode。 HTMLを加工するNode。CSSセレクタを用いてページ情報を文字列だけにしたり整形したりできる。 外部Webサービスにリクエストを行うNode。GET/PUT/POST/PATCH/DELETEメソッドによる要求 が可能で、ヘッダ/ボディのカスタマイズも可能。レスポンスを出力する。 入力された数値メッセージのスケーリングを行うNode。特定の範囲を持つセンサ入力を正規化したり 上限/下限を設定したりできる。 JSON文字列をJavascriptのオブジェクトに変換したり、その逆を行うNode。 xml文字列をxml2jsで解析してオブジェクトに変換したり、その逆を行うNode。 標準 標準 標準 標準 標準 標準 標準 標準 標準 標準 標準or カスタム 標準 標準 標準
40. 入力された文字列を英語の文字列とみなして、AFINN-111を用いて感情判定しFlowに出力する。英 語のみ有効。 サーバ上の指定したフォルダ内のファイルが変更される際にメッセージをFlowに出力する。 指定したURLのRSS/atomフィードを定期的に読み込み、新しいエントリが登録されたらFlowに出力 する。 標準 標準 標準 Node-REDを使ってみる 40 ▪さまざまなNode サーバ上のファイルが追記されたときに追記内容をFlowに出力する。行ごとにメッセージを分けるこ とも可能。 サーバ上のファイルの内容をFlowに出力する。ファイル名をFlowから入力して指定することもできる 。行ごとにメッセージを分けることも可能。 Flowからメッセージを入力して、サーバ上のファイルにメッセージを出力する。 標準or カスタム 標準 標準 標準 連続して入力された数値メッセージの値が変化したときのみ出力するNode。出力条件に範囲指定も可 能。数値が変化したときのみ実施するFlowを作成する時などに用いる。 標準
41. Node-REDを使ってみる 41 ▪カスタムノードの導入 メニューの 「パレットの管理」 http://flows.nodered.org/
42. Node-REDを使ってみる 42 ▪カスタムノードの導入 インストールされているノード一覧 flows.nodered.orgから導入できる ノードの説明ページを参照 「ノードを追加」でインストール
43. Node-REDを使ってみる 43 ▪カスタムノードの導入
44. Node-REDを使ってみる 44 ▪カスタムノードの導入
45. Node-REDを使ってみる 45 ▪FunctionNodeにJavascriptでロジックを記載する
46. Node-REDを使ってみる 46 ▪FunctionNodeにJavascriptでロジックを記載する
47. Node-REDを使ってみる 47 ▪Dashboard UI
48. Node-REDを使ってみる 48 ▪Dashboard UI ブラウザの画面にボタンを表示する。https://klarsys.github.io/angular-material-icons/ に登録されているアイ コンも表示することができる。クリック時は「Payload」フィールドにセットされたメッセージを生成する。 時刻ベースのグラフをブラウザ画面に表示する。異なるmsg.topicの値を使用して複数の線を表示す ることも可能。 複数の値がセットできるドロップダウンリストを表示し、選択した値はmsg.optionsに設定される。 複数のウィジットを設定できるウィジット。サブミットされると全ての設定値を一つのメッセージで 送信する。 ゲージ(アナログのスピードメータの様な表示)。Flowからの入力値に従った角度に針が表示される。 上限値や下限値は「Min」や「Max」で指定する。 ブラウザ画面にスライダーを表示する。表示する値の範囲は「Min」と「Max」で指定できる。値を 変化させるとpayloadに値を設定してメッセージとして送信する。 スイッチボタンをブラウザ画面に表示する。「on/off」に設定された値をメッセージとして送信する 。デフォルトの出力値はtrue/false。 書き換えできないフィールドに文字列を表示する。「Template」フィールドでHTML形式でフォーマ ットを指定可能。 ブラウザ画面にテキスト入力フィールドを表示する。「Mode」は「text」「email」「color」が指定 でき、「email」の場合は入力がアドレス形式で無い場合は赤く表示される。 ブラウザ画面に数字入力のインターフェースを表示する。値は「Min」と「Max」で範囲を指定する ことができる。「Template」フィールドで表示フォーマットを指定可能。 HTML形式(AngularJS/Angular Material)で自由に画面の構成や値の入出力を可能にする。 ブラウザ上にトーストメッセージ（ポップアップ）を表示する。 dashboardを動的に制御できるウィジット。現状ではタブを切り替えることが可能。 標準or カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム カスタム
49. 「はじめてのNode-RED」(工学社） 49 ▪UserGroup監修の書籍 https://www.kohgakusha.co.jp/books/detail/978-4-7775-2026-8
50. その他：参考資料 50 http://nodered.org/ Node-RED Node-REDの配布/解説サイト http://flows.nodered.org/ Node-RED Library Node-REDのサンプルFlowやカスタムNode配布サイト https://github.com/node-red/node-red Github: node-red/node-red Node-RED Githubリポジトリ 2015年版 http://qiita.com/advent-calendar/2015/nodered Node-RED Advent Calendar 年末に開催された Node-REDの情報を集めたアドベントカレンダー http://qiita.com/tags/node-red Qiita: tag:node-red Qiitaは、プログラミングに関する知識を記録・共有するためのサービスです。 http://noderedguide.com/ Node-RED Programming Guide sence technic社による解説ページ https://www.facebook.com/groups/noderedjp/ Node-RED User Group Japan 日本のユーザーグループ（登録制） http://www.ibm.com/developerworks/jp/views/cloud/libraryview.jsp?sort_by=&search_by=node-red IBM developerWorks IBMの技術文書 https://groups.google.com/forum/#!forum/node-red GoogleGroup:Node-RED Node-RED 公式MailingList/Googlegroup http://nodered.jp/ Node-RED User Group Japan Node-RED日本語ドキュメント(UG作成) 2016年版 http://qiita.com/advent-calendar/2016/nodered 2017年版 http://qiita.com/advent-calendar/2017/nodered