CreatorsMeetUp24の登壇資料です。 第24回 Creators MeetUp http://cmu.connpass.com/event/10912/ 01.田中 正吾さん「知育電子ブロック玩具littleBitsに私が知育された話」 デジタルサイネージやスマートフォン向けのWEB制作をしていると、タッチセンサーなど様々なセンサーの存在に改めて気づかされます。 もちろん全部のせもありがたいけど、このあたりでちゃんとひとつひとつのセンサーにしっかり触れたくなり、知育電子ブロック玩具littleBitsに惹かれ試しています。なぜlittleBitsを使いたくなったか。そして使ってみることで私が色々と「知育」された話を、あれこれお話します。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・商用フリーで使える影絵素材サイト シルエットデザイン →　http://kage-design.com/ ・human pictogram 2.0 →　http://pictogram2.com/

1. Session01
知育電子ブロック玩具littleBitsに私が
知育された話
20150516 第28回Creators MeetUp 田中正吾

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

3. 自己紹介

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

5. HTML5アニメーション
作ったりしています

6. デジタルサイネージ
作ったりしてます
！

7. アプリ作ったりしています

8. 私を取り巻く状況

9. PC向けWEB制作に加えて、スマートフォン向け
の制作も多くなりつつある。

10. 世間ではPCだけでなくスマートフォンでコンテ
ンツを見ている。

11. タッチセンサーを代表としてスマートフォンが普
及して色々なセンサーに対して共通の感覚になり
つつある。
加速度センサー
明るさセンサー
磁気センサー
タッチセンサー
重力センサー

12. サイネージでよく使われるタッチパネルも違和感
なく触っている。これはスマートフォンの経験が
あるため。

13. サイネージにも人感センサーやWEBカメラなど
プラスアルファな機材が出てきた。

14. センサーも身近になってきて
いろいろとやれそうな気配

15. スマートフォンのようにセンサー全部のせだとざ
っくりしてしまうので、このあたりで一つ一つ試
してみたい。

16. 「小分け」に「半歩先くらい」
で試したい。

17. そんなわけでLittleBits

18. 電子ブロックLittleBits

20. こんなかんじのブロック

21. 給電はUSB/9V電池/ボタン電池など

22. パーツを磁石でつなげる

23. 間違ってると磁石なので反発する
（接続ミス防止）

24. 4つの機能を色で分かりやすくデザイン
Bits 製品情報 - littleBits より
http://jp.littlebits.com/bits/

25. たとえば

26. こんな仕組みを思いついたとする
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT

27. 色で役割を意識しながら設計できる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT

28. スイッチを押すとライトが付くよ！
できた！

29. プログラムを書くのにも似てる
電源が流れて
POWER
スイッチを押すと
INPUT
ライトがつくよ
OUTPUT
// INPUT
LittleBitsPushSwitchModule.addEventListener( "push" , handlerMySwitchPush );
function handlerMySwitchPush(){
// OUTPUT
LittleBitsLEDModule.output(100);
}

30. WIREも加えた例

31. そもそもデザインステキ

32. CloudBits

34. これに加えて
なんとWIREに「CloudBit」というものが
cloudBit™ より
http://littlebits.cc/bits/cloudbit

35. 機能を限定したサーバーのようなもの
cloudBit™ より
http://littlebits.cc/bits/cloudbit

36. CloudBitsでWEBとLittleBitsを
相互に連携するデモ
LittleBitsが連動
LittleBitsの管理画面
（WEBでテストできる）

37. WEBともとても近いのが良い。デバイスとWEB
の絡み方も気軽に考えることができる。
cloudBit™ より
http://littlebits.cc/bits/cloudbit

38. 加えて

39. IFTTTとも連携して
WEBサービスとも連携しやすい

40. IFTTTってなに？

41. Wikipediaの紹介がわかりやすい。

42. 「if this then that」というシンプルなコンセプ
トに基づく「レシピ」を作成し共有することがで
きる。
このあと、あれする。
「if this then that」＝IFTTT

43. レシピの「this」の部分は「Facebookで写真を
タグ付けした時」といった「きっかけ」。
THIS＝きっかけ

44. 「that」の部分は「テキストメッセージの送信」
「Twitterにツイートを投稿」といった「行動」
になる。
THAT＝行動

45. 例えば、電話がかかってくるとGmailにメールが
送られたりのレシピが簡単にできる。

46. なんとLittleBitsがある

47. 簡単にWEBサービス同士をつなげることができ
るIFTTTとLittleBits連携して、よりいろいろなこ
とが試すことができる。

48. LittleBitsボタンを押すと
うぇいうぇいメールが飛ぶデモ
（物理スパムメール）

49. IFTTTを使って、Twitterでお気に入りがつくと
LittleBitsのLEDが点灯とかも可能です！

50. IFTTTにはDo「行動する」に特化した
DoButtonというアプリもある

51. IFTTTアプリ（DoButton）
「押すと明かりがつくよ」

52. IFTTTアプリ（DoButton）と
LittleBitsを連携するデモ
IFTTTアプリ（DoButton）連動してLittleBitsが点灯

53. いいね！

54. そして色々と知育された話

56. “知育電子ブロック”

57. 知育と聞くと子供向けのようだが

58. 知育と聞くと子供向けのようだが
私も知育されました
！

59. 1.思い立ったらすぐ組める

60. 普段の制作場所でも
近くに置いてサッといじれる

61. つまり普段の制作の合間に試して、さら
に試行錯誤ができる
！

62. 2.使い方や組み合わせ方を
学ぶことができる

63. LittlebitsのWEBサイトで使い方が色々見れる。
組み合わせの発想もユーザからシェアされて参考
になる。

64. それぞれのパーツ（デバイス）の特性を
知ると一層愛着がわくよね。

65. 3.作ってみた気づき

66. いざ組んでみると、作る前は想像できない面白い
ものだったり、気持ち悪いものが出来たりする。
そういうことが学べる。

67. cloudBits・IFTTTでWEB連動も試しやすい。面
白くなくても、すぐ戻れてがっくりしにくい。
トライする気持ちが養われる。

68. WEBと垣根がなく繋がることができるので、
WEBというソフトウェアをハードウェアと一緒
に考えながら制作する世界観に気づける。

69. まとめ

70. ➔ littleBitsは普段の制作サイクルの中で触れるので、得た感覚
が維持されやすい。出来上がってみての振り返りを活かして
試行錯誤の練度が高められる
➔ いざ組む前は気づかないことも多々ある。少しでもやってみ
たリアルな知見があれば、より素早く実装できる（これは
WEB制作でもよくある）
➔ WEB連携の敷居が低く、得意分野のWEBをハードウェアと
とともに制作する自分なりの世界観に気づける
➔ とにかく知育されてとてもありがたい
まとめ

71. 私は使う前の予想を越えLittleBitsに知育されています。
みなさんも、自分に合った付き合いやすいデバイスで、セン
サーに触れてみると面白いかもしれません！

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