第39回Creators MeetUp 「01.NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる」の登壇資料です。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・シルエットデザインhttp://kage-design.com/ ・human pictogram 2.0http://pictogram2.com

1. 第39回Creators MeetUp
NodeREDでブロック的なビジュアルプログラミングに
あれこれ思いを馳せてみる
ワンフットシーバス 田中正吾

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

3. 自己紹介

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

5. ウォンバットが好きで
WEBの知識で情報収集力を高めています。
（これは長野茶臼山動物園のスミレです）

6. 最近よくモノ（ハード）とWEB連携してる

7. 最近、センサーで計測して
データを集めることがしやすくなり、
センサー 蓄積集める

8. データを蓄積・分析できると
普段の制作で関わる「みえる化」と
連携できそうで、いろいろやってます。
センサー 蓄積集める
みえる化
（WEB）

9. たとえば、こんなネタ

10. すしをにぎりたいグローブ
（Sushi Nigiritai Glove）

11. すしをにぎるアーム
（Sushi Nigiru Arm）

12. グローブつけてにぎると
手だけロボが連動してすしをにぎる。
Raspberry Pi
NodeJS
Socket通信
「にぎる」伝達

13. ネタ（コンテンツ）次第なので
試行錯誤がとてもだいじ
（例：すし食べたいメーター反応はつまらなかった）

14. こういうネタを試行錯誤しやすくするために
littleBitsというブロック的なハードを使ってます
（つくる負荷で心が削られず、軽やかにつくれる）

15. たとえば、こんなネタ
（デバイス1号）

16. スマホと連動して目が光ったり！

17. WEBサービス（例:Twitter）と連動して
目が光ったりします

18. ネタ（コンテンツ）次第なので
試行錯誤がやっぱり必須
（例：メール投稿連動してもつまらなかった）

19. スマホ連動やWEBサービス連動も
試行錯誤したくてmyThingsや
IFTTTというサービスをつかってます
引用：http://mythings.yahoo.co.jp/

20. いろいろなAPI（データを扱うルール）を
向こうに任せて良いつなぎ方を考えながら作れる
（つくる負荷で心が削られず、軽やかにつくれる）
（例）
出かけるときに雨がふる予報ならメール通知
引用：http://mythings.yahoo.co.jp/

21. 機能ごとのかたまりにして
ブロックのように作りやすくなってきた。
試作（プロトタイプ）しやすさUP！

22. しかしまだ困っていた

23. 困っていたこと

24. 試行錯誤がしやすくなったところもあるが
まだ困ったところが...
センサー 蓄積集める
みえる化
（WEB）

25. 「データどう貯める？」
「どう計測する？」「何を送る？」各連携は
自前で組まないといけなかった（NodeJS）
センサー 蓄積集める
みえる化
（WEB）
どうする？ どうする？ どうする？

26. 仕組みはわかっているし
何度もつくっているが、ブロック化しにくい。

27. そこで出会ったNodeRED！！

28. 簡易サーバー・センサー連携・データ周りなどを
利用しやすくしているNodeJSの良さを取りまとめて
ビジュアルプログラミングできるツール

29. いろいろな「どうする？」を
目で見て、ビジュアルプログラミングできる！

30. しかもRaspberryPiに
最近プリインストールされるようになった！
（つまり、すぐ使える）

31. 日本ユーザー会も発足していて、
私も最近入りました。
FacebookやSlackでやりとりしています。

32. 使わない手はない！

33. デモ

34. littleBitsのボタンを押すと
RaspberryPi（PC）が反応して
MilkcocoaというWEBサービスに記録
集めて記録！
押した

35. littleBitsのボタンを押すと
RaspberryPi（PC）が反応して
MilkcocoaというWEBサービスに記録

36. 本来であれば
ある程度コード書いて仕組みを整える

37. RaspberryPi（PC）にNodeREDが入っていて
もろもろやってくれる
集めて記録！
押した

38. 機能をつなげていって、こんな風になります

39. 見た目にもわかりやすい！

40. デモやるぞー

41. ちょっと別機能もつなげてしまおう
（同時にチャットに投稿しよう）

42. つなげてデモします

43. デモやるぞー

44. 実はLED光っているのも
Milkcocoaからの反応を戻しています

45. デモうまくいっててほしい

46. 思いを馳せてみる
（まとめ）

47. NodeREDの楽しさから
ブロック的なビジュアルプログラミングを
あらためて振り返ってみる

48. なにより作りやすく試行錯誤しやすい。
つくる負荷が軽やかになる！

49. コード説明なら長くなる複雑な仕様でも
視覚的に直感的にわかる。
説明や把握も軽やかになる！

50. コードでは散らばりがちな、
プログラムの流れがわかりやすいので
おかしな流れやより良いやり方が発見しやすい。

51. ブロック的なビジュアルプログラミングがあると
作りたいものに早く到達でき、
気軽にやり直したり試すことが出来る。

52. 思い馳せてみた。

53. ブロック的なビジュアルプログラミングは、
やはり、いいぞ。

54. 今後もブロック的な試行錯誤を
いろいろと探っていきたい！

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