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 に対応！（奇跡！）

閑話休題

工夫した点・苦労した点

WebGLWebGL

レンダリング

• Inka3D で Maya の世界を完全再現！

• 世界観・演出を Maya で構築→ Inka3Dのラッパーでコンテンツと同期

工夫した点

• WebGL の context lost が多発

• 開発時、 WebGL のクラッシュが OS巻き込んで落ちる

• Three.js では実現できなかった

苦労した点

DEMO

http://goo.gl/i0t7naAndroid 版 Chrome でもいちおう動きますよ！

写真撮影

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

工夫した点

• https でコンテンツを配信http の配信ではカメラの使用許可がリロードごとに聞かれる

• 画像を別サーバに送信できない送信先はローカルサーバに、実際の送信先はサーバ側でリダイレクト

苦労した点

動画再生

• 動画側に円形のマスクを適用

• 再生が停止した場合の復旧処理

工夫した点

• 動画の再生が止まることがある強制的に load/play を実行して再実行

• Video 、 Canvas 要素には CSS Shaderが適用されない適用を断念

苦労した点

8 時間耐久コンテンツ

• メモリ管理を徹底

• 現場対応をイメージ

• 管理画面とコマンドを用意

工夫した点

• 耐久テスト朝会社にきたら起動→帰るまで再生しっぱなし

• 実機テスト途中、現場設置のため実機がオフィスを離れる

苦労した点

実機セットアップ中の図

案件を終えて思ったこと

• 現場で起きた不具合をその場で修正→反映が迅速に行える

• 遠隔で更新作業を行い、現場担当者側でそれを反映することができる

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

HTML5 でサイネージは作れ

る !!!

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