秋のJavaScript祭 in mixi 2017 懇親会LT、JavaScript使いならきっととっつきやすいNode-REDについて話したスライドです。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・シルエットデザイン http://kage-design.com/ ・human pictogram 2.0 http://pictogram2.com ・ICOOON MONO http://icooon-mono.com/

1. 秋のJavaScript祭 in mixi 2017 懇親会LT
JavaScript使いならきっととっつきやすい
Node-REDについて
ワンフットシーバス 田中正吾

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

3. 自己紹介

4. 田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作のワークフロー改善に
関わったりしていました。
デジタルサイネージやアプリ制作もやります。

5. Node-RED

6. Node-RED？

7. Node.js製のデバイス/APIおよび
オンラインサービスを接続するためのツール
https://nodered.jp/

8. Node.jsベースなので npm install で
すぐに使える
sudo npm install -g node-red
npm install -g node-red
node-red

9. 起動してみると、こんな画面で
処理の流れ（フロー）を作れる

10. Node.jsのライブラリをブロックに見立てて
仕組みが作れる感じです！

11. こんな感じで右のパレットから
真ん中のワークスペースに処理を入れると
データをつくれる

12. ボタンを押すとデバッグ文字が出るデモ
（Node-REDのデータの流れはJSONでできてます）

13. /jsfes とURL叩いたら反応する
HTTPの窓口をつくるexpressみたいなサンプル

14. なんといってもFunctionノードというのが
素のJavaScript書いて処理が作れて柔軟性あり
（できるだけFunctionノード使わずにつくろう路線もありますが臨機応変に！）

15. なんといってもFunctionノードというのが
素のJavaScript書いて処理が作れて柔軟性あり
（できるだけFunctionノード使わずにつくろう路線もありますが臨機応変に！）

16. 真価を発揮するのはIoTを実験したいときとか！
APIを簡単に作って実験したいときとか！

17. プロトタイプを繰り返すときは
処理の流れを試行錯誤するので
フローであれこれいじれるのがいいよ

18. そんなわけで！

19. いろいろ連携した例！

20. IoT動かすデモします！

21. Node-REDをノートPCで動かしてます！
（ざっとみて仕組みがわかりやすい）

22. Node-REDから
IoT機器（Nefry BT）の明かりがつきます！

23. デモする
（遠隔でデバイスが光ります）

24. 次！

25. IoT機器のボタンを押すと
Node-REDが橋渡しして連動します！

26. スイッチを押すと

27. 反応します！→デモする

28. 今回は光るだけデモだけど、
これがいろいろなお知らせや動き連動すると
色々と使えるポイントある

29. ➔ Node-REDというツールがあるよ
◆ Node.js製のデバイス/APIおよびオンラインサービス
を接続するためのツール
◆ Node.jsベースなので npm install ですぐに使える
◆ Node.jsの仕組みをブロック化して使えて、データの
流れがJSON
◆ ブロックをつなげて構成を考えられて試行錯誤すると
きにやりやすいツール（プロトタイプ向き）
◆ JavaScript使う人にはとっつきやすさが色々ある
Node-REDなかなか良いですよ！

30. いろいろ情報あります！
● Facebook「Node-RED User Group Japan」
○ https://www.facebook.com/groups/noderedjp/
● Twitter
○ ハッシュタグ #noderedjp #nodered
● Slack
○ https://nodered-slack.herokuapp.com/
● Webサイト（制作中）
○ https://nodered.jp
● Qiita node-red tag Node-REDの活用例の投稿
○ http://qiita.com/tags/node-red
○ アドベントカレンダーあるよ
■ https://qiita.com/advent-calendar/2017/nodered

31. ご清聴いただきまして
ありがとうございました！