• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5でサイネージは作れる!!
 

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

on

  • 3,058 views

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

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

Statistics

Views

Total Views
3,058
Views on SlideShare
3,001
Embed Views
57

Actions

Likes
13
Downloads
18
Comments
0

4 Embeds 57

https://twitter.com 35
http://1987.catfood.jp 12
http://project.mztm.jp 8
http://tweetedtimes.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 縦長なのは 42 インチの巨大タッチディスプレイを縦に使用
  • 4 台設置。ここでコンテンツの説明。 動画によるクイズ( 3 問)と写真撮影。
  • 実質 3 日程度に製作期間(モデリング)
  • 画像出す

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

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