@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

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

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

Inside wri.pe

  • wri.pe の話
    • ブラウザ上で使えるメモ帳。
    • 操作はカーソルキーでも出来るようにしている。
    • 日付を入れておけば、カレンダービューに表示される
    • GoogleカレンダーとSyncするようになっている
    • HTML5なので、iPhone, Androidでも使える
  • 開発についてなど
    • ゴールデンウィークで開発した。
      • 篭って開発していました。
    • OSS開発に行き詰まったので、気分転換に開発
    • 作りたい物リストを公開している
    • 煩雑なメモをどうにかしたい
      • 以前はデスクトップにメモを置いていた
      • メモには書いてありました…的なのをなくしたい
    • プログラマにはマークダウン
    • 検索にひっかかるようにアーカイブにはしたいが、一覧には出ないようにする
    • キーボード操作が出来るようにしたい
    • 基本機能は2日で書いた
    • テストもかねて、Rails4とRuby2で実装。
    • フロントもbackboneなど新しいものを盛りこんでやってみた
  • 自分で使うために
    • サーバの運用は自分でしない。
    • バックアップも全自動。
    • 軽く動く
    • なので、Herokuで動作するようにする
    • 一晩で200人くらい登録した
    • メディアに紹介されそうになったので、真面目に開発しようとした
    • そのために、英語とデザインを何とかしたい
    • 英語
      • 知り合いに書きなおしてもらった
    • デザイン
  • 運用
  • プレスリリースも打った
    • ライターの知り合いに書いてもらった
    • 英語圏では、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まで巻き込んで落ちる。
  • カメラ
    • パーミッションは最初の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にデータ直接送れる

Inside マンガテレビ

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

HTML5ガイドブック 増補改訂版 (Google Expert Series)

HTML5ガイドブック 増補改訂版 (Google Expert Series)