第39回Creators MeetUpNodeREDでブロック的なビジュアルプログラミングにあれこれ思いを馳せてみる

ワンフットシーバス 田中正吾

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

自己紹介

田中正吾（たなかせいご）屋号：ワンフットシーバス

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

ウォンバットが好きでWEBの知識で情報収集力を高めています。

（これは長野茶臼山動物園のスミレです）

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

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

センサー 蓄積集める

データを蓄積・分析できると普段の制作で関わる「みえる化」と

連携できそうで、いろいろやってます。

センサー 蓄積集める みえる化（WEB）

たとえば、こんなネタ

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

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

グローブつけてにぎると手だけロボが連動してすしをにぎる。

Raspberry Pi

NodeJS

Socket通信

「にぎる」伝達

ネタ（コンテンツ）次第なので試行錯誤がとてもだいじ

（例：すし食べたいメーター反応はつまらなかった）

こういうネタを試行錯誤しやすくするためにlittleBitsというブロック的なハードを使ってます

（つくる負荷で心が削られず、軽やかにつくれる）

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

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

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

ネタ（コンテンツ）次第なので試行錯誤がやっぱり必須

（例：メール投稿連動してもつまらなかった）

スマホ連動やWEBサービス連動も試行錯誤したくてmyThingsや

IFTTTというサービスをつかってます

引用：http://mythings.yahoo.co.jp/

いろいろなAPI（データを扱うルール）を向こうに任せて良いつなぎ方を考えながら作れる

（つくる負荷で心が削られず、軽やかにつくれる）

（例）出かけるときに雨がふる予報ならメール通知

引用：http://mythings.yahoo.co.jp/

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

しかしまだ困っていた

困っていたこと

試行錯誤がしやすくなったところもあるがまだ困ったところが...

センサー 蓄積集める みえる化（WEB）

「データどう貯める？」「どう計測する？」「何を送る？」各連携は自前で組まないといけなかった（NodeJS）

センサー 蓄積集める みえる化（WEB）

どうする？ どうする？ どうする？

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

そこで出会ったNodeRED！！

簡易サーバー・センサー連携・データ周りなどを利用しやすくしているNodeJSの良さを取りまとめて

ビジュアルプログラミングできるツール

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

しかもRaspberryPiに最近プリインストールされるようになった！

（つまり、すぐ使える）

日本ユーザー会も発足していて、私も最近入りました。

FacebookやSlackでやりとりしています。

使わない手はない！

デモ

littleBitsのボタンを押すとRaspberryPi（PC）が反応して

MilkcocoaというWEBサービスに記録

集めて記録！押した

littleBitsのボタンを押すとRaspberryPi（PC）が反応して

MilkcocoaというWEBサービスに記録

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

RaspberryPi（PC）にNodeREDが入っていてもろもろやってくれる

集めて記録！押した

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

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

デモやるぞー

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

つなげてデモします

デモやるぞー

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

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

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

NodeREDの楽しさからブロック的なビジュアルプログラミングを

あらためて振り返ってみる

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

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

コードでは散らばりがちな、プログラムの流れがわかりやすいので

おかしな流れやより良いやり方が発見しやすい。

ブロック的なビジュアルプログラミングがあると作りたいものに早く到達でき、

気軽にやり直したり試すことが出来る。

思い馳せてみた。

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

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

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