20210529_OSC_Online_Nagoya

20210529_OSCオンライン名古屋「NNode-RED ではじめてのデータの流れを作ってみよう」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Transcript

1. 20210529_OSCオンライン名古屋 Node-RED ではじめてのデータの流れ を作ってみよう ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. 書籍の「はじめてのフロー」部分に プラスした内容をお話しします
5. Node-RED のノードふりかえり
6. IoTなど様々なAPI/Data連携をGUIで 直感的に構築できるオープンソースソフトウェア
7. ノードはNode-REDの基本的な構成要素です。 処理をする機能のかたまりです。 ノード
8. ノードをつないでフローという データの流れを作ります ノード ノード ノード
9. 前のノードからメッセージを受け取るか、 外部イベントを受け取ることで動きます ノードはメッセージまたはイベントを処理し次のノードにメッセージを送り、右から左に処理されます。 ノード ノード ノード メッセージ (JSONデータ) メッセージ (JSONデータ) 処理 0_0 処理 外部イベントなど データのきっかけ 起きた！
10. メッセージはJSONデータで構成されます。 各ノードで処理された内容がバケツリレーのようにやり取りされていきます。 ノード ノード メッセージ (JSONデータ) 処理 処理
11. メッセージの中身 msg という一番上のオブジェクトがあり、 配下の payload というオブジェクトが連絡に良く使われます。 ノード ノード メッセージ (JSONデータ) 処理 処理 msg payload 様々なデータ 様々なデータ
12. こんな感じのバケツリレー ノード ノード 処理
13. デモしてみます！
14. 今日は Windows ノート PC にインストールした localhost で 1880 ポートで使う形
15. inject ノードと debug ノードをつなぐデモ
16. このような仕組み タイムスタンプ メッセージ (JSONデータ) デバッグデータを 表示する処理 ボタンクリックを きっかけにメッセージを送る
17. デバッグタブに文字が出るデモしてみます！
18. API にデータをつないでみる
19. API は HTTP でつなぐことが多いですが Node-RED にも HTTP 関連ノードあります API サーバー Node-RED
20. デモしてみます！
21. 食欲をそそる API ( Foodish API ) から やり取りして画像を表示するデモ https://foodish-api.herokuapp.com/
22. ドキュメントも親切な使いやすい Foodish API https://github.com/surhud004/Foodish#readme
23. ハンバーガーの美味しそうな画像カテゴリ https://foodish-api.herokuapp.com/api/images/burger/
24. HTTP リクエストノードで Foodish API にアクセス
25. プロパティで URL 欄に ハンバーガーカテゴリの API URL を指定します
26. API からデータが JSON で来ると予想できるので 出力形式を JSON オブジェクトにする 受け取った文字列を自動で JSON に変換してくれる
27. change ノードで受け取った JSON の中から image 値を取得する
28. 対象の値 msg.payload.image を msg.payload に変更して画像 URL のみを送る
29. ワークスペース上で画像を表示できる node-red-contrib-image-output ノードをインストール
30. 右上のメニュー＞パレットの管理＞ ノードを追加で検索してインストール
31. 検索してインストールした様子
32. では、やってみます！
33. まとめ ➔ Node-RED はデータの流れをつくって自分の つくりたい仕組みをつくれる ➔ 標準の HTTP ノードでも色々APIにつながる ➔ 新たにノードをインストールすることで、さ らに出来ることが増えていく
34. はじめてのデータの流れつくってみました