03 pepper io_t_web

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

AITCオープンラボ第4回 IoT勉強会（再演）

Pepper x IoT x Web

センサーデータの表示編

AITC CC研サブリーダーピースミール・テクノロジー株式会社

高岡大介1


About me

高岡大介

最近やってること • Web関連の開発・技術顧問 • IoT勉強会シリーズ • 特集記事/対談

2

dsuket

※本資料は個人の見解であり、AITCの公式資料ではありません。


全体像

3

温度データ

PublishSubscribe

WebSocketREST

Tablet Web Browser


センサーデータの表示

4http://dsuket.github.io/pepper-iot/index.html

http://dsuket.github.io/pepper-iot/index.html


やったこと

1. BaaSからWebSocketでデータを取得 2. 値をHTMLに表示 3. グラフに表示 4. Pepperに連携

5


1. BaaSからWebSocketでデータを取得

6


今、IoT BaaSが熱い！

7


けど、、、

• Yahoo IoT: 未だ出ず • Kii: WebSocket使えない • Milkcocoa: Tesselで使えない • Parse: Arduino, ラズパイのみ • Firebase: Arduino, ラズパイのみ • Pusher: 前述の問題

8


最強のIoT BaaS！！

970+ SDKs！

https://www.pubnub.com/developers/


準備

10

var pubnub = PUBNUB.init({ publish_key: "pub-c-046ffxxx", subscribe_key: "sub-c-f5f1xxxx" });

<script src="https://cdn.pubnub.com/pubnub-dev.js"></script>

html

JavaScripts


PubNub 受信

pubnub.subscribe({ channel: "Sandbox", message: onReceiveMessage });

function onReceiveMessage(data) { console.log('data = ', data); }

11


PubNub 送信

var data = { value: 12, timestamp: Date.now() }; pubnub.publish({ channel: "Sandbox", message: data });

12


その他の機能

• Presence • Storage & Playback • Stream Controller • Mobile Push Gateway • Analytics • Access Management

13


2. 値をHTMLに表示

14


JSとhtmlのバンディング

15

ここの部分が動的にかわる


JSライブラリ

バインディングライブラリは沢山ある

• Backbone.js • Knockout.js • Angular.js • React.js

16

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 17


バインディングに特化したシンプルなJavaScriptライブラリ

• MVVMによる双方向データバインディング • ディレティブとフィルタ • 単純なAPI • モジュール性とコンポーザビリティを重視

今回は複雑なことは不要なので、これで十分！

18

Vue.js


Vue.js Sample

19


3. グラフに表示

20


JSグラフライブラリ

• Canvas • Chart.js （フラットでシンプルなグラフ） • CanvasJS （jQuery pluginもあり）

• SVG • Google Charts （言わずとしれたGChart。ちょっとダサイ） • Highcharts （超高機能。高い） • amcharts （AmazonやMSで使われたとか） • D3.js （ビジュアライゼーションライブラリ） • NVD3 （D3の派生形）

• ハイブリッド • vis.js （タイムラインやネットワーク図がかける）

21

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 22


C3.js

グラフ描画ライブラリー • D3.jsをグラフ描画に特化して扱いやすく • 便利なAPI、カスタマイズ可能 • 元がD3なので何でも出来る • （サイトは英語だけど日本人が開発）

Why C3? • Comfortable & Customizable & Controllable

23


C3.js Example

24http://c3js.org/samples/timeseries.html

http://c3js.org/samples/timeseries.html


4. Pepperに連携

25


QiMessaging

26

詳しくは次で！


まとめ

ありもの組み合わせれば簡単！ Pepperタブレットでも割と動く！

https://html5test.com/s/c9f22d2508c24d52.html

今回のサンプル https://github.com/dsuket/pepper-iot

27

https://html5test.com/s/c9f22d2508c24d52.html

https://github.com/dsuket/pepper-iot

Technology

03 pepper io_t_web