第41回 HTML5とか勉強会 #html5j に行って来ました

メモったことをアップしておきます。
11月30日にHTML5カンファレンス2013が行われるそうです → HTML5 Conference 2013

Inside wri.pe

wri.pe の話
- ブラウザ上で使えるメモ帳。
- 操作はカーソルキーでも出来るようにしている。
- 日付を入れておけば、カレンダービューに表示される
- GoogleカレンダーとSyncするようになっている
- HTML5なので、iPhone, Androidでも使える
開発についてなど
- ゴールデンウィークで開発した。
  - 篭って開発していました。
- OSS開発に行き詰まったので、気分転換に開発
- 作りたい物リストを公開している
  - masuidriveの作りたい物&試作品リスト
- 煩雑なメモをどうにかしたい
  - 以前はデスクトップにメモを置いていた
  - メモには書いてありました…的なのをなくしたい
- プログラマにはマークダウン
- 検索にひっかかるようにアーカイブにはしたいが、一覧には出ないようにする
- キーボード操作が出来るようにしたい
- 基本機能は2日で書いた
- テストもかねて、Rails4とRuby2で実装。
- フロントもbackboneなど新しいものを盛りこんでやってみた
自分で使うために
- サーバの運用は自分でしない。
- バックアップも全自動。
- 軽く動く
- なので、Herokuで動作するようにする
- 一晩で200人くらい登録した
- メディアに紹介されそうになったので、真面目に開発しようとした
- そのために、英語とデザインを何とかしたい
- 英語
  - 知り合いに書きなおしてもらった
- デザイン
  - 自分でやってみよう
  - dribbbleを参考に - デザインのショーケースサイト Dribbble - Show and tell for designers
  - アイコンだけは作ってもらった
運用
- 月額2万円くらいかかります
- 運用を続けるか信用できない。
  - ドロップボックスにもバックアップするようにしている
  - SeleniumのiPhone版があるので、それを使っての自動テスト
  - Appium: Mobile App Automation Made Awesome.
プレスリリースも打った
- ライターの知り合いに書いてもらった
- 英語圏では、HackerNewsに書き込んだ
  - そのほうがいいらしい。
得た物
- 7000人くらいのユーザが居る
- レビュー記事もある。
- 英語や、その他のヨーロッパの言語でもレビューを書かれる
- 要望のうち、プレビュー、Export、Evernoteなどはすでに対応済み
  - 複雑にしない範囲で、機能追加はしていきたい
まとめ
- エンジニアにとって、自分で使うものを作れるのは特権
- デザインはツールでなんとかなりそうだ
- プロトタイプから、製品になるまで、10〜15倍かそれくらいの時間がかかる

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

HTML5でサイネージは作れる
- WebGLをメインに各種APIを利用
- クオリティは担保しなければならない
- 8時間連続起動しなくてはならない
  - リロードや再起動などはしない
  - スケジュールも1.5ヶ月程度でタイト
- 42インチのタッチパネルのディスプレイを縦置き
作ったもの
- リアルスコープは、大人の社会科見学的な番組
- クイズで3問だして、正解するとインセンティブがある
- 最後にカメラで撮影して、後でダウンロード出来る
- オープニング、エンディング、問題、解説などの動画がモリモリのコンテンツ
- 背景はWebGLで書いている
- 前面は、canvasの2Dでレンダリングしている
- オーディオも流したり、タッチに反応したりする
- 隠しコマンドで管理画面が出来るようになっている
  - 再起動も出来るようになっている
  - 写真が取れないケースはありそうなので、写真を取る事もできる
感想
- Web技術だけでもサイネージは作れる
- でかいは正義
  - 42インチのディスプレイだと、開発時の画面等と全く違うコンテンツに見える
- Google Chromeすごい
  - 普段どれだけ、技術的には出来るのに断念しているかを知ることが出来た
  - IEだと出来ないとか
ポイント
- WebGLでリッチ感はアップする
- プラグインなしで動画再生
- カメラで撮影した画像をXHRでサーバに
- UIをほぼFULL canvasで実装
  - 上がってきたデザインがほぼそのまま再現出来る
- 画面がデカすぎて、普段慣れ親しんでいるUIはそのまま使えない
- WebGLの部分、THREE.jsを利用するのがデファクトとなっている
  - しかし、今回はInka3Dを利用した
  - Maya2014に対応している
WebGL
- Inka3Dで出力した
- 難読化されているので、Mayaで作ったシーンを表示するくらいならOK
- WebGLのcontext lostが多発している
- WebGLのクラッシュでOSまで巻き込んで落ちる。
  - Space capsule
  - Android版Chromeでも動くが重い
