Download - NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる
![Page 1: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/1.jpg)
第39回Creators MeetUpNodeREDでブロック的なビジュアルプログラミングにあれこれ思いを馳せてみる
ワンフットシーバス 田中正吾
![Page 2: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/2.jpg)
私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です!
![Page 3: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/3.jpg)
自己紹介
![Page 4: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/4.jpg)
田中正吾(たなかせいご)屋号:ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近は、JavaScriptやHTML5アニメーション、スマートフォン演出制作のワークフロー改善に関わったりしていました。デジタルサイネージやアプリ制作もやります。
![Page 5: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/5.jpg)
ウォンバットが好きでWEBの知識で情報収集力を高めています。
(これは長野茶臼山動物園のスミレです)
![Page 6: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/6.jpg)
最近よくモノ(ハード)とWEB連携してる
![Page 7: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/7.jpg)
最近、センサーで計測してデータを集めることがしやすくなり、
センサー 蓄積集める
![Page 8: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/8.jpg)
データを蓄積・分析できると普段の制作で関わる「みえる化」と
連携できそうで、いろいろやってます。
センサー 蓄積集める みえる化(WEB)
![Page 9: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/9.jpg)
たとえば、こんなネタ
![Page 10: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/10.jpg)
すしをにぎりたいグローブ(Sushi Nigiritai Glove)
![Page 11: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/11.jpg)
すしをにぎるアーム(Sushi Nigiru Arm)
![Page 12: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/12.jpg)
グローブつけてにぎると手だけロボが連動してすしをにぎる。
Raspberry Pi
NodeJS
Socket通信
「にぎる」伝達
![Page 13: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/13.jpg)
ネタ(コンテンツ)次第なので試行錯誤がとてもだいじ
(例:すし食べたいメーター反応はつまらなかった)
![Page 14: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/14.jpg)
こういうネタを試行錯誤しやすくするためにlittleBitsというブロック的なハードを使ってます
(つくる負荷で心が削られず、軽やかにつくれる)
![Page 15: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/15.jpg)
たとえば、こんなネタ(デバイス1号)
![Page 16: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/16.jpg)
スマホと連動して目が光ったり!
![Page 17: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/17.jpg)
WEBサービス(例:Twitter)と連動して目が光ったりします
![Page 18: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/18.jpg)
ネタ(コンテンツ)次第なので試行錯誤がやっぱり必須
(例:メール投稿連動してもつまらなかった)
![Page 19: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/19.jpg)
スマホ連動やWEBサービス連動も試行錯誤したくてmyThingsや
IFTTTというサービスをつかってます
引用:http://mythings.yahoo.co.jp/
![Page 20: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/20.jpg)
いろいろなAPI(データを扱うルール)を向こうに任せて良いつなぎ方を考えながら作れる
(つくる負荷で心が削られず、軽やかにつくれる)
(例)出かけるときに雨がふる予報ならメール通知
引用:http://mythings.yahoo.co.jp/
![Page 21: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/21.jpg)
機能ごとのかたまりにしてブロックのように作りやすくなってきた。試作(プロトタイプ)しやすさUP!
![Page 22: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/22.jpg)
しかしまだ困っていた
![Page 23: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/23.jpg)
困っていたこと
![Page 24: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/24.jpg)
試行錯誤がしやすくなったところもあるがまだ困ったところが...
センサー 蓄積集める みえる化(WEB)
![Page 25: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/25.jpg)
「データどう貯める?」「どう計測する?」「何を送る?」各連携は自前で組まないといけなかった(NodeJS)
センサー 蓄積集める みえる化(WEB)
どうする? どうする? どうする?
![Page 26: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/26.jpg)
仕組みはわかっているし何度もつくっているが、ブロック化しにくい。
![Page 27: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/27.jpg)
そこで出会ったNodeRED!!
![Page 28: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/28.jpg)
簡易サーバー・センサー連携・データ周りなどを利用しやすくしているNodeJSの良さを取りまとめて
ビジュアルプログラミングできるツール
![Page 29: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/29.jpg)
いろいろな「どうする?」を目で見て、ビジュアルプログラミングできる!
![Page 30: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/30.jpg)
しかもRaspberryPiに最近プリインストールされるようになった!
(つまり、すぐ使える)
![Page 31: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/31.jpg)
日本ユーザー会も発足していて、私も最近入りました。
FacebookやSlackでやりとりしています。
![Page 32: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/32.jpg)
使わない手はない!
![Page 33: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/33.jpg)
デモ
![Page 34: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/34.jpg)
littleBitsのボタンを押すとRaspberryPi(PC)が反応して
MilkcocoaというWEBサービスに記録
集めて記録!押した
![Page 35: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/35.jpg)
littleBitsのボタンを押すとRaspberryPi(PC)が反応して
MilkcocoaというWEBサービスに記録
![Page 36: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/36.jpg)
本来であればある程度コード書いて仕組みを整える
![Page 37: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/37.jpg)
RaspberryPi(PC)にNodeREDが入っていてもろもろやってくれる
集めて記録!押した
![Page 38: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/38.jpg)
機能をつなげていって、こんな風になります
![Page 39: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/39.jpg)
見た目にもわかりやすい!
![Page 40: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/40.jpg)
デモやるぞー
![Page 41: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/41.jpg)
ちょっと別機能もつなげてしまおう(同時にチャットに投稿しよう)
![Page 42: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/42.jpg)
つなげてデモします
![Page 43: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/43.jpg)
デモやるぞー
![Page 44: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/44.jpg)
実はLED光っているのもMilkcocoaからの反応を戻しています
![Page 45: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/45.jpg)
デモうまくいっててほしい
![Page 46: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/46.jpg)
思いを馳せてみる(まとめ)
![Page 47: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/47.jpg)
NodeREDの楽しさからブロック的なビジュアルプログラミングを
あらためて振り返ってみる
![Page 48: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/48.jpg)
なにより作りやすく試行錯誤しやすい。つくる負荷が軽やかになる!
![Page 49: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/49.jpg)
コード説明なら長くなる複雑な仕様でも視覚的に直感的にわかる。説明や把握も軽やかになる!
![Page 50: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/50.jpg)
コードでは散らばりがちな、プログラムの流れがわかりやすいので
おかしな流れやより良いやり方が発見しやすい。
![Page 51: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/51.jpg)
ブロック的なビジュアルプログラミングがあると作りたいものに早く到達でき、
気軽にやり直したり試すことが出来る。
![Page 52: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/52.jpg)
思い馳せてみた。
![Page 53: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/53.jpg)
ブロック的なビジュアルプログラミングは、やはり、いいぞ。
![Page 54: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/54.jpg)
今後もブロック的な試行錯誤をいろいろと探っていきたい!
![Page 55: NodeREDでブロック的なビジュアルプログラミングに あれこれ思いを馳せてみる](https://reader031.vdocuments.net/reader031/viewer/2022021503/5871afe21a28abda6a8b6601/html5/thumbnails/55.jpg)
ご清聴いただきましてありがとうございました!