CORDOVA × WebSocket × D3
オールJavaScriptで作る
リアルタイムデータビジュアライザーション
鈴木 潤
株式会社 インテリジェンス Technology Lab
抹茶ラテが好きなゆとり世代エンジニア
スマホのセンサーから取得した値で、
PCのブラウザ側でなんか動かしたい!
やりたいこと
スマホのセンサの値を取得
↓
サーバに送信
↓
サーバからブラウザに値を送信
↓
ブラウザでD3とか使って値を表現
方法
構成
サーバサイド
スマホアプリ
PCブラウザ
WebSocketで値を送信センサで取得した値を送信
HTML CSS JavaScriptで実装
スマホアプリ
サーバーサイド
で実装。
WebSocket周りは を使用。
PCブラウザ
SVGの扱いを
で、3D表現
DEMO
デモ内容:上の3Dがスマホの方位センサの動きに合わせて動く
Thank you.
Upcoming SlideShare
Loading in …5
×

CORDOVA × WebSocket × D3 オールJavaScriptで作るリアルタイムデータビジュアライゼーション

453 views

Published on

JavaScript祭り 2016 秋のLTで使用したスライドを一部修正したもの

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
453
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CORDOVA × WebSocket × D3 オールJavaScriptで作るリアルタイムデータビジュアライゼーション

  1. 1. CORDOVA × WebSocket × D3 オールJavaScriptで作る リアルタイムデータビジュアライザーション
  2. 2. 鈴木 潤 株式会社 インテリジェンス Technology Lab 抹茶ラテが好きなゆとり世代エンジニア
  3. 3. スマホのセンサーから取得した値で、 PCのブラウザ側でなんか動かしたい! やりたいこと
  4. 4. スマホのセンサの値を取得 ↓ サーバに送信 ↓ サーバからブラウザに値を送信 ↓ ブラウザでD3とか使って値を表現 方法
  5. 5. 構成 サーバサイド スマホアプリ PCブラウザ WebSocketで値を送信センサで取得した値を送信
  6. 6. HTML CSS JavaScriptで実装 スマホアプリ
  7. 7. サーバーサイド で実装。 WebSocket周りは を使用。
  8. 8. PCブラウザ SVGの扱いを で、3D表現
  9. 9. DEMO デモ内容:上の3Dがスマホの方位センサの動きに合わせて動く
  10. 10. Thank you.

×