カメラ
- パーミッションは最初の1回だけにしました
  - ストリームを保持し続けなければならない
- httpsであれば、使用許可が1回で済む
  - httpだとリロード毎に聞かれる
画像を別サーバに送信出来ない
- クロスドメインの関係で直接アップロード出来ない
- 送信先はローカルサーバに一度送信してから、ローカルサーバ内で処理させる
動画の再生が止まる問題
- エラーをキャッチしたら、強制的に、load/playをする
  - ただ、それでもダメな場合もある
  - JavaScript側から判断がつかない・・・
  - 動画の再生自体がダメになったのではとかんがえられる
  - VideoとCanvas要素には、CSS Shaderが効かない
メモリ管理
- 8時間のロングランなので徹底して行った
現場対応
- 現場で想定される対応ををペーパープロトタイピングでやった
耐久テスト
- 8時間動かす
- 出社したら起動、帰るまで再生しっぱなし
実機テスト
- 現場で使うものを借りてやった
- 本番設置のために返さないといけないので、本番前はきつかった
設置後
- 現場で再起動した不具合をその場で修正→繁栄させる
- SVNで管理していたので、svn upコマンドだけでOK
まとめ
- Webとサイネージの親和性は高い！

Inside World Wide Maze

Chrome World Wide Maze
主な技術
- WebGL … THREE.js
- Web Workers … ammo.js, physi.js
  - 裏側で処理する
  - ボールの動きの物理演算
- Web Socket … Socket.IO
  - スマホの傾きデータをリアルタイムに送信するため
- DeviceOrientation
  - 傾きを取るためのAPI
制作で苦労したところ、全て
- 6ヶ月かけて作った
- 通常のキャンペーンサイト等は2ヶ月以内
スマートフォンの傾きをリアルタイムにPCに送信する
- 傾き情報を取得する
- windowにイベントリスナーを設定
- 一定間隔で呼び出されるので、送信するだけ
- イベントオブジェクトで、alpha、beta、gammaがXYZを表す
  - 仕様的には決まっている
  - んだけれども、実装がまちまちで間違っている
  - ある程度規則的に間違ってるので、変換すればOK
- 取得した角度をPCに送ります
  - WebSocketで、つなぎっぱなし、リアルタイム、サーバからのプッシュもOK
  - スマホからPCに直接送る事は出来ない
  - 実際には、サーバを経由する必要がある
  - node.jsのSocket.IOでやっている
モバイルとPCのペアリングをどうするかをちゃんとしなければならない
- 番号によるペアリング。
- 間にサーバを挟むので、レイテンシーが発生します。
- サーバがアメリカにあります
  - 200msかかります
  - Google Compute Engineを使っている関係で
WebRTCであれば、スマホからPCにデータ直接送れる
- DataChannelを使えばOK
- しかし、ペアリングするためのサーバは必要
- 詳しくは、HTML5 Rocksに記事を書いています
  - 発表で取り上げていない部分についても
  - Case Study: Inside World Wide Maze - HTML5 Rocks

Inside マンガテレビ

マンガテレビ
- リアルタイムにマンガチックなエフェクトをかけるアプリ
- 漫画家の人と対談するときで、話のネタとして作りました
- リアルタイムフィードバックしたり、コミュニケーションしたりしています。
マンガ化
- getUserMediaでビデオ取得して
- CanvasPixcelArray取得して
- フィルター処理をする
音声認識
- WebSpeech API
- W3Cでドラフトにもなっていない、Chromeのみで実装されている
- 認識自体はGoogleさんががんばっています
  - 日本語でも、英語でも
- 意外に重要なのが、httpsにすること
  - そうでないと、確認ダイアログが頻繁に出てしまう
  - カメラもそうだけど、こういうのはhttpではなく、httpsがいい
Headtrackr.js
- 顔認識のためのライブラリ
- Face.jsより高速で動く
  - ただし、最初の認識は遅い
  - 一度認識すると、その後は認識した周囲のみを認識するので早い
  - 一人しか認識しません
パフォーマンスについて
- 毎フレーム30万回のループ処理をします。ここがキモです。
- 1回の処理を10msで行わなければいけません。
- Chromeのプロファイルは結構使える
  - 関数呼び出しは減らす
  - プロパティ参照は無くす
  - 演算処理はなるべく減らす
  - ビットシフトは、若干早くなる
- パフォーマンスチューニングはエコ
  - 特にモバイルでは
  - 電池のもちがよくなるから