強火で進め

このブログではプログラム関連の記事を中心に書いてます。

第13回HTML5とか勉強会に参加して来ました

HTML5

第13回HTML5とか勉強会 - Google Docs
https://docs.google.com/Doc?docid=0Afz5Dw63IZCSZGZ3bXNjN3ZfMjQ5Y2N0NnI1Z20&hl=ja

今回の「HTML5とか勉強会」の会場はソフトバンクさんでした。

食堂の一角で行われました。そのため飲み食い自由との事。セミナーの途中にはサンドイッチ、ジュース、ビールなどの差し入れも有りました。ソフトバンクさん素敵です。

こちらにUstreamのアーカイブが有ります。

html5j on USTREAM: This show .
http://www.ustream.tv/channel/html5j

※ここ以降の画像はクリックするとちょっとだけ大きい画像で見れます。

「ニコニコ動画でのHTML5」（ドワンゴ 草野さん: 40min）

発表資料

第13回 HTML5とか勉強会で講演した - aduca
http://www.aduca.org/2010/12/13-html5-toka-presentation/

コメントの実装方法
  • DOMでの実装が最速だった
  • DOM実速が最速、Canvas ポピュラーで汎用性有り、SVG重いが綺麗。
要求
  • 簡単で
  • 使いやすく
  • カッコイイ
  • iPadは何か
  • 我々の結論は「持ち歩く画面」
  • リンクを見かけてタップした時に再生出来ないを解決したい
必要技術の洗い出し
  • 動画再生
  • コメント
  • 設定保存
動画再生
  • video要素で対応
  • H.264/mp4
  • CPUの8割くらいを動画に裂かれる
コメント
  • DOM要素をJavascriptで流す方法以外取れないのでそれで対応
設定保存
  • 高画質モードを使うなどプレーヤー設定の保存が必要
  • LocalStorage APIを利用
APIとの通信
  • クロスドメイン通信の必要が有る
  • ニコ動のAPIはflapi.nicovideo.jpにあるため
  • XHR Lv2で対応
パフォーマンスチューニング
  • 何と言っても速度が問題
  • 動画を再生しながらのJavascriptなんて重くならない訳がない
  • 開発期間の1ヶ月以上をパフォーマンスチューニングに充てる
  • 長いコメント→Safariが落ちる
  • 高画質モード→Safariが落ちる
  • クロスドメインに対応する為にHTTPのヘッダに情報を含める修正が有ったくらいで、WebAPIには一切変更しない

【筆者注】HTTPのヘッダに情報を含める修正とは恐らく Access-Control-Allow-Origin の事。

404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin
http://blog.livedoor.jp/dankogai/archives/51502865.html

  • リリース直後のPV数→210000pv
  • ユニークユーザ数→6000uu
  • 動画の上に何かを載せて表示するHTML5アプリ世界初の実運用案件
QA

Q:高速化の方法を話せる範囲内で教えて下さい。

  • DOMツリーの再構築をなるべく行わない作り
  • 事前にコメント表示最大数分のスロットを要素しておく
  • 親要素からのabsoluteで位置指定
  • ソートを再帰に
  • 書籍で紹介されている様な地味な最適化なども

Q:setTimeoutでやってる？

  • setIntervalでやってる
  • videoのtimeupdateで更新
  • シークした時だけ位置合わせ

Q:Flashだったら出来た(簡単だった)のにHTML5だと苦労したところは？

  • コメントに影を付けるドロップシャドー
  • 正規表現でNGマッチングがとにかく遅い
  • XMLのパースが遅い、JSONだったら速いのに→WebAPIに変更をさせない予定だったので出来なかった
  • ニコスクリプト(NICOscript)→実装出来なかった

ニコスクリプトとは (NICOScript)： - IT用語辞典バイナリ
http://www.sophia-it.com/content/%E3%83%8B%E3%82%B3%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88

「P2PライブShareCast - iPhone/iPadへの配信を実現」（ビットメディア 高野さん他: 40min）

  • ShareCast→P2Pでのライブ配信
  • P2Pの為に専用ソフトを入れて貰う必要が有った
  • それを避ける為にJavaAppletを使用


