第41回 HTML5とか勉強会事例に学ぶHTML5開発に行ってきました。

Inside wri.pe

増井雄一郎さん（@masuidrive）（FrogApps）

wri.peというサイトについての話。

今年のGWに家にこもって作った。基本機能は２日で。

1人でやるので、運用はしない、バックアップは自動で。
→ Herokuで。毎月$200かかっているが。。。

とりあえず作ってつぶやいたら、200人登録があった。
本格的に作ることにしたので、個人だからhogehogeとかはいやだ。

デザインはDribbleとかで。

テストはCapybaraとか使ってる。
テスト作るのは2週間かかってる。

Evernoteとの連携機能のリクエストが多かったので作った。
まだ正式リリースはしていないが、トップページでコナミコマンドを打つと使えるｗ
コナミコマンドを認識するkonami.jsというのがあるので使ってみたかったｗ

Inside "お台場合衆国　リアルスコープブースサイネージ"

比留間和也さん（@edo_m18）（カヤック）

Chromeで作成。42インチの縦長画面。
画面が大きいので、普通のWebと同じで作っていたら違和感があったためデザインをほぼ作り直した。

WebGL

背景はWebGL
Mayaで作ったものをInka3Dでエクスポート。
OSを巻き込んで落ちることがあった。
http://goo.gl/i0t7naで見ることができる。

カメラ撮影

カメラ使用許可の確認が出てしまうので、getuserMediaで取得したストリームを保持し続ける。
httpsで接続すると、リロードしてもセッションを保持し続けてくれた。httpだと毎回確認が必要

動画

動画の再生がなぜか停止することがあった。強制的にload/playをして再実行。
なかなか出ないレアケース
JavaScriptからは正常に再生しているように見える。
いろいろ調べたが、結局原因はわからなかった。

Video、Canvas要素にはCSS Shaderが適用されない。

8時間耐久実行

メモリ管理を徹底。
隠しコマンドで管理画面を用意
耐久テスト朝起動して帰るまで再生しっぱなし
実機テスト

その他

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

Inside World Wide Maze

Saqooshaさん @Saqoosha（Katamari Inc）

スライドはこちら

Webサイトを立体迷路にするWorld Wide Mazeの紹介。

使っている主な機能

WebGL(three.js)
Web Workers(ammo.js, Physijs) 主にボールの動きの物理演算
WebSocket(Socket.id)
DeviceOrientation

作成に6か月。通常キャンペーンサイトは2か月。

スマホの傾きをリアルタイムにPCに送信するには

傾き情報を取得

DeviceOrientation イベントを使って傾き情報を取得。
呼び出される間隔
iOS + Safari : 100ms
Android4 + Chrome : 200ms

傾きの取れ方が、端末やブラウザによって違う。
W3Cの規格通りになっていないものが多い。

WebSocketでPCに送る

スマホからPCに直には送れないので、間にサーバーが必要。
サーバーはNode.js & Socket.io

PCとモバイルのペアリング。
PCとランダムな番号のペアをサーバーで覚えておいて、スマホからその番号を指定。

レイテンシー
ローカル：～5ms
日本のサーバー：～30ms
USのサーバー：～200ms

http://saqoo.sh:13000/で、スマホの傾きをPCで確認できるデモ。
PC画面の上にある数値をスマホに入力。

サーバーを経由せずにスマホからPCに送る方法が最近出てきた。
WebRTC
ペアリングをするサーバーはやっぱ必要。

Inside マンガテレビ

小松健作さん（@komasshu）（NTT Communications）

スライドはこちら
記事はこちら

動画をリアルタイムにマンガ風にするマンガテレビの話。

getUserMediaでビデオ取得
CanvasPixelArray取得
フィルタ処理(参考)

WebSpeechAPIで音声認識
W3Cでドラフトにもなっていない。Chromeのみ実装
httpsじゃないとしょっちゅう確認ダイアログがでる。

Headtrackr.js
顔検出ライブラリ
Face.jsより高速で動く (MBPで30fpsぐらい)
最初認識するまでは遅いが、その後は早い。
1人しか認識できない。

フィルター処理は毎回30万ループ位する。
目標は60fpsで。テストはChromeのツールのProfileがかなり便利。

パフォーマンスチューニングのポイント

関数呼び出しは減らそう
プロパティ参照は無くそう
演算処理はなるべく減らそう
ビットシフトは、若干早くなる
(でも、なんか頭が良くなった気がする）
文字を数値化する場合parseIntの方が早い(特にChrome)
parseInt(“1”) < “1”|0
InternetExplorerを除く