「第50回 HTML5とか勉強会」のライトニングトークで使用した発表資料

1. 0101室サーバ担当チーム
乾杯可視化システム

2. 0101室サーバ担当チームのメンバー
 加茂聡
 独立行政法人理化学研究所
 産業技術大学院大学情報アーキテクチャ専攻
 石井学
 独立行政法人理化学研究所

3. !CheerZ!の概要
 乾杯を可視化
 遠隔地の人とも乾杯できる
 遠い異国の言葉も通じない人とも乾杯を通じ
てコミュニケーションが可能
ニコニコ生放送の飲み配信の
ように、生主とリスナーが遠
隔地にいても乾杯ができる

4. 地図上で乾杯！
現在地からグラスが飛んできて乾杯

5. 地球上で乾杯！

6. 各人の乾杯数を可視化！

7. 乾杯した人々の関係を可視化！

8. システムの概要
センサー付き
グラス
集計サーバ
センサーで計測し
た加速度を送信
ブラウザ
センサー
サーバ
BLEの到達範囲
センサー
サーバ
センサー
サーバ
表示データ取得
html5で可視化
位置情報等の
データ送信

9. システムの完成形
センサー付き
グラス
集計サーバ
センサーで計測し
た加速度を取得
ブラウザ
スマホ
BLEの到達範囲
スマホスマホ
位置情報等の
データ送信
表示データ取得
html5で可視化

10. 加速度センサーのデータを用いて乾杯を検知
グラスの裏側に
取り付けたセンサー

11. 試作一号
モバイルバッテリ
3軸加速度センサー
Raspberry Piと
USB無線LANアダプタ

12. 試作2号
XBee
(Series1)
加速度センサー
電池
ボタン電池でも動作

13. センサー作る必要なかったかも…

14. 使用ソフト等
センサー付き
グラス
集計サーバ
BLEの到達範囲
ブラウザ
センサー
サーバ
乾杯したユーザの
情報等をpush
以下を使用
Three.js(地球儀、地図)
jQuery(グラフ)
位置情報等の
データ送信
センサーサーバ側
から加速度をpull
python等を使用
node.js+express
を使用

15. 球体を作ってテクスチャを貼り付け
mesh = new THREE.Mesh(
new THREE.SphereGeometry( 600, 40, 40 ),
new THREE.MeshBasicMaterial( {
map: THREE.ImageUtils.loadTexture( 'earth.jpg' ),
overdraw: true } )
);
scene.add( mesh );

16. 座標変換
赤道
極座標系直交座標系
http://help.arcgis.com/ja/arcgisdesktop/10.0/help/index.html#//00v20000000q000000

17. 3D版

18. 動作環境
WebGLが動作するブラウザ
 Windows8.1上の以下のブラウザで動作確認
 Internet Explorer11
 Firefox30.0
 Chrome35.0.1916.153
 Chromeでの実行を推奨