中継の様子。

  • 宮内庁から「P2Pは何だ、いかがわしく無いのか」と質問が
  • 最終的には許可を貰えた。宮内庁からP2P配信を許可された始めての事例

右下はサテライト会場の映像。

NTT Com、低価格なクラウド型サービス「Bizホスティング ベーシック」 - クラウド Watch
http://cloud.watch.impress.co.jp/epw/docs/news/20100427_364240.html

  • 当時はまだサービスが始まっておらずトライアルユーザとして利用


事業仕分けやNHKの全国学校音楽コンクールを中継。


事業仕分け第3弾でiPhone/iPadへの配信を行ったときの記事。


事業仕分け第3弾はニコ動、Ustream、ShareCast、DMM.comの4社が配信


システムの概要。

HTTP Live Streamingによる配信。

システム開発に協力された白石さん(HTML5とか勉強会の主催者)からHTTP Live Streamingについての説明、Appleが策定した仕様。細切れに保存された動画とプレイリスト再生順番のデータにより配信。

【筆者注】
詳細はAppleの以下のサイトに載っています。

HTTP Live Streaming Resources – Apple Developer
https://developer.apple.com/resources/http-streaming/


ストリーミング中継にも関わらず、シークバーを移動して過去の動画を観る事が出来るFrance24の事例の紹介。


France24のシェアキャスト版のシステムの概要。

QA

Q:配信から末端までの遅延は？

  • Flashのプロトコルだと遅延は殆ど無い
  • 大元の部分で30秒位の遅延が発生、中継が増える事ではそんなに遅延は発生しない。大きい場合も1分以内の遅延。

Q:過去の動画が観れる仕組み

  • m3uが分かれてるのではなく、m3uに全てのデータが含まれている。

Q:ビットレートは？

  • PC向けは600kb程度。iPhoneだと250k位でOK、iPadだと500k位

Q:ユーザに保存させない様に制限は可能？

  • Applet上(のメモリ)にデータを保存していてファイルには保存していない

「File API: Directories and System 」（クックパッド 太田さん: 20min）

発表資料。

File API: Writer, Directories and System
http://ss-o.net/event/html1216/

  • File APIは詳しく言うと以下の3つが有る
    • File API
    • File API: Writeer
    • File API:Directies and System
  • サイズ制限は仕様上無し、ブラウザによる制限が有るはず
  • 従来のArrayで扱うには非効率、BlobとTyped Arrayが導入された
  • Typed ArrayはWebGL由来

  • W3C→Unit8ArrayやUnit16Array、Int8Array、Int16Arrayなど
  • ECMA Script→バイナリデータを扱うためのAPIが提案


【筆者注】
スライドではChromeの場合は about:flag となっていますが s が抜けてしまっている様です。Chromeで試す場合は about:flags と入力して下さい。










Firebug(で有ってたかな？)でオブジェクトの内容を表示したところ。


画面への反映方法。


SaveAsで「WebページからファイルをDL」と同じ動作を行う事が出来る。これによりユーザに加工した後のファイルを渡す事が可能。


QA

Q:エラーのハンドリングは？

  • onError(e)で

Q:HTML中に保存したデータを使用可能か？
createObjectURL()を使用する事で参照可能な物に変換可能、imgタグなどに使える

ライトニングトーク「WebSocketRemote for iOS」（kanasanさん）

発表資料。

第13回HTML5とか勉強会の発表資料 - WebSocketRemote for iOS (Kanasansoft Web Lab.)
http://www.kanasansoft.com/weblab/2010/12/html5_toka_13_-_websocketremote_for_ios.html

WebSocketを使ったVPNについての発表でした。

使用した技術。


ブラウザ側で使用した技術。


1回で送信したところ効率が悪かったので分割で送信。


分割するセグメント長によって効率が異なったのでそこを調査。


調査の結果。8192Bを採用


分割して送信する時の注意点。


サーバとブラウザ間の処理。


最適化してこの様な処理に。


iOSデバイスの場合は色々遅い。


この位の差が発生。

会場では実際にWindowsの画面をiPhone(Safariブラウザ)で表示し、マウス操作も可能な様子のデモが行われました。

iPhoneの画面の上の方にWindowsの画面が表示され、画面下にマウスの左右ボタンとスクロールホイール代わりのコントローラが付いていました。