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
温度データ
Publish
Subscribe
WebSocketREST
Tablet Web Browser

センサーデータの表示
4
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！！
9
70+ SDKs！

準備
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

バインディングに特化したシンプルな 
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

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

C3.js Example
24
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

03 pepper io_t_web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 03 pepper io_t_web

Ähnlich wie 03 pepper io_t_web (20)

Mehr von dsuke Takaoka

Mehr von dsuke Takaoka (20)

03 pepper io_t_web