お台場合衆国にてリアルスコープブースに設置したサイネージについて解説しています。

1. HTML5 でサイネージは れる作 !!

2. 自己紹介
• 面白法人カヤック
HTML ファイ部
比留間 和也
• 最近は JS ばっかりで、
あんまり HTML 書いてません w

3. 事の発端

4. Web 技術でどこまでやれるか
チャレンジしたい！

5. 今回使った技術
• WebGL
• Video element
• Audio element
• Canvas element
• getUserMedia
(Camera)
• base64
encode/decoder
• XMLHttpRequest upload
• Fullscreen API
• CSS Mask
• CSS Animation
• pointer-events

6. これで IE …対応が必要だったら (((( ；ﾟ
Д ﾟ ))))

7. でも

8. 今回はサイネージなので
Google Chrome だけで
OK

9. 当初の課題

10. • クオリティの担保
• 8 時間連続起動
• スケジュール
• そもそもブラウザで大丈夫なのか

11. できあがったもの

13. ブースの様子

14. DEMO

15. やってみた感想
• Web 技術だけでもサイネージは作れる
• でかいは正義！
• Google Chrome すごい！
• 普段どれだけ「 にはできるのに技術的 断
しているか念 」を知ることができた

16. 案件のポイント
• WebGL でリッチ感アップ！
• プラグインなしで動画再生
• カメラで撮影した画像を XHR でサーバに
• UI をほぼ Full Canvas で実装
• タッチパネルによるタッチ操作

17. すべて Web の技術！

18. 案件秘話

19. • デザインスタートがローンチ 2 週間前からの、怒涛の追
い上げ！
• ローンチ数日前に体験をよりよくするために UI フルリ
ニューアル！
• ローンチ前日にやっとの思いでサーバに画像がアップで
きない問題を解決！
• ローンチ前日になんとか動画再生が止まる問題を解決！
• ローンチ 2 週間前に Inka3D が Maya2014 に対応！
（奇跡！）

20. 閑話休題

21. 工夫した点・苦労した
点

22. WebGL

23. レンダリング

24. • Inka3D で Maya の世界を完全再現！
• 世界観・演出を Maya で構築→ Inka3D
のラッパーでコンテンツと同期
工夫した点

25. • WebGL の context lost が多発
• 開発時、 WebGL のクラッシュが OS 巻
き込んで落ちる
• Three.js では実現できなかった
苦労した点

26. DEMO
ttp://goo.gl/i0t7n
Android 版 Chrome でもいちおう動きますよ！

27. 写真撮影

28. • getUserMedia で取得したストリー
ムを保持し続ける
当初の予定ではカメラ許可問題から、コンテンツはリロード
しない想定で作成
工夫した点

29. • https でコンテンツを配信
http の配信ではカメラの使用許可がリロードごとに聞かれる
• 画像を別サーバに送信できない
送信先はローカルサーバに、実際の送信先はサーバ側でリダ
イレクト
苦労した点

30. 動画再生

31. • 動画側に円形のマスクを適用
• 再生が停止した場合の復旧処理
工夫した点

32. • 動画の再生が止まることがある
強制的に load/play を実行して再実行
• Video 、 Canvas 要素には CSS
Shader が適用されない
適用を断念
苦労した点

33. 8 時間耐久コンテンツ

34. • メモリ管理を徹底
• 現場対応をイメージ
• 管理画面とコマンドを用意
工夫した点

35. • 耐久テスト
朝会社にきたら起動→帰るまで再生しっぱなし
• 実機テスト
途中、現場設置のため実機がオフィスを離れる
苦労した点

36. 実機セットアップ中の図

37. 案件を終えて思ったこと

38. • 現場で起きた不具合をその場で修正→反
映が迅速に行える
• 遠隔で更新作業を行い、現場担当者側で
それを反映することができる

39. Web とサイネージの
親和性は実は高い！

40. HTML5 で
サイネージは作れ
る !!!

41. ご静聴ありがとうございました