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

6,271 views

Published on

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

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

No Downloads
Views
Total views
6,271
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
29
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide
  • 縦長なのは 42 インチの巨大タッチディスプレイを縦に使用
  • 4 台設置。ここでコンテンツの説明。 動画によるクイズ( 3 問)と写真撮影。
  • 実質 3 日程度に製作期間(モデリング)
  • 画像出す
  • 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. ご静聴ありがとうございました

    ×