IoT & Connected Device WG LT

いちフリーランスフロントエンドエンジニアがなぜIoTに触れているのか

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

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

自己紹介

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

2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。デジタルサイネージやアプリ制作もやります。最近は、JavaScriptやHTML5アニメーションも行いながら、場所によっては開発ツール導入・ワークフロー改善もしています。

LIGブログのDevRelコーナーに寄稿してます。（最近、3記事以上書いたのでライターページできた。）

ウォンバットが好きで、その情報収集にWEBの知見や技術を全力で注いでいます。

なぜIoTに触れているのか

自分のフロントエンドの職域（普段）

デザイン システム

おもに操作（使い勝手）をつなぐ人

デザイン システムこのあたり

いま、普段のWEB制作のかたわらデバイス連携する制作もしてる

IoTをなぜやるのか？

デバイス

IoTをなぜやるのか？

デバイス

第1期

１

デジタルサイネージ

デバイス

デバイス

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

デバイス

スマートフォン

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

センサーの扱いがよくわからず、まずは使ってみて知りたいという想い

やってみるぞ！

マウスの横にハンダごてがあるシチュエーションは（はじめは）想像しにくかった

パーツを磁石でつなげる電子工作ツール「littleBits」を選定

パーツを磁石でつなげる

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

4つの機能を色で分かりやすくデザイン

Bits 製品情報 - littleBits よりhttp://jp.littlebits.com/bits/

第2期

１ 2

デバイスとの連携ネタでいろいろと登壇するようになった

IoT縛りの勉強会 IoTLT

Creators MeetUp

JS Board Shibuya

デバイス WEB

センサーとデータを連携する周辺技術をIoTに触れることで習得できる

ブラウザ（表示側）

サーバー(NodeJS)

デバイス(NodeJS)

NodeJS

センサーとデータを連携する周辺技術を習得できるのでIoTに触れるように

NodeJSNodeJSの

司令塔サーバー

Wifiつながりにくい問題を痛感する学びも。

SORACOMなど通信の世界も気にするようになった

ピー（伏せた話題）

いろいろ学べるのでIoTに触れる

第3期（最近）

１ 2 3

だんだんとIoTネタも複雑に

すしインタラクティブ進行記録プレゼンポインタ（のプロトタイプ）

すしを・・・。

すし握るネタとか

IoTワークショップへのチューター協力

IoTというキーワードで広がりが出てきた

あらためて、IoTはセンサー計測・データ収集・分析・フィードバックが軸になると再認識

センサー計測

蓄積・分析

集める

そういえば、私はWEB制作においてユーザー操作を「見えるように」したり、コンテンツのデータを「見えるように」してきた。

BUTTON

BUTTON

IMAGE IMAGE IMAGE

普段のフロントエンドと同様にデータの見える化はIoTにおいても大切

センサー計測

蓄積・分析

集める みえる化（WEB）

センサーデータのグラフ化制作を経験してみて使いやすいデータにするためにも

早めに関わることが大切と気づけたり

一周回ってフロントエンドに戻ってきた

WEB上で操作をつなげるように

デザイン システムこのあたり

WEB上で操作をつなげるようにセンサーとWEBをつなぐ

センサーシステム

WEBこのあたり

まとめ

いつものWEB制作と別のアプローチで技術を知れるのでIoTに触れている

手元でモノが動き、やりとりできるのでディスプレイのなかでの出来事とはちがう体験

WEBだけでなく、みえる化を軸にしたフロントエンド技術が関われるケースを知るため、広げるため、IoTに触れている

なにより

新しい興味はスキルアップの原動力！

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