20210529_OSC_Online_Nagoya

by 1ft-seabass

Slide 1

Slide 1 text

20210529_OSCオンライン名古屋 Node-RED ではじめてのデータの流れを作ってみようワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 4

Slide 4 text

書籍の「はじめてのフロー」部分にプラスした内容をお話しします

Slide 5

Slide 5 text

Node-RED のノードふりかえり

Slide 6

Slide 6 text

IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア

Slide 7

Slide 7 text

ノードはNode-REDの基本的な構成要素です。処理をする機能のかたまりです。ノード

Slide 8

Slide 8 text

ノードをつないでフローというデータの流れを作りますノードノードノード

Slide 9

Slide 9 text

前のノードからメッセージを受け取るか、外部イベントを受け取ることで動きますノードはメッセージまたはイベントを処理し次のノードにメッセージを送り、右から左に処理されます。ノードノードノードメッセージ (JSONデータ) メッセージ (JSONデータ) 処理 0_0 処理外部イベントなどデータのきっかけ起きた！

Slide 10

Slide 10 text

メッセージはJSONデータで構成されます。各ノードで処理された内容がバケツリレーのようにやり取りされていきます。ノードノードメッセージ (JSONデータ) 処理処理

Slide 11

Slide 11 text

メッセージの中身 msg という一番上のオブジェクトがあり、配下の payload というオブジェクトが連絡に良く使われます。ノードノードメッセージ (JSONデータ) 処理処理 msg payload 様々なデータ様々なデータ

Slide 12

Slide 12 text

こんな感じのバケツリレーノードノード処理

Slide 13

Slide 13 text

デモしてみます！

Slide 14

Slide 14 text

今日は Windows ノート PC にインストールした localhost で 1880 ポートで使う形

Slide 15

Slide 15 text

inject ノードと debug ノードをつなぐデモ

Slide 16

Slide 16 text

このような仕組みタイムスタンプメッセージ (JSONデータ) デバッグデータを表示する処理ボタンクリックをきっかけにメッセージを送る

Slide 17

Slide 17 text

デバッグタブに文字が出るデモしてみます！

Slide 18

Slide 18 text

API にデータをつないでみる

Slide 19

Slide 19 text

API は HTTP でつなぐことが多いですが Node-RED にも HTTP 関連ノードあります API サーバー Node-RED

Slide 20

Slide 20 text

デモしてみます！

Slide 21

Slide 21 text

食欲をそそる API ( Foodish API ) からやり取りして画像を表示するデモ https://foodish-api.herokuapp.com/

Slide 22

Slide 22 text

ドキュメントも親切な使いやすい Foodish API https://github.com/surhud004/Foodish#readme

Slide 23

Slide 23 text

ハンバーガーの美味しそうな画像カテゴリ https://foodish-api.herokuapp.com/api/images/burger/

Slide 24

Slide 24 text

HTTP リクエストノードで Foodish API にアクセス

Slide 25

Slide 25 text

プロパティで URL 欄にハンバーガーカテゴリの API URL を指定します

Slide 26

Slide 26 text

API からデータが JSON で来ると予想できるので出力形式を JSON オブジェクトにする受け取った文字列を自動で JSON に変換してくれる

Slide 27

Slide 27 text

change ノードで受け取った JSON の中から image 値を取得する

Slide 28

Slide 28 text

対象の値 msg.payload.image を msg.payload に変更して画像 URL のみを送る

Slide 29

Slide 29 text

ワークスペース上で画像を表示できる node-red-contrib-image-output ノードをインストール

Slide 30

Slide 30 text

右上のメニュー＞パレットの管理＞ノードを追加で検索してインストール

Slide 31

Slide 31 text

検索してインストールした様子

Slide 32

Slide 32 text

では、やってみます！

Slide 33

Slide 33 text

まとめ ➔ Node-RED はデータの流れをつくって自分のつくりたい仕組みをつくれる ➔ 標準の HTTP ノードでも色々APIにつながる ➔ 新たにノードをインストールすることで、さらに出来ることが増えていく

Slide 34

Slide 34 text

はじめてのデータの流れつくってみました