Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

7,794 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. HTML5 でサイネージは れる作 !!
  2. 2. 自己紹介 • 面白法人カヤック HTML ファイ部 比留間 和也 • 最近は JS ばっかりで、 あんまり HTML 書いてません w
  3. 3. 事の発端
  4. 4. Web 技術でどこまでやれるか チャレンジしたい!
  5. 5. 今回使った技術 • WebGL • Video element • Audio element • Canvas element • getUserMedia (Camera) • base64 encode/decoder • XMLHttpRequest upload • Fullscreen API • CSS Mask • CSS Animation • pointer-events
  6. 6. これで IE …対応が必要だったら (((( ;゚ Д ゚ ))))
  7. 7. でも
  8. 8. 今回はサイネージなので Google Chrome だけで OK
  9. 9. 当初の課題
  10. 10. • クオリティの担保 • 8 時間連続起動 • スケジュール • そもそもブラウザで大丈夫なのか
  11. 11. できあがったもの
  12. 12. ブースの様子
  13. 13. DEMO
  14. 14. やってみた感想 • Web 技術だけでもサイネージは作れる • でかいは正義! • Google Chrome すごい! • 普段どれだけ「 にはできるのに技術的 断 しているか念 」を知ることができた
  15. 15. 案件のポイント • WebGL でリッチ感アップ! • プラグインなしで動画再生 • カメラで撮影した画像を XHR でサーバに • UI をほぼ Full Canvas で実装 • タッチパネルによるタッチ操作
  16. 16. すべて Web の技術!
  17. 17. 案件秘話
  18. 18. • デザインスタートがローンチ 2 週間前からの、怒涛の追 い上げ! • ローンチ数日前に体験をよりよくするために UI フルリ ニューアル! • ローンチ前日にやっとの思いでサーバに画像がアップで きない問題を解決! • ローンチ前日になんとか動画再生が止まる問題を解決! • ローンチ 2 週間前に Inka3D が Maya2014 に対応! (奇跡!)
  19. 19. 閑話休題
  20. 20. 工夫した点・苦労した 点
  21. 21. WebGL
  22. 22. レンダリング
  23. 23. • Inka3D で Maya の世界を完全再現! • 世界観・演出を Maya で構築→ Inka3D のラッパーでコンテンツと同期 工夫した点
  24. 24. • WebGL の context lost が多発 • 開発時、 WebGL のクラッシュが OS 巻 き込んで落ちる • Three.js では実現できなかった 苦労した点
  25. 25. DEMO ttp://goo.gl/i0t7n Android 版 Chrome でもいちおう動きますよ!
  26. 26. 写真撮影
  27. 27. • getUserMedia で取得したストリー ムを保持し続ける 当初の予定ではカメラ許可問題から、コンテンツはリロード しない想定で作成 工夫した点
  28. 28. • https でコンテンツを配信 http の配信ではカメラの使用許可がリロードごとに聞かれる • 画像を別サーバに送信できない 送信先はローカルサーバに、実際の送信先はサーバ側でリダ イレクト 苦労した点
  29. 29. 動画再生
  30. 30. • 動画側に円形のマスクを適用 • 再生が停止した場合の復旧処理 工夫した点
  31. 31. • 動画の再生が止まることがある 強制的に load/play を実行して再実行 • Video 、 Canvas 要素には CSS Shader が適用されない 適用を断念 苦労した点
  32. 32. 8 時間耐久コンテンツ
  33. 33. • メモリ管理を徹底 • 現場対応をイメージ • 管理画面とコマンドを用意 工夫した点
  34. 34. • 耐久テスト 朝会社にきたら起動→帰るまで再生しっぱなし • 実機テスト 途中、現場設置のため実機がオフィスを離れる 苦労した点
  35. 35. 実機セットアップ中の図
  36. 36. 案件を終えて思ったこと
  37. 37. • 現場で起きた不具合をその場で修正→反 映が迅速に行える • 遠隔で更新作業を行い、現場担当者側で それを反映することができる
  38. 38. Web とサイネージの 親和性は実は高い!
  39. 39. HTML5 で サイネージは作れ る !!!
  40. 40. ご静聴ありがとうございました

×